Verwendung der ng-Option zum Festlegen des Standardwerts des ausgewählten Elements

Ich habe die Dokumentation der Angular select-Direktive hier gesehen: http://docs.angularjs.org/api/ng.directive:select . Ich kann nicht herausfinden, wie der Standardwert eingestellt werden soll. Das ist verwirrend:

Wählen Sie als Bezeichnung für den Wert im Array

Hier ist das Objekt:

{
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
}

Das HTML (funktioniert):

<select><option ng-repeat="value in prop.values">{{value}}</option></select>

und dann versuche ich, ein ng-option-Attribut innerhalb des select-Elements hinzuzufügen, um es prop.valueals Standardoption festzulegen (funktioniert nicht).

ng-options="(prop.value) for v in prop.values"

Was mache ich falsch?

Angenommen, das Objekt befindet sich in Ihrem Geltungsbereich:

<div ng-controller="MyCtrl">
  <select ng-model="prop.value" ng-options="v for v in prop.values">
  </select>
</div>

function MyCtrl($scope) {
  $scope.prop = {
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
  };
}

Working Plunkr: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

Die eckige Dokumentation für select * beantwortet diese Frage nicht explizit, ist aber vorhanden. Wenn Sie sich das ansehen script.js, werden Sie Folgendes sehen:

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]; // Default the color to red
}

Dies ist das HTML:

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

Dies scheint eine naheliegendere Methode zu sein, um einen ausgewählten Wert auf einem <select>with als Standard festzulegen ng-options. Es funktioniert auch, wenn Sie unterschiedliche Beschriftungen / Werte haben.

* Dies ist aus Angular 1.2.7

Diese Antwort ist nützlicher, wenn Sie Daten aus einer Datenbank abrufen, Änderungen vornehmen und die Änderungen dann beibehalten.

 <select  ng-options="opt.id as opt.name for opt in users" ng-model="selectedUser"></select>

Überprüfen Sie das Beispiel hier:

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV

<select name='partyid' id="partyid" class='span3'>
<option value=''>Select Party</option>
<option ng-repeat="item in partyName" value="{{item._id}}" ng-selected="obj.partyname == item.partyname">{{item.partyname}}
</option>
</select>

Wenn Ihr Array von Objekten komplex ist wie:

$scope.friends = [{ name: John , uuid: 1234}, {name: Joe, uuid, 5678}];

Und Ihr aktuelles Modell war auf Folgendes eingestellt:

$scope.user.friend = {name:John, uuid: 1234};

Es hat geholfen, die track byFunktion für die UUID (oder ein beliebiges eindeutiges Feld) zu verwenden, solange das ng-model = "user.friend" auch eine UUID hat:

<select ng-model="user.friend" 
ng-options="friend as friend.name for friend in friends track by friend.uuid"> 
</select>

Ich hatte ein paar Stunden damit zu kämpfen, daher möchte ich einige Erläuterungen hinzufügen. Alle hier aufgeführten Beispiele beziehen sich auf Fälle, in denen die Daten aus dem Skript selbst geladen werden und nicht aus einem Dienst oder einer Datenbank. Daher möchte ich meine Erfahrung jedem zur Verfügung stellen, der das gleiche Problem hat wie ich.

Normalerweise speichern Sie nur die ID der gewünschten Option in Ihrer Datenbank. Zeigen wir sie also an

service.js

myApp.factory('Models', function($http) {
var models = {};
models.allModels = function(options) {
    return $http.post(url_service, {options: options});
};

return models;
});

controller.js

myApp.controller('exampleController', function($scope, Models) {
$scope.mainObj={id_main: 1, id_model: 101};
$scope.selected_model = $scope.mainObj.id_model;
Models.allModels({}).success(function(data) {
    $scope.models = data; 
});
});

Zum Schluss das teilweise html model.html

Model: <select ng-model="selected_model" 
ng-options="model.id_model as model.name for model in models" ></select>

Grundsätzlich wollte ich das Stück " model.id_model als model.name für model in models " anzeigen. Das " model.id_model " verwendet die ID des Modells für den Wert, damit Sie mit dem " mainObj.id_model " übereinstimmen können, das auch ist das " selected_model ", dies ist nur ein einfacher Wert, auch " as model.name " ist die Bezeichnung für den Repeater, schließlich " model in models" " nur der reguläre Zyklus, den wir alle kennen.

Hoffe, das hilft jemandem, und wenn ja, stimmen Sie bitte ab: D.

<select id="itemDescFormId" name="itemDescFormId" size="1" ng-model="prop" ng-change="update()">
    <option value="">English(EN)</option>
    <option value="23">Corsican(CO)</option>
    <option value="43">French(FR)</option>
    <option value="16">German(GR)</option>

Fügen Sie einfach eine Option mit leerem Wert hinzu. Es wird klappen.

DEMO Plnkr

Eine einfachere Möglichkeit besteht darin, data-ng-init wie folgt zu verwenden :

<select data-ng-init="somethingHere = options[0]" data-ng-model="somethingHere" data-ng-options="option.name for option in options"></select>

Der Hauptunterschied besteht darin, dass Sie einbeziehen müssten data-ng-model

Das Attribut ng-model legt die ausgewählte Option fest und ermöglicht es Ihnen, einen Filter wie orderBy: orderModel.value weiterzuleiten

index.html

<select ng-model="orderModel" ng-options="option.name for option in orderOptions"></select>

controllers.js

$scope.orderOptions = [
    {"name":"Newest","value":"age"},
    {"name":"Alphabetical","value":"name"}
];

$scope.orderModel = $scope.orderOptions[0];

Wenn jemand auf den Standardwert stößt, der gelegentlich nicht auf der Seite in Chrome, IE 10/11, Firefox ausgefüllt wird, fügen Sie dieses Attribut zu Ihrem Eingabe- / Auswahlfeld hinzu und überprüfen Sie die ausgefüllte Variable im HTML wie folgt:

<input data-ng-model="vm.x" data-ng-if="vm.x !== '' && vm.x !== undefined && vm.x !== null" />

Ganz einfach, wenn Sie Ihre Optionen nicht mit einer numerischen ID indizieren möchten.

1. Deklarieren Sie Ihr $ scope var - people Array

   $scope.people= ["", "YOU", "ME"];

2. Erstellen Sie im DOM des obigen Bereichs ein Objekt

   <select ng-model="hired" ng-options = "who for who in people"></select>

3. In Ihrem Controller setzen Sie Ihr ng-Modell auf "gemietet".

   $scope.hired = "ME";

Viel Glück!!! Es ist wirklich einfach!

Um es zusammenzufassen, ich habe so etwas gemacht.

 <select class="form-control" data-ng-model="itemSelect" ng-change="selectedTemplate(itemSelect)" autofocus>
        <option value="undefined" [selected]="itemSelect.Name == undefined" disabled="disabled">Select template...</option>
        <option ng-repeat="itemSelect in templateLists" value="{{itemSelect.ID}}">{{itemSelect.Name}}</option></select>