AngularJS select: удалить пустую опцию и использовать объекты данных, а не массивы

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

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

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

Литература: Угловая опция JS Remove Blank из опции выбора

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

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

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

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

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

6 голосов | спросил code-sushi 26 AM00000010000004331 2014, 01:36:43

4 ответа


0

Обновление

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

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 использовать данные модели в качестве фактического значения параметра в представлении. Angular справляется с этим по-своему. Это только гарантирует, что ваша модель объема будет установлена ​​на правильное значение при изменении. Если это не то, что вам нужно, вам придется написать собственную директиву, возможно, используя ngRepeat.

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

  3. Совет: пустые параметры пресловутого всегда являются результатом, когда angular не может соответствовать назначенному ngModel для списка параметров и нет real пустая опция не установлена. (Примечание: если 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/

ответил Yoshi 26 AM000000110000004131 2014, 11:06:41
0

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

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

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

Я хотел, чтобы этот выбор был установлен на «бар» текущего дисплея (в отличие от первого индексированного «бара» в полном списке «баров», который есть у этого «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 - множество примеров, которые я изучал, чтобы передать объект данных. Это неверно - «ничего» не нужно указывать в отношении передачи объекта данных и /или его свойств. Свойства объекта данных передаются непосредственно в шаблон внутри самого тега select, используя ng-options. Поэтому, если кто-то еще окажется в замешательстве, вы, вероятно, сделаете те же две ошибки, которые я допустил: (1) думать, что «что-то другое» должно заменить используемые в JSON-массивах примеры, используемые онлайн, и (2) ваши ng-опции не записаны правильно.

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

ответил code-sushi 28 AM00000010000003131 2014, 01:41:31
0

 <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>
ответил arturmoroz 20 Maypm15 2015, 14:08:47
0

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

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

Итак, во время использования Css мы можем удалить пустые параметры.

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

http://jsfiddle.net/KN9xx/1060/

ответил Naveen Kumar 7 WedEurope/Moscow2016-12-07T08:18:15+03:00Europe/Moscow12bEurope/MoscowWed, 07 Dec 2016 08:18:15 +0300 2016, 08:18:15

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132