angularjs过滤选择后的剩余下拉选项

时间:2013-10-15 14:09:28

标签: javascript angularjs

如果我正在创建一个允许多个字段搜索并希望通过下拉(类似于Redmine)执行此操作的系统,我该如何实现?具体部分是,一旦我选择了字段“foo”,我点击了一个“添加另一个字段”的按钮,我将无法再次选择“foo”?

initial fields: {"foo","bar","baz"}  
select fields.foo  
add another field
remaining fields = {"bar","baz"}

如果需要澄清,请告诉我。

我找到了一个下拉示例here

澄清

设“foo”为整数 让“bar”成为约会 让“baz”成为一个字符串

如果用户添加字段“bar”,我会提供日历选择器窗口小部件。 如果用户选择“foo”,我确保该数字是一个有效的整数 如果用户选择“baz”,我会检查以确保它是有效的字符串。

因此,每个选择都会根据字段选择显示某些行为,因此用户必须通过“添加其他字段”按钮单独选择每个字段。

1 个答案:

答案 0 :(得分:3)

我做过很多次这件事。这是我自己代码中的一个片段。该代码用于允许商业承包商为其公司选择“附属机构”。

在我的HTML视图中:

<select class="input-full" ng-model="currAff" ng-options="aff for aff in availableAffs | filter:notAlreadyAdded"></select>

请注意上面的filter:notAlreadyAdded部分。

在我的控制器中:

$scope.notAlreadyAdded = function(aff){
    // search through all the affiliations that were previously added
    // if the given "aff" is in the previously-added list, return false
    // else, return true
};

对select的ng-options使用filter:notAlreadyAdded过滤器将遍历选项数组中的每个项目,并将该项目传递给给定的函数。然后,您可以使用该项目进行任何您想要的测试,然后您只需返回一个布尔值,告诉angular它是否应该在将来的可能选项列表中包含该项目。

我希望能回答你的问题。