Question

现在我需要删除行取决于它是否被选中。但是如何在每个选定行的控件中访问$ index？我的代码在这里：

  <div ng-app="appTable">
        <div ng-controller="Allocation">

            <button ng-click="add()"> Add </button> 
            <button ng-click="remove()">remove</button>
            <table>
                <th>
                    <td>S.No</td>
                    <td>Name</td>
                    <td>Dept</td>

                </th>
                <tr ng-repeat="data in dataList">
                    <td><input type="checkbox" ng-model="delete"/>{{$index}}</td>    
                    <td> <input type="text" ng-model="data.name"/></td>    
                    <td><input type="text" ng-model="data.dept"/></td>

                </tr>
            </table>
        </div>    
    </div>

var app = angular.module("appTable",[]);
app.controller("Allocation",function($scope) {

    $scope.dataList = [{name:'lin',dept:'b'},{name:'test',dept:'aaa'}];
    $scope.add = function(){
        var data = {};
       data.name ='' ;
       data.dept ='';
       $scope.dataList.push(data);

    }
    var deletes=[];
    $scope.delete=false;


    $scope.remove = function(){

        console.log(deletes);
        angular.forEach($scope.delete,function(v){
        if(v==true){
            deletes.push($index);*How can I get the $index for selected row*
            console.log(deletes);
        }
    });    
            angular.forEach(deletes,function(v,k){
        $scope.dataList.splice(v, 1);
            })

    }
});

现在我可以添加符合要求的行，但我的问题是用户必须检查要删除的行中的复选框，然后单击删除按钮将其删除。例如，他们可以检查要删除的第一行和第三行，只保留第二行。

Answer 1

    <div ng-app="appTable">
            <div ng-controller="Allocation">

                <button ng-click="add()"> Add </button> 
                <button ng-click="remove()">remove</button>
                <table>
                    <th>
                        <td>S.No</td>
                        <td>Name</td>
                        <td>Dept</td>

                    </th>
                    <tr ng-repeat="data in dataList">
                        <td><input type="checkbox" ng-model="data.isDelete"/>{{$index}}</td>    
                        <td> <input type="text" ng-model="data.name"/></td>    
                        <td><input type="text" ng-model="data.dept"/></td>

                    </tr>
                </table>
            </div>    
        </div>

    var app = angular.module("appTable",[]);
    app.controller("Allocation",function($scope) {

        $scope.dataList = [{name:'lin',dept:'b'},{name:'test',dept:'aaa'}];
        $scope.add = function(){
            var data = {};
           data.name ='' ;
           data.dept ='';
           $scope.dataList.push(data);

        };
        $scope.remove = function(){
            var newDataList=[];
            angular.forEach($scope.dataList,function(v){
            if(!v.isDelete){
                newDataList.push(v);
            }
        });    $scope.dataList=newDataList;
        };

});

https://jsfiddle.net/9qttf7ph/

Answer 2

您可能需要在 ng-repeat 指令中添加以下内容：

 <tr ng-repeat="data in dataList track by $index">

然后使用$ index进行删除。

您可以从官方角度文档中获取有关此here的更多信息。

Answer 3

替换

<input type="checkbox" ng-model="delete"/>

通过

<input type="checkbox" ng-model="data.toBeDeleted"/>

然后，点击该按钮，删除阵列中具有真正toBeDeleted属性的所有数据。

如何从angularjs中的表中删除行

3 个答案: