HTML-элемент select с привязкой к данным AngularJS.

Директива select используется вместе с ngModel для обеспечения привязки данных между областью действия и элементом управления select (включая установку значений по умолчанию). Он также обрабатывает динамические элементы опций, которые могут быть добавлены с помощью директив ngRepeat или ngOptions.

Когда выбран элемент в меню выбора, значение выбранного параметра будет привязано к модели, определенной директивой ngModel. В случае статических или повторяющихся параметров это содержимое атрибута значения или textContent параметра, если атрибут значения отсутствует. Значение и textContent могут быть интерполированы.

Как правило, соответствие между моделью и параметром оценивается путем строгого сравнения значения модели со значением доступных параметров.

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

• директива ngOptions (выбрать)
• директива ngValue, которая позволяет произвольным выражениям быть значениями параметров (пример)
• модель $parsers/$formatters для преобразования строкового значения (пример)

Если viewValue ngModel не соответствует ни одному из параметров, тогда элемент управления автоматически добавит «неизвестный» параметр, который затем удаляется при устранении несоответствия.

При желании в элемент select может быть вложен один жестко заданный элемент option со значением, установленным в пустую строку. Этот элемент будет представлять нулевую или не выбранную опцию. Смотрите пример ниже для демонстрации.

Во многих случаях ngRepeat может использоваться для элементов option вместо ngOptions для достижения аналогичного результата. Тем не менее, ngOptions предоставляет некоторые преимущества:

• больше гибкости в том, как модель <select>'s назначается с помощью выбора как часть выражения
• уменьшенное потребление памяти, не создавая новую область для каждого повторного экземпляра
• Увеличена скорость рендеринга за счет создания опций в фрагменте документа, а не по отдельности.

В частности, выбор с повторяющимися параметрами значительно замедляется, начиная с 2000 вариантов в Chrome и Internet Explorer / Edge.

Эта директива выполняется на уровне приоритета 0.

как элемент:

  ng-model="string"
  [name="string"]
  [multiple="string"]
  [required="string"]
  [ng-required="string"]
  [ng-change="string"]
  [ng-options="string"]
  [ng-attr-size="string"]>
...

index.html

<div ng-controller="ExampleController">
  <form name="myForm">
    <label for="singleSelect"> Single select: </label><br>
    <select name="singleSelect" ng-model="data.singleSelect">
      <option value="option-1">Option 1</option>
      <option value="option-2">Option 2</option>
    </select><br>
 
    <label for="singleSelect"> Single select with "not selected" option and dynamic option values: </label><br>
    <select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
      <option value="">---Please select---</option> <!-- not selected / blank option -->
      <option value="{{data.option1}}">Option 1</option> <!-- interpolation -->
      <option value="option-2">Option 2</option>
    </select><br>
    <button ng-click="forceUnknownOption()">Force unknown option</button><br>
    <tt>singleSelect = {{data.singleSelect}}</tt>
 
    <hr>
    <label for="multipleSelect"> Multiple select: </label><br>
    <select name="multipleSelect" id="multipleSelect" ng-model="data.multipleSelect" multiple>
      <option value="option-1">Option 1</option>
      <option value="option-2">Option 2</option>
      <option value="option-3">Option 3</option>
    </select><br>
    <tt>multipleSelect = {{data.multipleSelect}}</tt><br/>
  </form>
</div>

app.js

 
angular.module('staticSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    singleSelect: null,
    multipleSelect: [],
    option1: 'option-1'
   };
 
   $scope.forceUnknownOption = function() {
     $scope.data.singleSelect = 'nonsense';
   };
}]);

index.html

<div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" id="repeatSelect" ng-model="data.model">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <tt>model = {{data.model}}</tt><br/>
</div>

angular.module('ngrepeatSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    model: null,
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ]
   };
}]);

index.html

 
<div ng-controller="ExampleController">
  <form name="myForm">
    <label for="ngvalueselect"> ngvalue select: </label>
    <select size="6" name="ngvalueselect" ng-model="data.model" multiple>
      <option ng-repeat="option in data.availableOptions" ng-value="option.value">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <pre>model = {{data.model | json}}</pre><br/>
</div>

app.js

 
angular.module('ngvalueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    model: null,
    availableOptions: [
         {value: 'myString', name: 'string'},
         {value: 1, name: 'integer'},
         {value: true, name: 'boolean'},
         {value: null, name: 'null'},
         {value: {prop: 'value'}, name: 'object'},
         {value: ['a'], name: 'array'}
    ]
   };
}]);

index.html

 
<div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>

app.js

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ],
    selectedOption: {id: '3', name: 'Option C'} //This sets the default value of the select in the ui
    };
}]);

index.html

<select ng-model="model.id" convert-to-number>
  <option value="0">Zero</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>
{{ model }}

app.js

 
angular.module('nonStringSelect', [])
.run(function($rootScope) {
  $rootScope.model = { id: 2 };
})
.directive('convertToNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(val) {
        return parseInt(val, 10);
      });
      ngModel.$formatters.push(function(val) {
        return '' + val;
      });
    }
  };
});

protractor.js

 
it('should initialize to model', function() {
  expect(element(by.model('model.id')).$('option:checked').getText()).toEqual('Two');
});