Различия

Здесь показаны различия между двумя версиями данной страницы.

--- angular:angularjs:form:select [2020/06/09 02:05]
werwolf создано
+++ angular:angularjs:form:select [2023/01/12 12:18] (текущий)
@@ Строка 1: / Строка 1: @@
-====select====
+=====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'' предоставляет некоторые преимущества:
+  * больше гибкости в том, как модель <select>'s назначается с помощью выбора как часть выражения
+  * уменьшенное потребление памяти, не создавая новую область для каждого повторного экземпляра
+  * Увеличена скорость рендеринга за счет создания опций в фрагменте документа, а не по отдельности.
+В частности, выбор с повторяющимися параметрами значительно замедляется, начиная с 2000 вариантов в Chrome и Internet Explorer / Edge.
+====Информация о директиве ====
+Эта директива выполняется на уровне приоритета 0.
+====Параметры директивы====
+как элемент:
+<code javascript>
+  ng-model="string"
+  [name="string"]
+  [multiple="string"]
+  [required="string"]
+  [ng-required="string"]
+  [ng-change="string"]
+  [ng-options="string"]
+  [ng-attr-size="string"]>
+...
+</code>
+^Параметр^Тип^Детали^
+^ngModel|string|Назначаемое выражение AngularJS для привязки данных.|
+^name(optional)|string|Имя свойства формы, под которой публикуется элемент управления.|
+^multiple(optional)|string|Позволяет выбрать несколько вариантов. Выбранные значения будут привязаны к модели в виде массива.|
+^required(optional)|string|Устанавливает требуемый ключ ошибки проверки, если значение не введено.|
+^ngRequired(optional)|string|Добавляет обязательный атрибут и обязательное ограничение проверки к элементу, когда выражение ngRequired оценивается как true. Используйте ngRequired вместо ''require'', если вы хотите привязать данные к необходимому атрибуту.|
+^ngChange(optional)|string|Выражение AngularJS, которое будет выполнено, когда выбранные опции изменяются из-за взаимодействия пользователя с элементом select.|
+^ngOptions(optional)|string|Устанавливает параметры, которыми наполнен select, и определяет, что устанавливается в модели при выборе. Смотрите ngOptions.|
+^ngAttrSize(optional)|string|Устанавливает размер выбранного элемента динамически. Использует директиву ngAttr.|
+====Примеры====
+===Простой выбор элементов со статическими параметрами===
+index.html
+<code 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>
+</code>
+app.js
+<code javascript>
+angular.module('staticSelect', [])
+ .controller('ExampleController', ['$scope', function($scope) {
+   $scope.data = {
+    singleSelect: null,
+    multipleSelect: [],
+    option1: 'option-1'
+   };
+   $scope.forceUnknownOption = function() {
+     $scope.data.singleSelect = 'nonsense';
+   };
+}]);
+</code>
+{{ :angular:angularjs:select:select1.png?600 |}}
+===Использование ngRepeat для генерации опций select===
+index.html
+<code 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>
+</code>
+<code javascript>
+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'}
+    ]
+   };
+}]);
+</code>
+{{ :angular:angularjs:select:select2.png?600 |}}
+===Использование ngValue для привязки модели к массиву объектов===
+index.html
+<code 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>
+</code>
+app.js
+<code javascript>
+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'}
+    ]
+   };
+}]);
+</code>
+{{ :angular:angularjs:select:select3.png?600 |}}
+===Использование select с ngOptions и установка значения по умолчанию===
+index.html
+<code 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>
+</code>
+app.js
+<code javascript>
+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
+    };
+}]);
+</code>
+{{ :angular:angularjs:select:select4.png?600 |}}
+===Привязка select к нестроковому значению с помощью парсинга/форматирования ngModel===
+index.html
+<code 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 }}
+</code>
+app.js
+<code javascript>
+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;
+      });
+    }
+  };
+});
+</code>
+protractor.js
+<code javascript>
+it('should initialize to model', function() {
+  expect(element(by.model('model.id')).$('option:checked').getText()).toEqual('Two');
+});
+</code>
+{{ :angular:angularjs:select:selct5.png?600 |}}

Инструменты пользователя

Инструменты сайта

Различия

Инструменты страницы