=====select===== ====Беглый обзор==== HTML-элемент select с привязкой к данным //AngularJS//. Директива ''select'' используется вместе с ''ngModel'' для обеспечения привязки данных между областью действия и элементом управления ''select'' (включая установку значений по умолчанию). Он также обрабатывает динамические элементы опций, которые могут быть добавлены с помощью директив ''ngRepeat'' или ''ngOptions''. Когда выбран элемент в меню выбора, значение выбранного параметра будет привязано к модели, определенной директивой ''ngModel''. В случае статических или повторяющихся параметров это содержимое атрибута значения или ''textContent'' параметра, если атрибут значения отсутствует. Значение и ''textContent'' могут быть интерполированы. ====Соответствие модели и значения параметров==== Как правило, соответствие между моделью и параметром оценивается путем строгого сравнения значения модели со значением доступных параметров. Если вы устанавливаете значение параметра с помощью атрибута значения параметра или textContent, значение всегда будет строкой, что означает, что значение модели также должно быть строкой. В противном случае директива select не может соответствовать им правильно. * директива ngOptions (выбрать) * директива ngValue, которая позволяет произвольным выражениям быть значениями параметров (пример) * модель $parsers/$formatters для преобразования строкового значения (пример) * Если viewValue ngModel не соответствует ни одному из параметров, тогда элемент управления автоматически добавит «неизвестный» параметр, который затем удаляется при устранении несоответствия. При желании в элемент select может быть вложен один жестко заданный элемент option со значением, установленным в пустую строку. Этот элемент будет представлять нулевую или не выбранную опцию. Смотрите пример ниже для демонстрации. ====Выбор между ngRepeat и ngOptions==== Во многих случаях ''ngRepeat'' может использоваться для элементов ''option'' вместо ''ngOptions'' для достижения аналогичного результата. Тем не менее, ''ngOptions'' предоставляет некоторые преимущества: * больше гибкости в том, как модель
Single select with "not selected" option and dynamic option values:

singleSelect = {{data.singleSelect}}

Multiple select:

multipleSelect = {{data.multipleSelect}}
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';
   };
}]);

{{ :angular:angularjs:select:select1.png?600 |}} ===Использование ngRepeat для генерации опций select=== index.html



  
     Repeat select: 
    
  
  
  model = {{data.model}}


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'}
    ]
   };
}]);

{{ :angular:angularjs:select:select2.png?600 |}} ===Использование ngValue для привязки модели к массиву объектов=== index.html





  
     ngvalue select: 
    
  
  
  model = {{data.model | json}}

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'}
    ]
   };
}]);

{{ :angular:angularjs:select:select3.png?600 |}} ===Использование select с ngOptions и установка значения по умолчанию=== index.html





  
    Make a choice:
    
  
  
  option = {{data.selectedOption}}

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
    };
}]);

{{ :angular:angularjs:select:select4.png?600 |}} ===Привязка select к нестроковому значению с помощью парсинга/форматирования ngModel=== index.html



{{ 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');
});