ANGULAR中添加物品JSON与弹出 [英] Add item json in ANGULAR with pop-up
本文介绍了ANGULAR中添加物品JSON与弹出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在做一个web应用程序。
我有一个动态的表。首先，你选择的产品，然后在拍。项目在选择列表中采取JSON。现在的问题是，我想补充的可能性创造新的项目中添加＆LT;选择＆GT; LOT 。
所以，首先我尝试添加在很多领域使用以下codeS 列：
$ scope.addLot =功能（ID，缬氨酸，lotId）{
//的console.log（ID）;
VAR inWhichProduct = ID;
VAR newArray = {价值：VAL，ID：lotId};
//console.log($scope.items）
angular.forEach（$ scope.items，功能（V，I）{
如果（$ scope.items [I] .ID == ID）
{
$ scope.items [I] .lots.push（newArray）;
的console.log（$ scope.items [I] .lots）;
}
}）;
};
和它的工作原理（这里就是一个例子）。但我想做的是在一个模式窗口移动这些领域。我想这一点，但它不工作（这里是另一个例子） 。为什么？也许正确的做法是在JSON添加项目，然后刷新的拍，但我怎么能在JSON添加的项目？
解决方案
\r
\r\r
\r＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=应用程序NG控制器=ExampleController＆GT;\r
\r
＆LT; HEAD＆GT;\r
＆LT;标题＆GT;＆计算器LT; /标题＆GT;\r
＆LT;间的charset =UTF-8＆GT;\r
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1＆GT;\r
＆LT;链接HREF =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css的rel =stylesheet属性/＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;身体GT;\r
\r
＆LT; DIV CLASS =容器＆GT;\r
＆LT;表类=表表镶上＆GT;\r
＆LT; TR NG重复=中的相关信息的信息＆GT;\r
＆所述; TD＆GT;\r
{{info.name}}\r
＆LT; / TD＆GT;\r
＆所述; TD＆GT;\r
＆LT;按钮式=按钮级=BTN BTN-主要BTN-SM数据切换=莫代尔数据目标=＃myModalNG点击=goToModal（信息）＆GT;\r
启动演示模式\r
＆LT; /按钮＆GT;\r
＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; /表＆gt;\r
＆LT; / DIV＆GT;\r
\r
\r
＆LT;！ - 按键触发模式 - ＆GT;\r
＆LT;！ - 模态 - ＆GT;\r
＆LT; DIV CLASS =模式变脸ID =myModal的tabindex = - 1角色=对话框中的咏叹调-labelledby =myModalLabel＆GT;\r
＆LT; DIV CLASS =模式，对话框的角色=文件＆GT;\r
＆LT; DIV CLASS =模式内容＆GT;\r
＆LT; DIV CLASS =模头＆GT;\r
＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA标签=关闭＆GT;＆LT;跨度ARIA隐藏=真＆GT;＆安培;倍;＆LT; / SPAN＆GT;\r
＆LT; /按钮＆GT;\r
＆LT; H4类=模式标题ID =myModalLabel＆GT;模态标题＆LT; / H4＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =模体＆GT;\r
{{newDataInModal.name}}\r
＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =模式躯＆GT;\r
＆LT;按钮式=按钮级=BTN BTN-默认的数据驳回=模式＆GT;关闭＆LT; /按钮＆GT;\r
＆LT;按钮式=按钮级=BTN BTN-小学＆GT;保存更改LT; /按钮＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
\r
＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-1.11.3.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js＆GT;＆下; /脚本＆GT;\r
\r
＆LT;脚本＆GT;\r
angular.module（'应用'，[]）\r
.controller（'ExampleController'，['$范围'，\r
功能（$范围）{\r
$ scope.infos = [{\r
名道：我会去莫代尔\r
}];\r
\r
$ scope.goToModal =功能（信息）{\r
$ scope.newDataInModal =信息;\r
}\r
}\r
]）;\r
＆LT; / SCRIPT＆GT;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT; \r
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?
解决方案
<!DOCTYPE html>
<html ng-app="app" ng-controller="ExampleController">
<head>
<title>stackoverflow</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="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>
</div>
<!-- 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>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
<script>
angular.module('app', [])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.infos = [{
name: "i will go to modal"
}];
$scope.goToModal = function(info) {
$scope.newDataInModal = info;
}
}
]);
</script>
</body>
</html>
这篇关于ANGULAR中添加物品JSON与弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
