2016-04-11 4 views
0

У меня есть ng-таблица, где я пытаюсь реализовать выбор, используя флажок в каждой строке.ng-table: выбор флажка в каждой строке

<table id="List" class=" table table-bordered table-striped" 
    ng-table="tableParams" show-filter="true" template-pagination="custom/pager"> 

<tbody> 
     <tr ng-repeat="item in $data" > 
      <td style="width: 35px"> 
    <input type="checkbox" name="selectedIds[]" value="{{item.id}}" ng-checked="isRowSelected(item.id)" ng-click="toggleSelection(item.id)" /> 
     </td> 
<td data-title="'Name'" sortable="'Name'" filter="{ 'Name': 'text' }" > 
     {{ item.Name}} </a> 

    </td> 
    <td data-title="'Email'" sortable="'Email'" > 
     {{ item.Email}} 
    </td> 
    <td data-title="'Phone Number'" sortable="'PhoneNumber'"> 
     {{ item.PhoneNumber}} 
      </td> 
    </tr> 

это контроллер:

angular.module("umbraco").controller("ListController", 
function ($scope, $http, $routeParams) { 
$scope.selectedIds = []; 
    $scope.toggleSelection = function (val) { 
      var idx = $scope.selectedIds.indexOf(val); 
      if (idx > -1) { 
       $scope.selectedIds.splice(idx, 1); 
      } else { 
       $scope.selectedIds.push(val); 
      } 
     }; 

     $scope.isRowSelected = function (id) { 
      return $scope.selectedIds.indexOf(id) >= 0; 
     }; 
     $scope.isAnythingSelected = function() { 
      return $scope.selectedIds.length > 0; 
     }; 
}); 

я пытаюсь выбрать отдельные строки, однако приведенный выше код выбора всех строк на любой строке мыши. любое предложение по этому поводу?

+0

Можете ли вы сделать jsfiddle как пример ? –

ответ

2

Вы не используя силу углового правильно :) Вы должны попробовать что-то подобное на ваш взгляд:

<input type="checkbox" ng-checked="item.isRowSelected" ng-click="toggleSelection(item)" /> 

и в контроллере:

$scope.toggleSelection = function(item){ 
    item.isRowSelected = !item.isRowSelected; 
} 


$scope.isAnythingSelected = function() { 
    for(var i = 0; i < $scope.data.length; i++){ 
     if($scope.data[i].isRowSelected === true){ 
      return true; 
     } 
    } 

    return false; 
};