从过滤器中选择的角度变化默认值

时间:2015-06-30 17:36:58

标签: javascript angularjs

我有一个选择框,其中填充了我的控制器中的一些数据。当输入值改变时,应该过滤选择框的内容,并且应该根据数据对象的默认属性分配默认值。

有没有办法可以使用角度指令完成,还是需要将其作为自定义过滤器函数来完成

angular.forEach(vm.data,function(item){
if (vm.q == item.someId && item.isDefault) {
vm.result = item.value;
}
});

我的HTML看起来像

<div ng-app="myApp" ng-controller="ctrl as vm">
  <input type="text" ng-model="vm.q">
  <select ng-options="item.value as item.description for item in vm.data | filter:{someId:vm.q}" ng-model="vm.result"></select>
</div>

我的控制器看起来像:

(function(){
    angular.module('myApp',[]);
    angular
        .module('myApp')
        .controller('ctrl',ctrl);

    function ctrl()
    {
        var vm = this;

        vm.data = [
            {
                someId: '1',
                description: 'test1',
                value: 100,
                isDefault: true
            },
            {
                someId: '2',
                description: 'test2',
                value: 200,
                isDefault: false
            },
            {
                someId: '3',
                description: 'test3',
                value: 100,
                isDefault: true
            },        
        ];
    }
})();

请在此处查看我的plunkr演示:http://plnkr.co/edit/RDhQWQcHFMQJvwOyHI4r?p=preview

所需行为: 1)在文本框中输入1 2)列表应过滤为2项 3)选择框应根据属性isDefault设置为true

预先选择项目1

提前致谢

1 个答案:

答案 0 :(得分:0)

我建议你在项目中加入一些第三方库,比如lodash,以便更轻松地使用数组/集合。

之后,您可以为ng-change添加input指令。

<input type="text" ng-model="vm.q" ng-change="vm.onChange(vm.q)">

控制器中的实际onChange函数

vm.onChange = function(id) {
  var item = _.findWhere(vm.data, { someId: id, isDefault: true });
  vm.result = item ? item.value : null;
};

你有它。