Пустой первый элемент в выпадающем списке

Я новичок в AngularJS, и в настоящее время я работаю над веб-приложением в Django, где я использую AngularJS для сторонней части, которую я могу сказать. Моя проблема заключается в том, что раскрывающийся список, который заполняется объектами из области, всегда начинается с пустого элемента (если я выберу его из списка, проблема исчезнет). Это создает проблемы, потому что, если пользователь не выбирает ничего, POST-запрос обычно не будет работать. Я хотел бы знать, как иметь что-то вроде предварительно выбранного значения или чего-то подобного. Здесь часть моего кода:

Выберите тег:

<select id="sel" class="input-block-level" ng-model="list_category">
            <option ng-repeat="obj in list_categories.data" value="{{obj.id}}">{{obj.name}}</option>
            <option value="Other">Other</option>
        </select>

$scope.list_categories:

var listcategoryPromise = ListCategory.get();
    listcategoryPromise.then(function(response) {
        $scope.list_categories = {
            meta : response.data.meta,
            data : response.data.objects
        };
    });

Ответы

Ответ 1

Используйте директиву ng-options и удалите value из опции "Другой", например:

<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.id as obj.name for obj in list_categories.data">    
    <option value="">Other</option>
</select>

Это гарантирует, что если list_category пуст (никакой записи не выбрано), выбирается опция "Другой" (по умолчанию).

jsFiddle: http://jsfiddle.net/bmleite/gkJve/

Ответ 2

Найдите нижеприведенный рабочий пример ниже, вы должны избегать ng-repeat с опциями поэтому см. ниже пример кода с

<body ng-controller="testcontroller">
         <select ng-model="item" ng-options="item.ID as item.Title for item in items">
         </select>
            <span>{{item}}</span>
    </body>

App.controller('testcontroller', function ($scope) {
    $scope.item = '000001';
    $scope.items = [
      { ID: '000001', Title: 'Chicago' },
      { ID: '000002', Title: 'New York' },
      { ID: '000003', Title: 'Washington' }
    ];
});

Ответ 3

Вы можете использовать определенный синтаксис для тегов <select> с помощью Angularjs.

Вдохновленный на странице :

<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.name for obj in list_categories.data">
    <option value="Other">Other</option>
</select>

Ответ 4

Здесь некоторый код непосредственно с сайта AngularJs.org о избранных списках:

<select ng-model="color" ng-options="c.name for c in colors"></select>

Во-первых, как вы можете видеть, вам не нужно использовать ng-repeat для создания списка опций. Angular будет в основном позволять вам делать цикл foreach в коллекции для создания списка опций. Во-вторых, у вас есть ng-модель, которая находится на выбранном, но не совпадает с именем вашей коллекции. Это будет ваш товар, который на самом деле собирается в пост-время.

function MyCntrl($scope) {
   $scope.colors = [
      {name:'black', shade:'dark'},
      {name:'white', shade:'light'},
      {name:'red', shade:'dark'},
      {name:'blue', shade:'dark'},
      {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // red
}

Хорошо, а вот код контроллера javascript. $scope.colors - это коллекция, а $scope.color - свойство модели, которое было присвоено списку выбора в html. Как видно из этого примера, для свойства модели задано начальное значение по умолчанию для третьего параметра в массиве. Для вас это можно установить из http.get, который вы используете для начальной загрузки своей страницы.

Теперь, когда вы делаете foreach, вы в основном захватываете значение "name" из коллекции, и вы говорите "покажите это значение" в раскрывающемся списке и используйте это значение в сообщении. Имея это свойство свойства inital, вы должны иметь возможность избежать пустого поля параметров в раскрывающемся списке.

Ссылка: AngularJS Выбрать

Ответ 6

Опция "Пустое пустое" поверх раскрывающегося списка появится, если вы установили ng-model с некоторым значением, которое не содержится в параметрах списка, созданных после ng-Repeat. Теперь, если вы считаете исходное сообщение и удаляете ng-model или задаете допустимое значение в ng-model, он будет работать нормально или вы можете установить выбранный первый элемент как

$scope.list_category = $scope.list_categories.data[0].id;

Ответ 7

попробуйте следующее:

    <option style="display: none" value=""></option>

надеюсь, что это поможет кому-то