AngularJSで選択された行のデータを収集する方法は？

私はサーバーからのデータのリストを受信しており、各行にチェックボックスと共にng-repeatを使用してテーブル形式で表示しています。私の要件は、removeUserDataボタンをクリックすると、選択した行をサーバーに戻すことです。それを達成するために直面している問題は、助けていただければ幸いです。それは削除するかどうAngularJSで選択された行のデータを収集する方法は？

<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>

出典

2016-08-06 Ashish Agrawal

私はあなたがこれを達成するために、角UIグリッドを使用することをお勧めします。他の方法もあるかもしれませんが、私の考えではui-girdが最適です。または、anglejsで$ indexを使用することができます –

@AshishAgrawal、私の答えはあなたのために働いたのですか？ – developer033

@developer033はい.. nは今、あなたの意見を受け入れるほどの評判を持っています。受け入れられる!! –

私はnewを利用するように、あなたをお勧めしたいですプロパティをremovedとし、checkboxを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; 
 
     }) 
 
    } 
 
    } 
 
})();

<!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>

出典

2016-08-06 19:20:53 developer033

あなたの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]); 
      }); 
     }; 




    }]);

出典

2016-08-06 15:28:23

1つのオプションは、行ごとに決定するマップを保存するためにng-modelを使用することですそうでない場合、

ng-modelは、指定された式にチェックボックス値をバインドします。ここではマップにマップします。マップがキーとしてuser.idを使用すると、チェックボックスの値に基づいてブール値を格納しますNG-モデルsee official documenation

の詳細については、

。

このマップを呼び出すことができます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

出典

2016-08-06 16:14:03 BarakD

私はこれをコピーしようとしましたが、うまくいきませんでした –

私はこの例を更新し、jsbinを追加しました – BarakD

AngularJSで選択された行のデータを収集する方法は？

答えて

関連する問題