使用弹出窗口在 ANGULAR 中添加项目 json

2022-01-17 00:00:00 json angularjs modal-dialog javascript ngtable

我正在做一个网络应用程序.

I'm doing a web app.

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

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.

所以，首先我尝试使用以下代码在 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);
      }
    });
  };

它有效(这里是一个例子).但我想要做的是在模式窗口中移动这些字段.我试过这个，但它不起作用(这里是另一个例子).为什么?也许正确的方法是在json中添加item，然后刷新LOT，但是如何在json中添加item呢?

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?

推荐答案

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>

相关文章