AngularJS 체크 박스 필터 지시문

사용자가 필터링 할 목록에서 값을 선택할 수 있도록하는 AngularJS 지시문이 있습니다. 여기에 표시되는 아주 간단한 개념 : 나는 그들 모두가 의도하지 않은 선택 체크 박스 중 하나를 클릭하면AngularJS 체크 박스 필터 지시문

enter image description here

문제입니다. 내 지시어는 매우 간단하므로 왜 이런 일이 발생하는지 잘 모르겠습니다.

$scope.tempFilter = { 
    id: ObjectId(), 
    fieldId: $scope.available[0].id, 
    filterType: 'contains' 
}; 

$scope.toggleCheck = function (id) { 

    var values = $scope.tempFilter.value; 
    if (!values || !values.length) { 
     values = $scope.tempFilter.value = []; 
    } 

    var idx = values.indexOf(id); 
    if (idx === -1) { 
     values.push(id); 
    } else { 
     values.splice(idx, 1); 
    } 
}; 

$scope.valuesListValues = function (id) { 
    return $scope.available.find(function (f) { 
     return f.id === id; 
    }).values; 
};

데이터 유사한 : 다음

$scope.available = [{ 
    id: 23, 
    name: 'Store' 
    values: [ 
       { id: 124, name: "Kansas" }, 
       { id: 122, name: "Florida" }, ... ] 
}, ... ]

뷰 로직은 :

<ul class="list-box"> 
    <li ng-repeat="val in valuesListValues(tempFilter.fieldId)"> 
     <div class="checkbox"> 
      <label ng-click="toggleCheck(val.id)"> 
       <input ng-checked="tempFilter.value.indexOf(val.id) === -1" 
         type="checkbox"> {{val.name}} 
      </label> 
     </div> 
    </li> 
</ul>

먼저 오프 그것을 toggleCheck 화재 다음 선택 체크 박스 주위 코드는 두 번이지만 올바른 데이터를 채 웁니다 (두 번째로 내 코드에서 제거됩니다). enter image description here

두 번째 발사 후 모든 상자를 확인합니다 ... 아이디어가 있습니까?

출처

2014-02-27 amcdnl

나는 ID를 기반으로 값을 잡기 위해 사용되는 반복, 문제 영역이었다.

<li ng-repeat="val in valuesListValues(tempFilter.fieldId)">

단순한 청취 및 정적 변수 설정을 제거하면 문제가 해결됩니다.

$scope.$watch('tempFilter.fieldId', function() { 
    var fId = $scope.tempFilter.fieldId; 
    if ($scope.isFieldType(fId, 'valuesList')) { 
      $scope.valuesListValues = $scope.valuesListValues(fId); 
       } 
     }, true); 
});

다음보기에서

ng-repeat="value in valuesListValues"

출처

2014-02-27 15:33:20 amcdnl

체크리스트에 대한 지원 기능이 내장 된 좋은 지시어입니다 : http://vitalets.github.io/checklist-model/ – amcdnl

아마도 로컬 변수가 뷰에 사용 된 scope 속성의 속성에 재 할당되지 않는다는 것입니다. 그런 다음 값이 존재하지 않고 발견되지 않으므로 상자가 선택됩니다.

$scope.tempFilter.value = values

출처

2014-02-27 01:04:51 Preom

저는 인터페이스 개념을 사용하여 간단한 솔루션을 만들었습니다. available[0].values의 각 항목에있는 checked 속성을 확인란 모델로 사용합니다. 목록 상단에는 선택한 항목을 지우는 버튼이 있습니다.

자바 스크립트 :

function DataMock($scope) { 
    $scope.available = [{ 
     id: 23, 
     name: 'Store', 
     values: [{ 
      id: 124, 
      name: "Kansas" 
     }, { 
      id: 122, 
      name: "Florida" 
     }] 
    }]; 
    $scope.clearSelection = function() { 
     var values = $scope.available[0].values; 
     for (var i = 0; i < values.length; i++) { 
      values[i].checked = false; 
     } 
    }; 
}

HTML :

<body ng-controller="DataMock"> 
    <ul class="list-box"> 
     <li> 
      <button ng-click="clearSelection()">Clear Selection</button> 
     </li> 
     <li ng-repeat="val in available[0].values"> 
      <div class="checkbox"> 
       <label> 
        <input ng-model="val.checked" 
          type="checkbox" /> {{val.name}} 
       </label> 
      </div> 
     </li> 
    </ul> 
</body>

Demo on Plunker

출처

2014-02-27 01:34:39

그러나, 내 데이터 구조가 그것을 허용하지 않습니다, 노력을 감사합니다는 다음과 같이 구성 할 수, 그것은 비록 아주 좋은 깨끗한 솔루션입니다. 감사! – amcdnl

AngularJS 체크 박스 필터 지시문

답변

관련 문제