Question

这是我的数据

This.dynamicCmb = [{
                id: 1,
                label: 'aLabel',
                subItem: ['aSubItem1','aSubItem2','aSubItem3']
            }, {
                id: 2,
                label: 'bLabel',
                subItem: [ 'bSubItem' ]
            }];

我想根据我给出的值显示'subItem'数据，即id或label。如果我搜索任何一个它应该显示值。

<input type="text" ng-model="vm.selectedColumn" /> //Textbox to take either id or name value
    <input type="button" value="Get" ng-click="GetCmbValue()" /> //On click of button it should load dropdown
    <select ng-options="item.name for item in vm.selectedColumn.subItem" ng-model="vm.selected"></select>

.js文件

 This.GetCmbValue = function () {
// I should load drop down value here
            };

例如：如果我在文本框中输入'1'，则应显示'1'的subItem。如果我在文本框中给出'alabel'，那么'alabel'的subItem也应该显示。它应该在id或标签上搜索我提供的任何内容。请帮我这样做

Answer 1

您可以将过滤器附加到ngOption。因此，每次在文本框中键入值时，它都会相应地过滤数据。我们将文本框的输出绑定到过滤器。

.js文件

    app.filter('itemFilter', function() {

    return function(input,val) {
        var out = new Array();
        angular.forEach(input, function(item) {
            if (item.id == val || item.label == val) {
                out = out.concat(item.subItem);
            }
        });
        return out;
    };
});

HTML文件

<input type="text" data-ng-model="val">
<select data-ng-options="item for item in dynamicCmb | itemFilter : val" data-ng-model="selected"></select>

Answer 2

通过此

更改您的选择代码

     <select ng-options="item.name for item in vm.selectedColumn.subItem|filter:{Id:vm.selectedColumn}"   ng-model="vm.selected"></select>

根据条件显示ng-options

2 个答案: