cara menggunakan opsi-ng untuk menetapkan nilai default elemen pilih

Saya telah melihat dokumentasi dari arahan pilih Angular di sini: http://docs.angularjs.org/api/ng.directive:select . Saya tidak tahu cara mengatur nilai default. Ini membingungkan:

pilih sebagai label untuk nilai dalam array

Inilah tujuannya:

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

Html (berfungsi):

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

dan kemudian saya mencoba untuk menambahkan atribut ng-opsi di dalam elemen pilih untuk ditetapkan prop.valuesebagai opsi default (tidak berfungsi).

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

Apa yang saya lakukan salah?

Jadi dengan asumsi objek itu ada dalam ruang lingkup Anda:

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

Plunkr yang berfungsi: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

The dokumentasi sudut untuk pilih * tidak menjawab pertanyaan ini secara eksplisit, tapi itu ada. Jika Anda melihat script.js, Anda akan melihat ini:

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
}

Ini adalah html:

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

Ini tampaknya menjadi cara yang lebih jelas untuk default nilai yang dipilih pada <select>dengan ng-options. Juga akan berfungsi jika Anda memiliki label / nilai yang berbeda.

* Ini dari Angular 1.2.7

Jawaban ini lebih berguna ketika Anda membawa data dari DB, membuat modifikasi dan kemudian bertahan perubahan.

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

Lihat contoh di sini:

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>

Jika array objek Anda kompleks seperti:

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

Dan model Anda saat ini diatur ke sesuatu seperti:

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

Ini membantu menggunakan track byfungsi pada uuid (atau bidang unik apa pun), selama ng-model = "user.friend" juga memiliki uuid:

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

Saya berjuang dengan ini selama beberapa jam, jadi saya ingin menambahkan beberapa klarifikasi untuk itu, semua contoh yang disebutkan di sini, merujuk pada kasus-kasus di mana data dimuat dari skrip itu sendiri, bukan sesuatu yang berasal dari layanan atau database, jadi saya ingin memberikan pengalaman saya kepada siapa pun yang memiliki masalah yang sama seperti saya.

Biasanya Anda hanya menyimpan id dari opsi yang diinginkan dalam database Anda, jadi ... mari kita tunjukkan

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

Akhirnya sebagian html model.html

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

pada dasarnya saya ingin menunjukkan bagian " model.id_model sebagai model.name untuk model dalam model " the " model.id_model " menggunakan id model untuk nilai sehingga Anda dapat mencocokkan dengan " mainObj.id_model " yang juga the " selected_model ", ini hanya nilai polos, juga " as model.name " adalah label untuk pengulang, akhirnya " model dalam model " hanyalah siklus reguler yang kita semua ketahui.

Semoga ini bisa membantu seseorang, dan jika berhasil, pilih: 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>

Cukup tambahkan opsi dengan nilai kosong. Itu akan berhasil.

DEMO Plnkr

Cara yang lebih mudah untuk melakukannya adalah dengan menggunakan data-ng-init seperti ini:

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

Perbedaan utama di sini adalah bahwa Anda perlu memasukkan data-ng-model

The ng model atribut menetapkan opsi yang dipilih dan juga memungkinkan Anda untuk pipa filter seperti 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];

Jika ada yang menjalankan nilai default yang kadang-kadang tidak diisi pada halaman di Chrome, IE 10/11, Firefox - coba tambahkan atribut ini ke bidang input / pilih Anda memeriksa variabel yang dihuni dalam HTML, seperti:

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

Sangat sederhana jika Anda tidak peduli tentang pengindeksan opsi Anda dengan beberapa id numerik.

1. Nyatakan $ array Anda var - orang array

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

2. Di DOM lingkup di atas, buat objek

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

3. Di controller Anda, Anda mengatur ng-model Anda "disewa".

   $scope.hired = "ME";

Semoga berhasil!!! Sangat mudah!

Sekadar tambahan, saya melakukan sesuatu seperti ini.

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