我正在做一个网络应用。
我有一个动态表格。首先,您选择 PRODUCT ,然后选择 LOT 。选择中的项目列表由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);
}
});
};
它有效(here就是一个例子)。但我想要做的是在模态窗口中移动这些字段。我试过这个,但它不起作用(here是另一个例子)。为什么?也许正确的方法是在json中添加项目然后刷新 LOT ,但是如何在json中添加项目?
答案 0 :(得分:2)
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">×</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>