Javascript 使用两种方式绑定从角度视图到控制器动态添加/创建对象到数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28622309/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically adding/creating object to array from angular view to controller using two way binding
提问by santosh kore
I have one controller, controller's template/view as below,
我有一个控制器，控制器的模板/视图如下，
myController
我的控制器
angular.module('myApp', []).
controller('myController', ['$scope', function($scope) {
$scope.myObject = {};
}]);
myView
我的看法
<div class="container" ng-app="myApp">
<form name="myForm" novalidate ng-controller="myController">
<div class="form-group">
<label for="firstname" class="control-label col-xs-2">Name</label>
<div class="col-xs-10">
<input type="text" ng-model="myObject.firstname" id="firstname">
</div>
</div>
<div class="form-group">
<label for="lastname" class="control-label col-xs-2">LastName</label>
<div class="col-xs-10">
<input type="text" ng-model="myObject.lastname" id="lastname">
</div>
</div>
</form>
</div>
here whenever user enters any data it gets reflected to myObjectwith firstnameand lastnameas dynamic properties for myObject.
Now my new requirement is to add multiple dynamic views for firstnameand lastnamein the same view(For that I will be creating a directive and appending dynamically), and now I want myObjectto be an array of objectslike
这里，每当用户进入的任何数据它被反射到myObject与firstname和lastname作为动态属性myObject。现在，我的新要求是添加多个动态视图用于firstname与lastname在同一视图（对于我将创建一个指令，并动态地追加），现在我想myObject成为一个array of objects像
myObjectArray = [{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"}]
and here each object should be populated through dynamically added views by user input using angular two way binding. But I am not sure how can I achieve this with angular, how to add object to array whenever there is a new directive template added to view dynamically.
在这里，每个对象都应该通过用户输入使用角度双向绑定通过动态添加的视图来填充。但我不确定如何使用 angular 实现这一点，以及如何在添加新指令模板以动态查看时将对象添加到数组。
回答by Abhinav Gujjar
In Angular you should avoid thinking in terms of dynamic controls.
在 Angular 中，您应该避免考虑动态控件。
Here is the approach
这是方法
- You want to list firstname, lastname objects
- You want to add a new object to this list.
- 你想列出名字，姓氏对象
- 您想向此列表中添加一个新对象。
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [];
$scope.itemsToAdd = [{
firstName: '',
lastName: ''
}];
$scope.add = function(itemToAdd) {
var index = $scope.itemsToAdd.indexOf(itemToAdd);
$scope.itemsToAdd.splice(index, 1);
$scope.items.push(angular.copy(itemToAdd))
}
$scope.addNew = function() {
$scope.itemsToAdd.push({
firstName: '',
lastName: ''
})
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-repeat="item in items">
{{item.firstName}} {{item.lastName}}
</div>
<div ng-repeat="itemToAdd in itemsToAdd">
<input type="text" ng-model="itemToAdd.firstName" />
<input type="text" ng-model="itemToAdd.lastName" />
<button ng-click="add(itemToAdd)">Add</button>
</div>
<div>
<button ng-click="addNew()">Add new</button>
</div>
</body>Notice these are simply talking about model. Here is a plunk
请注意，这些只是在谈论模型。这是一个笨蛋
