Add item json in ANGULAR with pop-up

问题

I'm doing a web app.

I have a dynamic table. First, you choose a PRODUCT and then the LOT. The list of item in the select are taken by json. Now the problem is that I want to add the possibility to create new item to add in the <select> LOT.

So, first I tried to add the field in the LOT column using the following codes:

  $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);
      }
    });
  };

and it works (here is an example). But what I want to do is move those fields in a modal window. I tried this, but it doesn't work (here is another example). Why? Maybe the correct way is to add the item in the json and then refresh the LOT, but how can I add the item in the json?

回答1:

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>

来源：https://stackoverflow.com/questions/34262461/add-item-json-in-angular-with-pop-up

标签

javascript

angularjs

json

modal-dialog

ngtable