come utilizzare l'opzione ng per impostare il valore predefinito dell'elemento select

Ho visto la documentazione della direttiva sulla selezione angolare qui: http://docs.angularjs.org/api/ng.directive:select . Non riesco a capire come impostare il valore predefinito. Questo è confusionario:

selezionare come etichetta per valore nella matrice

Ecco l'oggetto:

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

Il codice HTML (funzionante):

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

e quindi sto provando ad aggiungere un attributo ng-option all'interno dell'elemento select da impostare prop.valuecome opzione predefinita (non funzionante).

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

Che cosa sto facendo di sbagliato?

Supponendo quindi che l'oggetto rientri nel tuo ambito di applicazione:

<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

La documentazione angolare per select * non risponde esplicitamente a questa domanda, ma è lì. Se guardi il script.js, vedrai questo:

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
}

Questo è l'html:

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

Questo sembra essere un modo più ovvio di default di un valore selezionato su un <select>conng-options . Funzionerà anche se hai etichette / valori diversi.

* Questo è da Angular 1.2.7

Questa risposta è più utile quando si stanno portando dati da un DB, si apportano modifiche e poi si persistono le modifiche.

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

Controlla l'esempio qui:

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>

Se la tua matrice di oggetti è complessa come:

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

E il tuo modello attuale era impostato su qualcosa del tipo:

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

Ha aiutato a usare la track byfunzione su uuid (o su qualsiasi campo univoco), purché ng-model = "user.friend" abbia anche un uuid:

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

Ho lottato con questo per un paio d'ore, quindi vorrei aggiungere alcuni chiarimenti, tutti gli esempi qui riportati si riferiscono ai casi in cui i dati vengono caricati dallo script stesso, non qualcosa proveniente da un servizio o un database, quindi vorrei offrire la mia esperienza a chiunque abbia lo stesso problema.

Normalmente salvate solo l'id dell'opzione desiderata nel vostro database, quindi ... mostriamolo

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; 
});
});

Finalmente il html parziale model.html

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

fondamentalmente volevo indicare quel pezzo " model.id_model come modello.name per il modello nei modelli ", il " model.id_model " usa l'id del modello per il valore in modo da poterlo abbinare al " mainObj.id_model " che è anche il " selected_model ", questo è solo un valore semplice, anche " as model.name " è l'etichetta per il ripetitore, infine " modello nei modelli " è solo il ciclo normale che tutti conosciamo.

Spero che questo aiuti qualcuno, e se lo fa, per favore vota: 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>

Basta aggiungere un'opzione con un valore vuoto. Funzionerà.

DEMO Plnkr

Un modo più semplice per farlo è usare data-ng-init in questo modo:

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

La differenza principale qui è che dovresti includere data-ng-model

L' attributo ng-model imposta l'opzione selezionata e consente anche di convogliare un filtro come orderBy: orderModel.value

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];

Se qualcuno si imbatte nel valore predefinito occasionalmente non popolato sulla pagina in Chrome, IE 10/11, Firefox - prova ad aggiungere questo attributo al tuo campo di input / select controllando la variabile popolata nell'HTML, in questo modo:

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

Davvero semplice se non ti interessa indicizzare le opzioni con un ID numerico.

1. Dichiara il tuo $ scope var - array di persone

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

2. Nel DOM di cui sopra, creare un oggetto

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

3. Nel controller, si imposta il modello ng "assunto".

   $scope.hired = "ME";

In bocca al lupo!!! È davvero facile!

Solo per aggiungere, ho fatto qualcosa del genere.

 <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>