Question

我正在使用AngularJS v1.5.8。

在 html

中

<div class="form-group row" data-ng-repeat="friend in friends track by $index">
            <label class="col-xs-1 control-label">Friend </label>
            <div class="col-xs-2">
                <input type="text" class="form-control" required ng-model="friend.first_name"  placeholder="First Name" />
            </div>
            <div class="col-xs-2">
                <input type="text" class="form-control" required ng-model="friend.last_name"  placeholder="Last Name" />
            </div>
            <div class="col-xs-4">
                <input type="email" class="form-control" required ng-model="friend.email"  placeholder="Email" />
            </div>
            <div class="col-xs-2">
                <input type="text" class="form-control" ng-model="friend.phone" placeholder="Phone" />
            </div>
            <div class="col-xs-1">
                <a href="#" ng-click="addMore($index)"><span class="glyphicon glyphicon-plus"></span></a>
            </div>
            <div class="col-xs-1">
                <a href="#" ng-click="removeFriend($index)"><span class="glyphicon glyphicon-remove"></span></a>
            </div>
            <div class="clearfix"></div>

在控制器

中

$ scope.friends = [{first_name：＆＃34;＆＃34;，last_name：＆＃34;＆＃34;，email：＆＃34;＆＃34;，phone：＆＃34;＆＃34;}];

$scope.addMore = function () {
    console.log('in add');
    $scope.friends.push({
        first_name: "",
        last_name: "",
        email: "",
        phone: ""
    });
};

$scope.removeFriend = function(index) {
    console.log("in remove: "+index);
    $scope.friends.splice(index,1);//delete last row in html form..am I expecting something wrong....
};

当我检查代码时，我得到了removeList($index)，而我希望removeList(1)或removeList(4)。

可能出现什么问题？

我有两个问题 - 为什么即使我正确地传递索引，它最终会删除最后一个元素 - 输入数据的方式将以角度更新......

如果您有一些教程可以关注，请分享链接

Answer 1

我认为你有一些拼写错误：

$scope.removeList = function(referIndex) {
            console.log("in remove: " + referIndex); // note it is + not .
            $scope.lists.splice(referIndex, 1); // note $scope.lists not $scope.list
        };

Answer 2

这里不需要使用索引跟踪，因为我们没有使用重复键。请使用以下代码

<div ng-app="myApp" ng-controller="myCtrl">
<div  class="form-group row" data-ng-repeat="friend in friends">
    <label class="col-xs-1 control-label">Friend </label>
    <div class="col-xs-2">
        <input type="text" class="form-control" required ng-model="friend.first_name"  placeholder="First Name" />
    </div>
    <div class="col-xs-2">
        <input type="text" class="form-control" required ng-model="friend.last_name"  placeholder="Last Name" />
    </div>
    <div class="col-xs-4">
        <input type="email" class="form-control" required ng-model="friend.email"  placeholder="Email" />
    </div>
    <div class="col-xs-2">
        <input type="text" class="form-control" ng-model="friend.phone" placeholder="Phone" />
    </div>
    <div class="col-xs-1">
        <a href="#" style="margin-left:120px;" ng-click="removeFriend($index)"><span class="glyphicon glyphicon-remove">Remove</span></a>
    </div>
</div> 
<div class="col-xs-1">
    <a href="#" ng-click="addMore($index)"><span class="glyphicon glyphicon-plus">Add</span></a>
</div>
</div>        
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>      
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope)
     {    
         $scope.friends = [{first_name: "", last_name: "", email: "", phone: ""}];
         $scope.addMore = function () {
            console.log('in add');
            $scope.friends.push({
                first_name: "",
                last_name: "",
                email: "",
                phone: ""
            });
        };
        $scope.removeFriend = function(index)
         {
            console.log("in remove: "+index);
            $scope.friends.splice(index,1);//delete last row in html form..am I expecting something wrong....
        };
    })
</script>

无法使用角度js删除动态添加的表单字段

2 个答案: