Jestem nowy w AngularJS. Szukałem dużo, ale to nie rozwiązuje mojego problemu.

Po raz pierwszy otrzymuję pustą opcję w polu wyboru.

Oto mój kod HTML

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        <input type="text" ng-model="feed.name" placeholder="Name" />
        <select ng-model="feed.config">
            <option ng-repeat="template in configs">{{template.name}}</option>
        </select>
    </div>
</div>

JS

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
    $scope.feed = {};

      //Configuration
      $scope.configs = [
                                 {'name': 'Config 1',
                                  'value': 'config1'},
                                 {'name': 'Config 2',
                                  'value': 'config2'},
                                 {'name': 'Config 3',
                                  'value': 'config3'}
                               ];
      //Setting first option as selected in configuration select
      $scope.feed.config = $scope.configs[0].value;
});

Ale to nie działa. Jak mogę to rozwiązać? Oto demo JSFiddle

Dla porównania: dlaczego angularjs zawiera pustą opcję w select ?

Wartość pusta optionjest generowana, gdy wartość, do której odwołuje się odwołanie ng-model, nie istnieje w zestawie opcji przekazanych do ng-options. Dzieje się tak, aby zapobiec przypadkowemu wybraniu modelu: AngularJS widzi, że model początkowy jest albo niezdefiniowany, albo nie znajduje się w zestawie opcji i nie chce samodzielnie decydować o wartości modelu.

W skrócie: pusta opcja oznacza, że ​​nie został wybrany żaden ważny model (przez poprawny mam na myśli: ze zbioru opcji). Aby pozbyć się tej pustej opcji, musisz wybrać prawidłową wartość modelu.

Zmień swój kod w ten sposób

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
  $scope.feed = {};

  //Configuration
  $scope.feed.configs = [
    {'name': 'Config 1',
     'value': 'config1'},
    {'name': 'Config 2',
     'value': 'config2'},
    {'name': 'Config 3',
     'value': 'config3'}
  ];
  //Setting first option as selected in configuration select
  $scope.feed.config = $scope.feed.configs[0].value;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="MyApp1">
  <div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
    <!-- <select ng-model="feed.config">
<option ng-repeat="template in configs">{{template.name}}</option>
</select> -->
    <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
    </select>
  </div>
</div>

Działające demo JSFiddle

UPDATE (31 grudnia 2015 r.)

Jeśli nie chcesz ustawiać wartości domyślnej i chcesz usunąć pustą opcję,

<select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
      <option value="" selected="selected">Choose</option>
</select>

A w JS nie ma potrzeby inicjowania wartości.

$scope.feed.config = $scope.feed.configs[0].value;

Chociaż wszystkie powyższe sugestie działają, czasami potrzebuję pustego zaznaczenia (pokazującego tekst zastępczy), gdy po raz pierwszy wchodzę na mój ekran. Tak więc, aby zapobiec dodaniu tego pustego zaznaczenia na początku (lub czasami na końcu) mojej listy, używam tej sztuczki:

Kod HTML

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        <input type="text" ng-model="feed.name" placeholder="Name" />
        <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs" placeholder="Config">
            <option value="" selected hidden />
        </select>
    </div>
</div>

Teraz zdefiniowałeś tę pustą opcję, więc pole wyboru jest szczęśliwe, ale pozostawiasz je ukryte.

Oto zaktualizowane skrzypce: http://jsfiddle.net/UKySp/

Trzeba było ustawić początkową wartość modelu na rzeczywisty obiekt:

$scope.feed.config = $scope.configs[0];

I zaktualizuj swój wybór, aby wyglądał tak:

<select ng-model="feed.config" ng-options="item.name for item in configs">

Inną metodą rozwiązania jest użycie: $firstinng-repeat

Stosowanie:

<select ng-model="feed.config">
    <option ng-repeat="template in configs" ng-selected="$first">{{template.name}}</option>
</select>

Piśmiennictwo :

ngSelected : https://docs.angularjs.org/api/ng/directive/ngSelected

$ first : https://docs.angularjs.org/api/ng/directive/ngRepeat

Twoje zdrowie

Istnieje wiele sposobów, takich jak -

<select ng-init="feed.config = options[0]" ng-model="feed.config"
        ng-options="template.value as template.name for template in feed.configs">
</select>

Lub

$scope.feed.config = $scope.configs[0].name;

Jest to rodzaj obejścia, ale działa jak urok. Po prostu dodaj <option value="" style="display: none"></option>jako wypełniacz. Jak w:

<select size="4" ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
       <option value="" style="display: none"></option>
</select>

Jeśli chcesz tylko usunąć puste miejsce, użyj ng-show i gotowe! Nie ma potrzeby inicjowania wartości w JS.

<select ng-model="SelectedStatus" ng-options="x.caption for x in statusList">
    <option value="" ng-show="false"></option>
</select>`

Zmień swój kod w ten sposób. Zapominasz o wartości wewnątrz opcji. Zanim przypiszesz ng-model. Musi mieć jakąś wartość. Tylko wtedy nie otrzymuje niezdefiniowanej wartości.

<div ng-app="MyApp1">
<div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
     <select ng-model="feed">
        <option ng-repeat="template in configs" value="template.value">{{template.name}}    
 </option>
    </select>
    </div>
 </div>

JS

 var MyApp=angular.module('MyApp1',[])
 MyApp.controller('MyController',function($scope) {  
      $scope.feed = 'config1';      
      $scope.configs = [
         {'name': 'Config 1', 'value': 'config1'},
         {'name': 'Config 2', 'value': 'config2'},
         {'name': 'Config 3', 'value': 'config3'}
      ];
 });

Użyj wartości ng zamiast wartości .

$scope.allRecs = [{"text":"hello"},{"text":"bye"}];
$scope.X = 0;

a następnie w pliku html powinno wyglądać następująco:

<select ng-model="X">  
     <option ng-repeat="oneRec in allRecs track by $index" ng-value="$index">{{oneRec.text}}</option>
</select>

Dla mnie odpowiedzią na to pytanie było użycie <option value="" selected hidden />tak jak to zaproponował @RedSparkle plus dodanie ng-if="false"do pracy w IE.

Więc moja pełna opcja to (ma różnice w stosunku do tego, co napisałem wcześniej, ale to nie ma znaczenia z powodu ng-if):

<option value="" ng-if="false" disabled hidden></option>

Wreszcie zadziałało.

<select ng-init="mybasketModel = basket[0]" ng-model="mybasketModel">
        <option ng-repeat="item in basket" ng-selected="$first">{{item}}</option>
</select>

Sprawdź również, czy masz jakąś fałszywą wartość, czy nie. Angularjs wstawi pustą opcję, jeśli masz fałszywą wartość. Walczyłem przez 2 dni tylko z powodu fałszywej wartości. Mam nadzieję, że komuś to pomoże.

Miałem opcje [0, 1] i początkowo ustawiłem model na 0, dlatego wstawiono pustą opcję. Obejściem tego problemu było [„0”, „1”].