2017-03-14 69 views
0

我在有很多行的角度js中有一個列表。我想在列表中選擇多個行並將其添加到另一個表中。在角度js中選擇多行

我的代碼是

<li class = "list-group-item listroleitem" ng-repeat='role in roles' ng-click="selectRow(role) 
      " ng-class="{selectedRole: role === idSelectedRow}">{{role.roleName}}</li> 

控制器:

$scope.selectRow = function(name){ 
     $scope.idSelectedRow = name; 

    }; 

怎麼辦呢?

回答

1

由於您控制選定的行變量,爲什麼不將它初始化爲數組?

$scope.idSelectedRow = []; 

$scope.selectRow = function(name){ 
    if($scope.idSelectedRow.indexOf(name) > -1) 
     $scope.idSelectedRow.splice($scope.idSelectedRow.indexOf(name), 1); 
    else 
     $scope.idSelectedRow.push(name); 

}; 

然後在CSS中使用這樣的:

<li class = "list-group-item listroleitem" ng-repeat='role in roles' ng-click="selectRow(role) 
      " ng-class="{selectedRole: isSelected(role) }">{{role.roleName}}</li> 




$scope.isSelected = function(some_role){ 
      return $scope.idSelectedRow.indexOf(role) >-1; 
} 
+0

我會怎麼取消? –

+0

@PravinBhasker - 請參閱編輯。 – dev8080

0

更改您的代碼

<li class = "list-group-item listroleitem" ng-repeat='role in roles' ng-click="selectRow(role) 
     " ng-class="{selectedRole: role.selected==true}">{{role.roleName}}---{{role.selected}}</li> 

function TodoCtrl($scope) { 
    $scope.roles = [{roleName:"abc"}, {roleName:"dc"}] 
    $scope.name = 'Superhero'; 

    $scope.selectRow = function(role){ 
     role.selected = !role.selected; 
    }; 
} 

https://jsfiddle.net/U3pVM/30783/