2017-09-20 4 views
-1

각도에있는 ng-repeat가있는 목록에서 체크 항목을 가져오고 싶습니다. 항목을 선택하고 나면 체크 된 항목을 다른 목록에 넣고 싶습니다. 여기까지 내 코드가 있습니다.각도를 사용하여 ng-repeat에서 체크 된 항목을 얻는 방법은 무엇입니까?

<div class="col-lg-12" data-ng-repeat="user in users track by $index"> 
    <div class="col-lg-12"> 
     <div class="col-lg-3"> {{user.name}} </div> 
     <div class="col-lg-3"> 
      <input type="checkbox" data-ng-checked="selectUser(user)" data-ng-model="user.isSelected" />    
     </div> 
    </div> 
</div> 

<div class="col-lg-12" data-ng-repeat="selectedUser in selectedUsers track by $index"> 
    <div class="col-lg-12"> 
     <div class="col-lg-3"> {{selectedUser.name}} </div> 
     <div class="col-lg-3">     
     </div> 
    </div> 
</div> 

확인 된 사용자를 얻는 내 컨트롤러 기능입니다.

$scope.selectUser = function(user){ 
    if (user.isSelected) { 
     if ($scope.selectedUsers.indexOf(user.id) === -1) { 
      $scope.selectedUsers.push(user); 
     } 
    }else { 
     var index = $scope.selectedUsers.indexOf(user.id); 
     if ($scope.selectedUsers.indexOf(user.id) != -1) { 
      $scope.selectedUsers.splice(index, 1); 
     } 

} 나는 확인란을 선택 은 모든 사용자 값은 selectUsers() 함수에 전달됩니다. 그리고 부정확 한 결과를 줄 것입니다. 내가 선택한 사용자를 얻고 싶습니다. 어떻게해야합니까?

+0

는 NG-검사의 설명서를 참조하십시오. 그것은 당신이 생각하는 것이 아닙니다. 이 체크 박스를 선택하면 호출되지 않습니다. 변경 사용. –

+0

사용자를 확인할 때 무엇을 얻을 수 있습니까? – Nikita

+0

@Nikita ID가 '1'인 사용자를 확인하고 5 명의 사용자가있는 경우 '1'사용자가 selectedUsers 목록에 5 번 추가됩니다. – spc91

답변

1

처럼 당신은 잘못된 방법으로 NG 검사를 사용하고 여기에

만든 어떤 실수를 필요가 있다고 생각합니다.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 
    <script type="text/javascript"> 
 

 
     var app = angular.module('myApp', []); 
 
     app.controller('myCtrl', function($scope) { 
 
      $scope.allUsers = [{ 
 
       id:0, 
 
       name:'john', 
 
       age:26, 
 
       selectedUser:true 
 
      },{ 
 
       id:1, 
 
       name:'isha', 
 
       age:23, 
 
       selectedUser:false 
 
      },{ 
 
       id:2, 
 
       name:'scott', 
 
       age:34, 
 
       selectedUser:true 
 
      },{ 
 
       id:3, 
 
       name:'riya', 
 
       age:26, 
 
       selectedUser:false 
 
      },{ 
 
       id:4, 
 
       name:'Adam', 
 
       age:5, 
 
       selectedUser:true 
 
      },{ 
 
       id:5, 
 
       name:'doe', 
 
       age:56, 
 
       selectedUser:true 
 
      },{ 
 
       id:6, 
 
       name:'Jack', 
 
       age:22, 
 
       selectedUser:true 
 
      },{ 
 
       id:7, 
 
       name:'robin', 
 
       age:11, 
 
       selectedUser:true 
 
      }]; 
 

 
      $scope.selectedUsers = []; 
 

 
      $scope.selectUser = function(user){ 
 
       if (user.isSelected) { 
 
        $scope.selectedUsers.push(user); 
 
       }else { 
 

 
        for (var i = 0; i < $scope.selectedUsers.length; i++) { 
 
         if ($scope.selectedUsers[i].id == user.id) { 
 
          $scope.selectedUsers.splice(i, 1); 
 
         } 
 
        } 
 
       } 
 
      } 
 
     }) 
 
    </script> 
 
</head> 
 
<body style="margin-top: 100px" ng-app="myApp" ng-controller="myCtrl"> 
 

 
<div class="col-lg-12" data-ng-repeat="user in allUsers track by $index"> 
 
    <div class="col-lg-12"> 
 
     <div class="col-lg-3"> {{user.name}} </div> 
 
     <div class="col-lg-3">     
 
      <input type="checkbox" ng-change="selectUser(user)" data-ng-model="user.isSelected" />    
 

 
     </div> 
 
    </div> 
 
</div> 
 

 
selected users 
 
<div class="col-lg-12" data-ng-repeat="user in selectedUsers track by $index"> 
 
    <div class="col-lg-12"> 
 
     <div class="col-lg-3"> {{user.name}} </div> 
 

 
     <div class="col-lg-3"> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 

 
</body> 
 
</html>

0

이 시도 나는 u는이

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> 
    <script type="text/javascript"> 
     var app = angular.module('MyApp', []) 
     app.controller('MyController', function ($scope, $window) { 
      $scope.Fruits = [{ 
       FruitId: 1, 
       Name: 'Apple', 
       Selected: false 
      }, { 
       FruitId: 2, 
       Name: 'Mango', 
       Selected: false 
      }, { 
       FruitId: 3, 
       Name: 'Orange', 
       Selected: false 
      }]; 

      $scope.GetValue = function() { 
       var message = ""; 
       for (var i = 0; i < $scope.Fruits.length; i++) { 
        if ($scope.Fruits[i].Selected) { 
         var fruitId = $scope.Fruits[i].FruitId; 
         var fruitName = $scope.Fruits[i].Name; 
         message += "Value: " + fruitId + " Text: " + fruitName + "\n"; 
        } 
       } 

       $window.alert(message); 
      } 
     }); 
    </script> 
    <div ng-app="MyApp" ng-controller="MyController"> 
     <div ng-repeat="fruit in Fruits"> 
      <label for="chkCustomer_{{fruit.FruitId}}"> 
       <input id="chkCustomer_{{fruit.FruitId}}" type="checkbox" ng-model="fruit.Selected" /> 
       {{fruit.Name}} 
      </label> 
     </div> 
     <br /> 
     <br /> 
     <input type="button" value="Get" ng-click="GetValue()" /> 
    </div> 
</body> 
</html>