Angular: ng-options benutzerdefinierte Anweisung hinzufügen

Question

Ich möchte ein Select-Tag mit 'ausgewählten' Wert erstellen. Ich mache das mit ng-repeat, da ich keine benutzerdefinierte Anweisung zu ng-Optionen hinzufügen kann. Dies ist der Code.

<select class="ng-valid ng-dirty" ng-model="selectedCity"> 
     <option ng-repeat="city in allCities" value="{{city.id}}" after-render-cities>{{city.name}}</option> 
    </select> 

Dies fügt eine zusätzliche Option mit Wert =? String: 1? was ich viel gesucht habe. Da ng-Optionen dieses Problem löst, muss ich jedoch die Richtlinie nach-render-Städte für jede Option hinzufügen. Wie kann ich dieses Problem lösen?

Answer 1

Verwenden Sie ng-init für Solve-Wert =? String: 1?

<select class="ng-valid ng-dirty" ng-model="selectedCity" ng-init='selectedCity=allCities[0].id'> 
    <option ng-repeat="city in allCities" value="{{city.id}}" after-render-cities>{{city.name}}</option> 
</select> 

eine andere Wahl können Sie ng gewählten fiddle

<option ng-repeat="(key,city) in allCities" ng-selected='key==0' value="{{city.id}}" after-render-cities>{{city.name}}</option> 
</select> 

Answer 2

verwenden

<select class="ng-valid ng-dirty" ng-model="selectedCity" ng-options="city.id as city.name for city in allCities"> 
</select> 

für die Auswahl des ersten Wertes, schreiben Sie folgenden Code in Ihrem Controller

$scope.selectedCity = $scope.allCities[0].id; 

Answer 3

verwenden

Versuchen Sie thi s-Code

Java Script

var app = angular.module('myApp', []); 
app.controller('SampleController', function ($scope) { 
    $scope.Cities = [ 
     { Id: 1, Name: "New York" }, 
     { Id: 2, Name: "Colombo" }, 
     { Id: 3, Name: "Real Madrid" }, 
     { Id: 4, Name: "Bostan" }, 
     { Id: 5, Name: "Birmingham" } 
     ]; 
    $scope.City= 3; 
}); 

HTML

<select ng-options="C.Id as C.Name for C in Cities" ng-model="City"></select> 

Read This Blog, it has everything explained.

Answer 4

Sie eine benutzerdefinierte directive erstellen können, select und ng-options verwenden.

Snippet:

JS:

template: "<select ng-options='item.id as item.name for item in list' ng-model='data'></select>", 

HTML:

<div select-option list="list" ng-model='data'></div> 

zur Demo Siehe here.