У меня есть поле выбора, которое заполняется некоторыми данными моего контроллера. Когда изменяется входное значение, содержимое поля выбора должно быть отфильтровано, а значение по умолчанию должно быть назначено на основе свойства по умолчанию объекта данных.
Можно ли это сделать с помощью угловых директив, или это нужно сделать в качестве функции пользовательского фильтра, выполняющей что-то в соответствии с
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) Поле выбора должно предварительно выбрать элемент 1 на основе свойства isDefault, установленного в true
заранее спасибо
Я бы посоветовал вам включить в ваш проект некоторую стороннюю библиотеку, такую как 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;
};
И вот он у вас есть.