Блог

Главная - Вопросы по программированию - Как добавить опцию на первую позицию в ng-options

Как добавить опцию на первую позицию в ng-options

#angularjs #angular-ngmodel #ng-options #angularjs-ng-options #angularjs-select

#angularjs #angular-ngmodel #ng-options #angularjs-ng-options #angularjs-выбрать

Вопрос:

Я ng-option элемент на своей странице.

Вот как это выглядит в шаблоне:

 <select ng-model="selectedItem" ng-options="item.name for item in items track by item.id"></select>

В контроллере:

  $scope.selectedItem = {};

 $scope.items = [{name: 'one', id: 30 },{ name: 'two', id: 27 },{ name: 'threex', id: 50 }];

В моем проекте я получаю элементы области из некоторой таблицы поиска.

Мне нужно добавить в ng-выберите этот элемент со значением -1 :

 <option value="-1">- manual -</option>

И это выглядит так:

 <select ng-model="selectedItem" ng-options="item.name for item in items track by item.id">
   <option value="-1">- manual -</option>
</select>

Вот Plunker.

Но я не вижу в view manual опции.

Есть идеи, почему я не могу увидеть ручную опцию в представлении?

Ответ №1:

Поскольку у вас есть объект с id-name pair, вам нужно использовать unshift для добавления новой опции в первую позицию.

 $scope.items.unshift({name: 'manual', id:-1});

Затем укажите опцию, которая будет выбрана по умолчанию.

 $scope.selectedItem = $scope.items[0];
  

 var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  
  $scope.items = [];
  $scope.items = [{name: 'one', id: 30 },{ name: 'two', id: 27 },{ name: 'threex', id: 50 }];
  
  $scope.items.unshift({name: 'manual', id:-1});
  $scope.selectedItem = $scope.items[0];
});  
 <!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script>document.write('<base href="'   document.location   '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <select ng-model="selectedItem" ng-options="item.name for item in items track by item.id">
      
    </select>
    
  </body>

</html>

Комментарии:

1. Мне нужно это значение в параметре

Ответ №2:

добавьте опцию в контроллер после извлечения элементов,

 $scope.items.push({name:'-manual-', id: -1});

обновленный код

Ответ №3:

измените свой выбор, как показано ниже 

 <select ng-model="selectedItem" ng-options="item.name for item in items track by item.id">
   <option value="">Manual</option>
    </select>

Ответ №4:

Мы можем просто поместить атрибут ng-selected =»желаемое значение элемента», чтобы выбрать элемент, который является им.

 <select ng-model="selectedItem" ng-options="item.name for item in items track by item.id" ng-selected="50">
 <option value="">Manual</option>
</select>