Question

如果只有部分的子项下拉列表包含第一个下拉列表中的字符串，是否可以使用级联下拉列表？

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'},
    ];
});

谢谢！

Answer 1

你的控制器有一个不同的范围，所以我不认为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">

并将两个选择放入同一控制器中，使它们处于相同的范围内。

这是完整的控制器。只需在两个选项周围的div中有一个SINGLE控制器，而不是为每个选择器提供不同的控制器。

 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; }
      };
    }]);

Answer 2

好的，我懂了！两件事情：首先，这两个清单必须与斯科特所说的范围相同 - 谢谢！其次，我的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>

AngularJS级联下拉列表与部分过滤器值。

2 个答案: