在ANGULAR中添加带有弹出窗口的json项

Add item json in ANGULAR with pop-up

本文关键字：窗口 json ANGULAR 添加      更新时间：2023-09-26

我正在做一个web应用程序。

我有一个动态的表。首先，您选择产品，然后选择LOT。select中的项目列表由json获取。现在的问题是，我想添加创建新项目以添加到<select>LOT中的可能性。

因此，首先我尝试使用以下代码在LOT列中添加字段：

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

它是有效的（这里是一个例子）。但我想做的是在模态窗口中移动这些字段。我试过这个，但不起作用（这里是另一个例子）。为什么？也许正确的方法是在json中添加项目，然后刷新LOT，但我如何在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>

相关文章：