AngularJs에서 필터 및 일치 확인란을 동적으로 생성합니다.

Question

여러 데이터 유형이 있으며 여러 유형이 있습니다.

JSON 파일 : 나는 DOM에서 체크 박스 이러한 결과를 필터링 할

{ 
    "items":[ 
    { 
     "id:": 1, 
     "type": "type1", //typeN isn't tied to id=N 
     ... : ... 
    }, 
    { 
     "id:": 2, 
     "type": "anotherType", 
     ... : ... 
    }, 
    {...},{...},{...},... 
    ] 
} 

. 먼저 DOM에 DOM을 넣기를 원합니다. 그래서 데이터에서 고유 한 유형을 찾아야합니다. 나는 컨트롤러에이 기능을 통해이 작업을 수행 :

var itemTypeList = function(){ 
    if ($scope.hasOwnProperty('allItems')){ //this is to ensure async load completed 
    var uniqTypes = []; 
    for (var i=0 ; i < $scope.allItems.length ; i++){ 
     if (uniqTypes.indexOf($scope.allItems[i].type) < 0){ 
     uniqTypes.push($scope.allItems[i].type); 
     } 
    } 
    $scope.uniqTypes = uniqTypes; 
    return $scope.uniqTypes; 
    } 
}; 

을하고 그래서 같이 HTML에 배치 :

$scope.showItem = function(item){ 
    return item.type === $scope.Filter.item1 || 
    item.type === $scope.Filter.type2; 
    //this is static, and I only typed 2 of the many.... 
}; 

:

<!-- These are what will be shown/hidden --> 
<div class=""> 
    <div class="col-md-4" ng-repeat="item in allItems | filter:showItem"> 
    {{item.name}} 
    </div> 
</div> 

<!-- this is the filter section --> 
<div class="col-md-12" ng-repeat="uT in uniqTypes"> 
    <label>{{uT}}</label> 
    <!-- here is where the accompanying checkbox should go --> 
</div> 

지금까지 내 컨트롤러 필터는 다음과 같습니다

입력 체크 박스는 다음과 같습니다.

<input type="checkbox" ng-model="Filter.uT" ng-true-value="{{uT}}"/><br/> 

문제는 필터가 정적이며 유형을 수동으로 입력해야한다는 것입니다. 두 번째 문제는 체크 상자 ng-model을 ng-model="Filter.{{uT}}"처럼 정의 할 수 없다는 것입니다. 정적으로 정의 된 모델의 예제 만 찾을 수 있습니다. 이미 찾은 uniqueTypes (uT)를 사용하기 위해 필터와 입력 ng-repeat을 어떻게 변경합니까?

Answer 1

전체 그림을 볼 수는 없지만, 이런 식으로 뭔가 할 것 같다 : 체크 박스의

<div class="col-md-12" ng-repeat="uT in uniqTypes"> 
    <label>{{uT}}</label> 
    <input type="checkbox" ng-model="Filter[uT]"/> 
</div> 

값이 true 또는 false가 될 것 -> $ scope.Filter.type2 사실이 될 것입니다/

$scope.Filter = {}; 

$scope.showItem = function(item){ 
    return $scope.Filter[item.type]; 
}; 

가 반환됩니다

거짓 참 또는 거짓 기본 버전의

fiddle

처음에 표시하고 싶으면 클릭하고 숨기기를 해제하려면 $scope.Filter을 먼저 키 [val] 쌍으로 채워야합니다. 동적으로 uniqueTypes 목록을 만들 때이 작업을 수행 할 수 있습니다. 여기

그것은 도시의 fiddle을하며 초기