Javascript AngularJS:将元素添加到<;李>;动态地
我无法在单击“添加”按钮时填充列表。问题是,当我再次更改文本字段时,我的列表数据会被更改(绑定),如何避免这种情况 HTMLJavascript AngularJS:将元素添加到<;李>;动态地,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我无法在单击“添加”按钮时填充列表。问题是,当我再次更改文本字段时,我的列表数据会被更改(绑定),如何避免这种情况 HTML <div class="control-group"> <label class="control-label" for="projectManager">Project Manager(s)</label> <div class="row controls" > <input type
<div class="control-group">
<label class="control-label" for="projectManager">Project Manager(s)</label>
<div class="row controls" >
<input type="text" class="span3" placeholder="Manager name" ng-model="pm.name">
<input type="text" class="span2" placeholder="Manager type" ng-model="pm.type">
<button type="button" ng-click="addManagersForm()"> Add </button>
</div>
<div class="row controls" >
<ul><li ng-repeat="tPm in pms">{{tPm.name}}</li></ul>
</div>
</div>
之所以会发生这种情况,是因为您正在将
$scope.pm
对象推入数组,并且该对象绑定在表单中
只需创建一个新对象,您就可以:
$scope.addManagersForm = function() {
var pm = $scope.pm;
$scope.pm = {}; // Do this to clean up the form fields
$scope.pms.push(pm);
};
这是因为实例是通过引用传递的。您可以使用创建它的深度副本 请参见此示例Plunker: 更新代码: HTML页面
<body ng-app="app" ng-controller="myContrl">
<div class="control-group">
<label class="control-label" for="projectManager">Project Manager(s)</label>
<div class="row controls" >
<input type="text" class="span3" placeholder="Manager name" ng-model="pm.name">
<input type="text" class="span2" placeholder="Manager type" ng-model="pm.type">
<button type="button" ng-click="addManagersForm(pm)"> Add </button>
</div>
<div class="row controls" >
<ul><li ng-repeat="tPm in pms">{{tPm.name}}</li></ul>
</div>
</div>
您的示例中有不匹配的引号。那只是打字错误吗?非常感谢!创建新的var是有意义的。我现在已经用单行代码替换了代码[感谢@David Riccitelli对angular.copy()的建议]$scope.pms.push(angular.copy($scope.pm));瞧!
<body ng-app="app" ng-controller="myContrl">
<div class="control-group">
<label class="control-label" for="projectManager">Project Manager(s)</label>
<div class="row controls" >
<input type="text" class="span3" placeholder="Manager name" ng-model="pm.name">
<input type="text" class="span2" placeholder="Manager type" ng-model="pm.type">
<button type="button" ng-click="addManagersForm(pm)"> Add </button>
</div>
<div class="row controls" >
<ul><li ng-repeat="tPm in pms">{{tPm.name}}</li></ul>
</div>
</div>
angular.module('app', []).controller('myContrl',["$scope", "$http", function($scope, $http) {
$scope.pms = [];
$scope.addManagersForm = function(pm) {
console.log(pm);
$scope.pms.push(angular.copy(pm));
};
}]);