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

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

我建议您在users使用一个new 属性，例如removed 属性，然后在checked该checkbox时将为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; }) } } })();

 <!DOCTYPE html> <html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> </head> <body ng-controller="MainCtrl"> <table> <tr ng-repeat="user in users"> <td> <input type="checkbox" ng-model="user.removed"> </td> <td ng-bind="user.id"></td> <td ng-bind="user.country"></td> <td ng-bind="user.name"></td> </tr> </table> <div ng-if="users.length"> <hr> <button ng-click="removeUserData()">Remove User</button> </div> </body> </html>

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的更多信息，请参见官方文档

地图将使用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 个解决方案

解决方案1
1 已采纳 2016-08-06 19:20:53

解决方案2
0 2016-08-06 15:28:23

解决方案3
0 2016-08-06 16:14:03

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2016-08-06 19:20:53

解决方案2 0 2016-08-06 15:28:23

解决方案3 0 2016-08-06 16:14:03

解决方案1
1 已采纳 2016-08-06 19:20:53

解决方案2
0 2016-08-06 15:28:23

解决方案3
0 2016-08-06 16:14:03