2016-09-23 4 views
0

일부 텍스트 상자, 라디오 단추 및 확인란이 포함 된 페이지를 만들었습니다. 이 페이지를 사용하여 새 데이터를 저장하거나 기존 데이터를 편집합니다. 새 데이터를 저장할 수 있지만 데이터를 편집 할 때 페이지는 변수에서 가져 오는 미리 정의 된 값을 표시해야합니다. 해당 변수에서 텍스트 상자 및 라디오 단추 값을 가져오고 설정할 수 있습니다. 그러나 나는 체크 박스를 체크 할 수 없다. 체크 상자가 많아 페이지에 표시 할 값에 ng-repeat를 사용하고 있습니다. 선택한 확인란의 값을 배열로 설정하고이 값을 내 서비스 계층에 전달합니다.AngularJS의 배열 값에서 확인란 선택

HTML :

<div id="activityCheckboxList" class="checkboxList"> 
    <div ng-repeat="activity in activities"> 
     <label> 
       <input type="checkbox" ng-true-value="activity" ng-checked="selection.indexOf(activity) > -1" ng-click="toggleSelection(activity)"/> 
       <span>{{activity.activityName}}</span> 
      </label> 
    </div> 
</div> 

app.js :

다음은 내 코드 조각입니다 클릭하면 제출하면서, 나는 $ scope.selection를 전달하고,이 후

$scope.selection=[]; 
$scope.getActivities(); //this sets values in $scope.activities which is a  list coming from service layer 

    //Get Selected Activities from Check Boxes 
    $scope.toggleSelection = function toggleSelection(activity){ 
     var idx = $scope.selection.indexOf(activity); 

     if(idx > -1){ 
      $scope.selection.splice(idx, 1); 
     } 
     else{ 
      $scope.selection.push(activity); 
     } 
    }; 

하는 내 활동 객체가 포함됩니다.

데이터를 편집 할 때 데이터를 []에 넣을 수 있습니다. 그러나 체크 박스를 사용하여 체크 박스를 체크하는 방법은 체크 표시를 해제하거나 체크 표시를 다시해야합니다. foreach 루프를 사용해 보았지만 도움이되지 않았습니다. "활동"으로 사전

답변

0

에서

덕분에 같이 IndexOf 인덱스를 찾을 수있는 올바른 방법 아닌, 객체입니다. 난 당신의 코드

HTML로

   <input type="checkbox" ng-true-value="activity" 
     ng-checked="checkInSelectionList(activity)" ng-click="toggleSelection(activity)"/> 
       <span>{{activity.activityName}}</span> 

JS

$scope.checkInSelectionList = function (item) { 
for(var i=0; i<$scope.selection.length;i++){ 
    if($scope.selection[i]['ID'] == item['ID']){ 
    return true; 
    } 
} 
} 

또한 객체의 인덱스를 찾기 위해 underscore을 사용할 수를 몇 가지 변경을 만들었습니다.

https://jsfiddle.net/nors536b/

+0

감사합니다. 많은 시간을 절약하는 데 정말로 도움이되었습니다. :) – blu3