Отслеживание ngOptions в AngularJS не устанавливает весь объект в ngModel

Вот мой объект json:

 $scope.todos = [{
    name: 'angular',
    field: ['a', 'b', 'c', 'd'],
    id: 1
  }, {
    name: 'asd',
    field: ['a', 'b', 'c', 'd', 'e'],
    id: 2
  }];

Я даю выбрать как:

<select ng-model="dashboard.type" ng-options="item as item.name for item in todos track by item.name"></select>

Теперь, когда выбран вариант, мне нужен другой выбор, который повторяется после ngModel предыдущего выбора. Следующий выглядит так:

<select ng-model="dashboard.label" ng-options="item as item for item in dashboard.type.field"></select>

Он отлично работает, когда я выбираю параметр вручную, но когда в моем скрипте есть значение в dashboard.type (например: $scope.dashboard.type.name = 'qwe'), он использует track by, чтобы выбрать параметр и сохранить его в dashboard.type, вместо сохранения всего объекта он просто сохраняет значение, используемое в опции track by.

Значение для dashboard.type:

  1. когда я выбираю вариант вручную: {"name":"qwe","field":["a","b","c","d","f"],"id":3}
  2. Когда используется отслеживание: {"name":"qwe"}

ПРИМЕЧАНИЕ. Я не могу использовать track by item . Это должно быть свойство объекта item. Это может быть либо name, либо id.

Вот plnkr.

Изменить:

Как отмечали многие, я хотел бы уточнить, что я не могу инициализировать объект любым значением списка todos. Это связано с тем, что значение dashboard.type.name каждый раз будет разным, а список todos варьируется от 10 до 100 объектов. Теперь мне нужно перебрать список todos, проверить todos[index].name==someName и назначить соответствующий объект. Я активно пытаюсь избежать этой проблемы (потому что должен быть лучший способ).

ПРИМЕЧАНИЕ. Я также пытался использовать ng-change и назначить фактический объект dashboard.type.name, но это работает только тогда, когда опция выбрана вручную, что уже работает нормально. Он не назначает объект, когда используется track by.

ВАЖНО: $scope.dashboard.type.name = 'qwe' — это всего лишь пример. Значение $scope.dashboard.type.name может меняться каждый раз при загрузке страницы.

PS: Также я должен был упомянуть об этом раньше. Извините, мой плохой!


angularjs angular-ngmodel ng-options angularjs-track-by
person Vasu Sheoran    schedule 17.06.2016    source источник
comment
просто измените свою инициализацию следующим образом: $scope.dashboard={}; $scope.dashboard.type ={} $scope.dashboard.type ={ имя: 'qwe', поле: ['a', 'b', 'c', 'd', 'f'], id: 3 } ;   -  person Vicky Kumar    schedule 17.06.2016
comment
если бы я мог сделать последнюю часть, не перебирая список todos, тогда да, это сработало бы. PS: я обновил вопрос, пожалуйста, проверьте еще раз.   -  person Vasu Sheoran    schedule 17.06.2016
comment
в этом случае вызовите функцию на ng-init и инициализируйте там на основе значения, которое вы хотите   -  person Vicky Kumar    schedule 17.06.2016
comment
пробовал, не работает, можешь на скрипке показать??   -  person Vasu Sheoran    schedule 19.06.2016

Ответы (3)


arrow_upward
1
arrow_downward

Эта проблема не из-за отслеживания. Если установить значение по умолчанию, выполнив $scope.dashboard.type.name = 'qwe', ng-model будет выглядеть как $scope.dashboard.type = {name : 'qwe'}. Вместо того, чтобы выбирать значение по умолчанию таким образом, вы должны использовать $scope.dashboard.type = $scope.todos[2];. Это позволит убедиться, что весь объект установлен на $scope.dashboard.type.

Отредактированный планкер

person John    schedule 17.06.2016

arrow_upward
0
arrow_downward

Чтобы инициализировать модальное значение по умолчанию, вы можете использовать ng-init. Например

 <select ng-init="dashboard.type = todos[2]" ng-model="dashboard.type" ng-options="item as item.name for item in todos track by item.name">
  </select>
person Manish Gautam    schedule 17.06.2016

arrow_upward
0
arrow_downward

вызовите эту функцию на ng-init в html

ng-init ="initialize();"

in js

$scope.dashboard={};//initialize object
$scope.dashboard.type ={}//initialize object

$scope.initialize =function(){


//no need to iterate if it is certain that your Id and index is always same suppose your initial id is 3

//then
var currId =3;//suppose initial id is there
$scope.dashboard.type =$scope.todos[currId]

}

вот codepen для него http://codepen.io/vkvicky-vasudev/pen/MeexmK

person Vicky Kumar    schedule 17.06.2016
comment
я только что дал случайное условие, если вы можете использовать свое собственное условие - person Vicky Kumar; 17.06.2016
comment
спасибо, но здесь вы используете .forEach() для перебора списка и устанавливаете допустимый объект в $scope.dashboard.type, как я уже говорил, это решение работает, но мой вопрос заключается в следующем: есть ли лучший способ сделать это, кроме перебора списка? - person Vasu Sheoran; 19.06.2016
comment
это можно сделать, если вы знаете идентификатор, который должен быть выбран изначально, и если вы уверены, что ваш идентификатор всегда соответствует индексу массива, найдите измененную ручку кода - person Vicky Kumar; 20.06.2016