Выберите вариант по умолчанию с помощью ng-options, используя плоский массив - PullRequest
Новая
       300

Выберите вариант по умолчанию с помощью ng-options, используя плоский массив

1 голос
/ 13 июня 2019

Я генерирую <option> с ng-options, используя плоский массив. Проблема, с которой я столкнулся, заключается в выборе элемента опции по умолчанию, который я уже определил. Кажется, это очень простая задача, и есть множество подобных вопросов, использующих объекты или массив объектов, но все, что я нашел и попробовал в моей ситуации, не работает. 

<div ng-app="MyApp">
  <div ng-controller="MyCtrl">
    <select ng-options="opt as opt for opt in testOpt" data-ng-model="resultOpt">
      <option value="">Choose Category</option>
    </select>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

angular.module('MyApp', []).controller('MyCtrl', ['$scope', function ($scope) {
  $scope.testOpt = [
    'ID',
    'Name',
    'Email',
    'Address'
  ];
  $scope.resultOpt = '';
}]);

Что я пытаюсь сделать, это выбрать опцию «Выбрать категорию» по умолчанию. Как многие другие уже предложили в других вопросах, я пытался использовать $scope.resultOpt = '' в своем контроллере и даже пытался ng-init="resultOpt = ''", но это не работает вообще. Это прекрасно работает для массива объектов или объектов , но не с простыми массивами. Я также не хочу выходить за рамки AngularJS, я не люблю смешивать и сопоставлять ванильный и AngularJS-код, вещи становятся грязными.

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

Полный пример: https://jsfiddle.net/v4uesg02/4/

Как я могу выбрать опцию «Выбрать категорию» по умолчанию, используя плоский массив, не выходя за рамки AngularJS?

Ответы [ 2 ]

1 голос
/ 13 июня 2019

Как выбрать жестко заданную опцию null с помощью ng-options и ng-model

Чтобы выбрать одиночный жесткий код <option>, присвойте null модели: 

angular.module('MyApp', []).controller('MyCtrl', ['$scope', function ($scope) {
  $scope.testOpt = [
    'ID',
    'Name',
    'Email',
    'Address'
  ];
  ̶$̶s̶c̶o̶p̶e̶.̶r̶e̶s̶u̶l̶t̶O̶p̶t̶ ̶=̶ ̶'̶'̶;̶
  $scope.resultOpt = null;
}]);

Из документов:

При желании в элемент <select> может быть вложен один жестко закодированный элемент <option> со значением, установленным в пустую строку. Затем этот элемент будет представлять параметр null или «не выбран».

Для получения дополнительной информации см.

ДЕМО 

angular.module('MyApp', [])
.controller('MyCtrl', ['$scope', function ($scope) {

  $scope.testOpt = [
    'ID',
    'Name',
    'Email',
    'Address'
  ];
  $scope.resultOpt = null;
}]);
  
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="MyApp" ng-controller="MyCtrl">

    <select ng-options="opt as opt for opt in testOpt"
            data-ng-model="resultOpt">
      <option value="">Choose Category</option>
    </select>

    <br><br>
    <button ng-click="resultOpt=null">Reset</button>
 
</body>
0 голосов
/ 13 июня 2019

Одна вещь, которую я хотел бы добавить к ответу @ georgeawg, - это отключить как атрибут опции, чтобы в будущем он не мог быть повторно выбран 

<option value="" disabled>Choose Category</option>
...