Блог

РЕДАКТИРОВАТЬ: мой код действительно работает, я просто был идиотом с несвязанной проблемой. Спасибо всем за ваш вклад.

Итак, у меня есть массив объектов JSON, отформатированных следующим образом:

 [{"id":"id1", "text":"text1"}, {"id":"id2", "text":"text2"},....]
  

Я хочу заполнить поле выбора AngularJS, используя их, с текстовыми полями в качестве отображаемого текста и полями идентификаторов в качестве значений или того, что привязано к модели. Я огляделся, но ни за что на свете не могу понять, что мне нужно делать.

Прямо сейчас у меня есть это для моего выбора, что приводит к отсутствию отображения:

 <select name="field" ng-model="npe.formData.field" ng-options="field.id as field.text for field in fields">
  

Выполнение ng-options таким образом приводит к отображению объектов, но, очевидно, приведет к неправильной привязке значения к модели:

 ng-options="field as field.text for field in fields"
  

Я видел, как люди говорили об использовании «(ключ, значение)», но я не могу понять, как это работает.

Вам понадобится (ключ, значение) в случае, если вы повторяете через карту, что не так — в вашем примере вы повторяете массив объектов. Использование (ключ, значение) будет:

 $scope.map={item1:'a',item2:'b'};
...
<li ng-repeat="(id,text) in map">{{id}}) {{text}}</li>
  

который будет отображать «item1) a» и так далее.

Почему вы упомянули, что приведенный ниже фрагмент не работает?

 ng-options="field.id as field.text for field in fields"
  

Проверьте эту скрипку — http://jsfiddle.net/7eqsc/2 /, это работает как шарм и обновляет модель с правильным идентификатором.

 <div ng-app="myApp">
<div ng-controller="myCtrl">

    <div ng-repeat="(id,text) in notes">{{text}}</div>
    <select ng-model="model.id" ng-options="note.id as note.text for note in notes" ></select>

    Selected id:{{model.id}}

</div>
  

Вот пример скрипки, которая работает с базовым контроллером, присваивающим некоторые значения. Хотя у вас нет полного примера кода, я ожидаю, что вы столкнетесь с ng-model проблемой, с которой вы столкнулись.

 function TodoCtrl($scope) {
    $scope.fields = [{"id":"id1", "text":"text1"}, {"id":"id2", "text":"text2"}];
    $scope.choice = null;
}
  

И HTML

 <div ng-app>
  <div ng-controller="TodoCtrl">
      <h2>Chosen = {{ choice }}</h2>
      <select ng-options="field.id as field.text for field in fields" ng-model="choice"></select>
  </div>
</div>
  

Что вам, вероятно, следует извлечь из этого, так это то, что ng-options требуется ng-model для работы, иначе он просто ничего не сделает.