我有一个控制器,控制器的模板/视图如下,
myController的
angular.module('myApp',[]).
controller('myController',['$scope',function($scope) {
$scope.myObject = {};
}]);
我的看法
<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>
这里每当用户输入任何数据时,它将以myname的firstname和lastname形式反映到myObject,作为myObject的动态属性.
现在我的新要求是在同一视图中为firstname和lastname添加多个动态视图(为此,我将创建一个指令并动态附加),现在我希望myObject成为一系列对象,如
myObjectArray = [{firsname: "abc",lastname: "xyz"},{firsname: "abc",lastname: "xyz"}]
并且这里每个对象都应该通过使用角度双向绑定的用户输入通过动态添加的视图进行填充.但是我不知道如何用角度来实现这一点,如果添加了一个新的指令模板来动态地查看,那么如何将数组添加到数组中.
解决方法
在角度你应该避免在动态控制方面的思考.
这是方法
>你想列出firstname,lastname对象
>你想要添加一个新的对象到这个列表.
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>
注意这些只是谈论模型.这是一个plunk
