recorrer javascript angularjs json modal-dialog ngtable

javascript - recorrer - Agregar el ítem json en ANGULAR con pop-up



object object angular 4 (1)

Estoy haciendo una aplicación web.

Tengo una mesa dinámica. Primero, eliges un PRODUCTO y luego el LOTE . La lista de elementos en la selección está tomada por json. Ahora el problema es que quiero agregar la posibilidad de crear un nuevo elemento para agregar en el <select> LOTE .

Entonces, primero traté de agregar el campo en la columna LOT usando los siguientes códigos:

$scope.addLot = function(id,val,lotId) { // console.log(id); var inWhichProduct = id; var newArray = { "value": val, "id": lotId }; //console.log($scope.items) angular.forEach($scope.items,function(v,i){ if($scope.items[i].id == id ) { $scope.items[i].lots.push(newArray); console.log($scope.items[i].lots); } }); };

y funciona ( aquí hay un ejemplo). Pero lo que quiero hacer es mover esos campos en una ventana modal. Intenté esto, pero no funciona ( aquí hay otro ejemplo). ¿Por qué? Tal vez la forma correcta es agregar el elemento en el JSON y luego actualizar el LOTE , pero ¿cómo puedo agregar el elemento en el JSON?


angular.module(''app'', []).controller(''ExampleController'', [''$scope'', function($scope) { $scope.infos = [ {name: "i will go to modal 1"}, {name: "i will go to modal 2"} ]; $scope.goToModal = function(info) { $scope.newDataInModal = info; } } ]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container" ng-app="app" ng-controller="ExampleController"> <!-- start container --> <table class="table table-bordered"> <tr ng-repeat="info in infos"> <td> {{info.name}} </td> <td> <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" ng-click="goToModal(info)"> Launch demo modal </button> </td> </tr> </table> <!-- Button trigger modal --> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> </button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> {{newDataInModal.name}} </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- close container --> </div>