AngularJS:将元素添加到<李>动态地

AngularJS: Add Elements to <li> dynamically

本文关键字：gt 动态 lt 元素 添加 AngularJS      更新时间：2023-09-26

我无法在单击"添加"按钮时填充列表。问题是，当我再次更改文本字段时，我的列表数据会发生更改（绑定），如何避免这种情况？

HTML

<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()">&nbsp;&nbsp;Add&nbsp;&nbsp;</button>
    </div>
    <div class="row controls" >
        <ul><li ng-repeat="tPm in pms">{{tPm.name}}</li></ul>
    </div>
</div>

JS

app.controller('myContrl',["$scope", "$http", function($scope, $http) {
    $scope.pms = [];
    $scope.addManagersForm = function() {
        console.log($scope.pm);
        $scope.pms.push($scope.pm);
    };
}]);

发生这种情况是因为您正在将$scope.pm对象推入数组，并且该对象已绑定到表单中。

只需创建一个新对象，您就可以了：

$scope.addManagersForm = function() {
    var pm = $scope.pm;
    $scope.pm = {}; // Do this to clean up the form fields
    $scope.pms.push(pm);
};

这是因为实例是通过引用传递的。你可以使用angular.copy创建它的深度副本。

参见此示例Plunker：http://plnkr.co/edit/d8HwXzTBK61sMuwLollW

更新后的代码：

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)">&nbsp;&nbsp;Add&nbsp;&nbsp;</button>
    </div>
    <div class="row controls" >
        <ul><li ng-repeat="tPm in pms">{{tPm.name}}</li></ul>
    </div>
</div>

JavaScript

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));
    };
}]);
相关文章：