AngularJS 부분 필터 값이있는 계단식 드롭 다운.

자식 드롭 다운 전용 부분적으로에 첫 번째 드롭 다운의 문자열이 포함되어있는 경우 계단식 드롭 다운을 사용할 수 있습니까?AngularJS 부분 필터 값이있는 계단식 드롭 다운.

EX: DROPDOWN1: TOOL1  DROPDOWN2: TAGFORTOOL1 
       TOOL2    TAGFORTOOL2 
       TOOL3    TAGFORTOOL3

TOOL1을 선택하면 TAGFORTOOL1 만보고 싶습니다. (두 번째 드롭 다운 그냥 필터링하지 않습니다 작동하지 않는)

코드 :

<div ng-controller="ToolListController"> 
    <select ng-model="toolSelectionModel" ng-options="tool.id for tool in tools"> 
    </select> 
</div> 

<div ng-controller="TagListController"> 
    <select ng-model="tagSelectionModel" ng-options="tag.tagname for tag in tags 
     | filter:{tagname:toolSelectionModel.tool.id}"> 
    </select> 
</div>

컨트롤러 :

reportingControllers.controller('TagListController', ['$scope', 'TagsResource',  function($scope, TagsResource) { 
    $scope.tags = TagsResource.query(); // returns TAGFORTOOL1, TAGFORTOOL2, TAGFORTOOL3 
}]); 

reportingControllers.controller('ToolListController', function($scope) { 
    $scope.tools = [ 
     {'id': 'TOOL1'}, 
     {'id': 'TOOL2'}, 
     {'id': 'TOOL3'}, 
    ]; 
});

감사합니다!

출처

2014-09-25 dhalia

컨트롤러에는 한 가지 범위가 다르므로 toolSelectionModel을 필터에서도 사용할 수 없다고 생각합니다. 그것은 내가 같은 범위에서 그들을 넣으려고했지만 아직 작동하지 않는다고 말했다. 이런 식으로 내 자신의 필터를 사용하여 작동시킬 수있었습니다.

 $scope.filtertags = function(a,b) { 
      if(a.tagname.indexOf($scope.toolSelectionModel.id) > 0) { 
      return true; } 
      else { return false; } 
    };

이

 <select ng-model="tagSelectionModel" ng-options="tag.tagname for tag in tags 
      | filter:filtertags">

그들이 동일한 범위에 있도록 동일한 컨트롤러로 모두 선택 바르지 적용.

다음은 완벽한 컨트롤러입니다. 각 컨트롤러마다 다른 컨트롤러를 제공하는 대신 하나의 컨트롤러 만 사용하여 두 개의 선택 항목을 처리 할 수 있습니다.

app.controller('TagListController', ['$scope',  
    function($scope) { 

     $scope.toolSelectionModel; 
    $scope.tags = [ 
     {'tagname': 'TAGFORTOOL1'}, 
     {'tagname': 'TAGFORTOOL2'}, 
     {'tagname': 'TAGFORTOOL3'}, 
    ]; 

    $scope.tools = [ 
     {'id': 'TOOL1'}, 
     {'id': 'TOOL2'}, 
     {'id': 'TOOL3'}, 
    ]; 

    $scope.filtertags = function(a,b) { 
     if(a.tagname.indexOf($scope.toolSelectionModel.id) > 0) { 
     return true; } 
     else { return false; } 
     }; 
    }]);

출처

2014-09-25 19:18:21 Scott

감사합니다 스콧, 분명히 나는이 새로운 :). 나는 길을 시도하고이 오류가 발생합니다 : "TypeError : 첫 번째 if 문 줄에"정의되지 않은 ID '속성을 읽을 수 없습니다. 그래서이 시점에서 toolSelectionModel에 대해 알지 못합니까? – dhalia

이렇게하려면 하나의 컨트롤러 만 있으면됩니다. 여기 내가 어떻게 그랬어. – Scott

좋아, 알았어! 두 가지 : 첫째, 두 목록 모두 Scott과 같은 범위에 있어야했습니다. - 감사합니다! 두 번째로, TagListController는 toolSelectionModel에 대해 알지 못했습니다 (선택한 값을 인쇄 할 때 이것을 깨달았습니다).

올바른 코드는 모든 것을 하나의 컨트롤러 아래에 가져 오는 것입니다. 당신이 초보자 실수를 지나면 꽤 간단하고 매끈한 :)

<div ng-controller="TagListController"> 
    <select ng-model="toolSelectionModel" ng-options="tool.id for tool in tools"> 
    </select> 

    <select ng-model="tagSelectionModel" ng-options="tag.tagname for tag in tags 
    | filter:toolSelectionModel.id"> 
    </select> 
</div>

출처

2014-09-26 00:09:47 dhalia

AngularJS 부분 필터 값이있는 계단식 드롭 다운.

답변

관련 문제