Question

我从服务器接收数据列表，并使用ng-repeat以及每行中的复选框以表格格式显示。我的要求是在单击removeUserData按钮时将选定的行传递回服务器。面对完成任务的问题，我们将不胜感激。

<table border="2" border-color=black>
       <tr data-ng-repeat="user in users">
            <td><input type="checkbox"></td><td>{{user.id}}</td><td>{{user.country}}</td><td>{{user.name}}</td>             
       </tr>
</table><br>
<button data-ng-click="removeUserData()" data-ng-show="users.length">Remove User</button>

Answer 1

我建议您在new中使用users 属性，类似removed，然后checkbox为{ {1}}它将是checked，否则为true。

查看工作：

false

(function() {
  angular
    .module("app", [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.removeUserData = removeUserData;

    $scope.users = [  
       {  
          "id":1,
          "country":"Italy",
          "name":"Pavarotti"
       },
       {  
          "id":2,
          "country":"French",
          "name":"Some user"
       }
    ];

    function removeUserData() {
      $scope.users = $scope.users.filter(function(user) {
        return !user.removed;
      })
    }
  }
})();

Answer 2

你的HTML

    <div ng-app='myApp' ng-controller='myCtrl'>
    <table border="2" border-color=black>
        <tr data-ng-repeat="user in users">
            <td>
                <input type="checkbox" ng-change="storeIndexOfRow($index)">
            </td>
            <td>{{user.country}}</td>
            <td>{{user.name}}</td>
        </tr>

        <button data-ng-click="removeUserData()" data-ng-show="users.length">Remove User</button>

控制器

var app = angular.module("myApp", []);

angular
.module('myApp')
.controller('myCtrl', ['$scope',
    function ($scope) {

        $scope.users = [
            { country: 'india', name: 'name1' },
            {country: 'india2', name: 'name2'}
        ];

        $scope.selectedIndex = [];

        $scope.storeIndexOfRow = function (val) {
            //write the logic for if checbox is checked or not
            $scope.selectedIndex.push(val);
            console.log($scope.selectedIndex);
        };

        $scope.removeUserData = function () {
            angular.forEach($scope.selectedIndex, function (v, k) {
                console.log($scope.users[v]);
            });
        };




    }]);

Answer 3

一种选择是使用ng-model存储一个地图，该地图将决定是否应删除每一行，

ng-model会将复选框值绑定到给定的表达式，在我们的例子中绑定到地图。

有关ng-model see official documenation

的更多信息

地图将使用user.id作为键，并将根据复选框值存储布尔值。

让我们调用地图shouldDeleteUserMap。

然后，我们可以根据shouldDeleteUserMap过滤您的用户数组，然后再将其发送回服务器。

<table border="2" border-color=black>
       <tr data-ng-repeat="user in users">
            <td><input type="checkbox" ng-model='shouldDelteUserMap[user.id]' ></td><td>{{user.id}}</td><td>{{user.country}}</td><td>{{user.name}}</td>             
       </tr>
</table><br>
<button data-ng-click="removeUserData()" data-ng-show="users.length">Remove User</button>

和您的控制器，看起来有点像这样：

angular.module('app',[])
.controller('myCtrl', function($scope){
  $scope.shouldDelteUserMap = {};
  $scope.users = [{
    id: 1,
    country: 'USA',
    name: 'john'
  },
  {
    id: 2,
    country: 'Germany',
    name: 'jane'
  }];
   $scope.removeUserData = function(){
   var usersToRemove = $scope.users.filter( function(user){
     return $scope.shouldDelteUserMap[user.id];
    });
   console.log(usersToRemove); // here comes your function that calls the server
   }
});

这里是jsbin的一个例子： http://jsbin.com/jisigiboha/edit?html,css,js,console,output

如何收集AngularJS中已选择的行的数据？

3 个答案: