Инициализация выбора с помощью AngularJS и ng-repeat

Я пытаюсь получить select-box, чтобы начать с предварительно заполненной опции, используя ng-repeat с AngularJS 1.1.5. Вместо этого выбор всегда начинается с ничего выбранного. У этого также есть пустая опция, которую я не хочу. Я думаю, что есть побочный эффект от того, что ничего не выбрано.

Я могу заставить эту работу использовать ng-options вместо ng-repeat, но я хочу использовать ng-repeat для этого случая. Хотя мой суженный пример не показывает его, я также хочу установить атрибут title для каждого параметра, и, насколько мне известно, нет способа сделать это с помощью ng-options.

Я не думаю, что это связано с общей проблемой AngularJs/prototypical inheritance. По крайней мере, я не вижу ничего очевидного при осмотре в Батаранге. Кроме того, когда вы выбираете опцию в выборе с помощью пользовательского интерфейса, модель действительно обновляется правильно.

Здесь HTML:

<body ng-app ng-controller="AppCtrl">
    <div>
        Operator is: {{filterCondition.operator}}
    </div>
    <select ng-model="filterCondition.operator">
       <option 
           ng-repeat="operator in operators" 
           value="{{operator.value}}"
       >
           {{operator.displayName}}
       </option>
    </select>
</body>

И JavaScript:

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]
}

JS Fiddle для этого: http://jsfiddle.net/coverbeck/FxM3B/2/

Ответы

Ответ 1

OK. Если вы не хотите использовать правильный способ ng-options, вы можете добавить атрибут ng-selected с логикой проверки условий для директивы option, чтобы выполнить предварительную выборку.

<select ng-model="filterCondition.operator">
    <option ng-selected="{{operator.value == filterCondition.operator}}"
            ng-repeat="operator in operators"
            value="{{operator.value}}">
      {{operator.displayName}}
    </option>
</select>

Рабочий демонстрационный пример

Ответ 2

Для тега select, angular предоставляет директиву ng-options. Это дает вам определенную структуру для настройки параметров и установки значения по умолчанию. Вот обновленная скрипта с использованием ng-опций, которая работает как ожидалось: http://jsfiddle.net/FxM3B/4/

Обновлен HTML (код остается тем же)

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators">
</select>
</body>

Ответ 3

Благодаря TheSharpieOne для указания опции ng-selected. Если бы это было опубликовано как ответ, а не как комментарий, я бы сделал правильный ответ.

Здесь работает JSFiddle: http://jsfiddle.net/coverbeck/FxM3B/5/.

Я также обновил скрипт, чтобы использовать атрибут title, который я оставил в своем исходном сообщении, поскольку это не было причиной проблемы (но это причина, по которой я хочу использовать ng-repeat вместо ng -options).

HTML:

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator">
   <option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option>
</select>
</body>

JS:

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah'},
        {value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada'}
     ]
}

Ответ 4

Тот факт, что angular вводит пустой элемент option в select, заключается в том, что объект модели, привязанный к нему по умолчанию, имеет при инициализации пустое значение.

Если вы хотите выбрать вариант по умолчанию, вы можете, возможно, установить его в области в контроллере

$scope.filterCondition.operator = "your value here";

Если вы хотите использовать пустой заполнитель, это работает для меня

<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators">
  <option value="">Choose Operator</option>
</select>

Ответ 5

Как и было предложено, вам нужно использовать ng-options, и, к сожалению, мне кажется, вам нужно ссылаться на элемент массива по умолчанию (если только массив не является массивом строк).

http://jsfiddle.net/FxM3B/3/

JavaScript:

function AppCtrl($scope) {


    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]

    $scope.filterCondition={
        operator: $scope.operators[0]
    }
}

HTML:

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator.value}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators">
</select>
</body>

Ответ 6

Если вы используете md-select и ng-repeat ing md-option из материала angular, вы можете добавить ng-model-options="{trackBy: '$value.id'}" в тэг md-select, показанный в это перо

код:

<md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}">
  <md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label>
  <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>