В AngularJS выберите: Удалить пустой вариант и использовать данные объекты, а не массивы

Я долго искал объяснение, как удалить пустой параметр AngularJS, который всегда отображается в selects. Я нашел много информации, делающей это, когда параметры получены из массива JSON, помещенного непосредственно в код, но я не могу найти ничего об удалении этого пустого параметра при работе с объектами данных.



Скажем, у меня есть объект " foo "в моей базе данных и" foo "имеет как" имя", так и"bar_id".



Может кто-нибудь подкинуть мне подсказку, как это сделать? с объектами данных?



Ссылки:
Angular JS удалить пустую опцию из Select Option



Http://jsfiddle.net/MTfRD/3/ (Это чужая скрипка из так называемого вопроса, связанного выше; код не мой, а взят из этой скрипки.)



JS: 



function MyCtrl($scope) {

    $scope.typeOptions = [



        { name: 'Feature', value: 'feature' }, 

        { name: 'Bug', value: 'bug' }, 

        { name: 'Enhancement', value: 'enhancement' }

    ];



    $scope.form = {type : $scope.typeOptions[0].value};

}


Я хочу получить foo.name и фу.bar_id. Я хочу ... foo.name быть меткой опциона и фу.bar_id - это значение (например, <option value="foo.bar_id">foo.name</option>. Для каждого фу, фу.bar_id тогда станет идентифицирующим параметром в запись подтянуть и отобразить "на изменение" (сразу после выбора опции).



Я перепробовал все, что мог придумать, чтобы установить это, и ничего, кажется, не работает. Хуже всего то, что он либо молча терпит неудачу, не оставляя мне никаких указаний на то, что я делаю неправильно, либо жалуется, что фу не является объектом, что расстраивает меня до бесконечности. (Уверяю вас, " foo " загружается AJAX-запросом в фактическом коде, над которым я работаю, и прекрасно работает как объект везде - NDA запрещает мне хотя, к сожалению, делимся фактическим кодом.)



Используя приведенный выше пример из другого потока, я понимаю, что я бы назначил что-то вроде ng-model="typeOptions" в теге select внутри шаблона, но как бы я получил "typeOptions" для доступа к foo и сделать foo.name надпись опции и фу.bar_id значение параметра? Кроме того, угловые значения по умолчанию для опций (те, которые выглядят как сгенерированный индекс) меня устраивают, но мне все равно нужно обратиться к foo.bar_id, чтобы выполнить задачу, поэтому она должна быть "там где-то".



Любая помощь была бы признательна; в настоящее время я застрял с hackish ng-repeat в самом варианте, который, как я понимаю, не является лучшей практикой.. Кроме того, я все еще довольно новичок в Angular, и все еще нахожу его несколько запутанным, поэтому чем проще и проще ваши ответы, тем лучше я смогу их успешно использовать. Спасибо!

521   4  

4 ответов:

обновить

Хорошо, я только сейчас понял, в чем был ваш настоящий вопрос (по крайней мере, я надеюсь на это ;)). И, к счастью, это очень легко:

Ctrl : 

$scope.options = {
  a: 1,
  b: 2,
  c: 3      
};

$scope.selected = 1;

Вид : 

<select
  data-ng-model="selected"
  data-ng-options="v as k for (k, v) in options"
></select>

Демо-версия: http://jsbin.com/hufehidotuca/1/

Для получения дополнительной информации смотрите руководство . Особенно под:

ngOptions (необязательно) " для объектных данных источники:

предыдущий ответ:

Как я писал в комментариях, с ngOptions:

  1. Вы не можете заставить angular использовать данные модели в качестве фактического значения параметра в представлении. Угловой справляется с этим по-своему. Это только гарантирует, что ваша scope-модель будет установлена на правильное значение при изменении. Если это не то, что вы хотите, то вам придется написать свою собственную директиву, вероятно, используя ngRepeat.

  2. Тебе всегда будут нужны двое. отдельные модели. Один, который действует как список опций (это, вероятно, всегда должен быть массив объектов) и один для хранения выбранного значения (это будет отличаться в зависимости от того, как вы настроили директиву ngOptions).

  3. Подсказка: пресловутыепустые опции всегда являются результатом, когда angular не может соответствовать назначенному ngModel списку опций и Нет реального пустого варианта. (Примечание: Если ngModel просто undefined в текущей области или это значение не может быть сопоставлено со списком опций, тогда оно будет установлено или его значение будет переопределено, с первым выбором любого параметра. Вот почему пустой вариант впоследствии исчезает.)

Ctrl : 

// the "list of options"
$scope.options = [
  { name: 'A', id: 1 },
  { name: 'B', id: 2 },
  { name: 'C', id: 3 },
  { name: 'D', id: 4 }
];

// a pre-selection by value
$scope.asValue  = 2;

// a pre-selection by object-identity
$scope.asObject = $scope.options[3];

Вид : 

<!-- select as value -->
<select
  data-ng-model="asValue"
  data-ng-options="foo.id as foo.name for foo in options"
></select>

<!-- select as object -->
<select
  data-ng-model="asObject"
  data-ng-options="foo as foo.name for foo in options"
></select>

<!-- the notorious blank option -->
<select
  data-ng-model="asBogus"
  data-ng-options="foo as foo.name for foo in options"
></select>

<!-- blank option correctly set up -->
<select
  data-ng-model="asBogus"
  data-ng-options="foo as foo.name for foo in options"
>
  <option value="">Please select</option>
</select>

Демо :

Http://jsbin.com/yasodacomadu/1/

10  
2014-08-27 00:08:27

Просто публикация в качестве продолжения всей проблемы объекта данных ...

Чтобы сделать эту работу, я должен был получить ng-параметры, правильно обозначенные в первую очередь. Я уже упоминал в другом месте, что одна из моих повторяющихся личных проблем, изучающих AngularJS, - это "переосмысление" вещей и излишняя путаница, и это не было исключением. Посовещавшись с коллегой, который пишет сценарий контроллера для этого приложения, используя мой "foo.бар " псевдо-обозначения, вот как мне нужно было настроить HTML шаблон: 

<select ng-model="selected_item" ng-options="bar.item_name for bar in foo.bars">

Я хотел, чтобы этот select был установлен на " бар "текущего дисплея (в отличие от первого индексированного "бара" в полном списке "баров" этого "foo"), поэтому мне пришлось найти место в контроллере приложения, куда передается этот объект данных, и добавить для модели (которую я буду называть $selected_item): 

$scope.selected_item = _.find($scope.foo.bars, function(bar) {
    return bar.item_id == $scope.current_result.foo_item_id;
});

Это довольно сложная структура данных с большим количеством хранимых процедур и связанных таблиц, так что я не могу ее перевести. легко в рабочий пример псевдо-объекта / свойств. Йоши, ты был очень полезен; пробелы в общении здесь все были моими злодеями. Спасибо, что не бросил меня.

Для других запутанных AngularJS n00bs, которые могли бы наткнуться на эту нить: место, где я "переосмысливал" его и запутывал себя, было ошибочно полагая что мне нужен какой-то код вместо массивов JSON, которые я изучал, чтобы передать объект data. Это неверно - "ничто" не должно идти туда в отношении передачи объекта данных и/или его свойств. Свойства объекта данных передаются непосредственно в шаблон, в самом теге select, используя ng-options. Так что если кто-то еще окажется в тупике из-за этого, вы, вероятно, делаете те же две ошибки, что и я: (1) думая, что "что-то другое" должно заменить массивы JSON, которые используются в интернете, и (2) Ваши ng-опции написаны неправильно.

Угловой конечно делает я иногда чувствую себя глупо!! Это весело и сложно, но иногда это просто заставляет меня чувствовать себя идиотом. :- )

1  
2014-08-28 00:41:31 

<select ng-model="form.type" required="required"
  ng-options="option.value as option.name for option in typeOptions" >
    <option style="display:none" value="">select a type</option>
</select>
1  
2015-05-20 14:08:47

При использовании Css мы удаляем пустую опцию, такую как 

<option value="?undefind"></option>

Таким образом, при использовании Css мы можем удалить опции emptyy.

Показано в этой скрипке

Http://jsfiddle.net/KN9xx/1060/

0  
2016-12-07 12:35:25

Comments

    Ничего не найдено.
Click here to cancel reply.