วิธีการใช้ตัวเลือก ng เพื่อตั้งค่าเริ่มต้นขององค์ประกอบที่เลือก

ผมเคยเห็นเอกสารของเลือกสั่งเชิงมุมที่นี่: http://docs.angularjs.org/api/ng.directive:select ฉันไม่สามารถกำหนดวิธีการตั้งค่าเริ่มต้นได้ นี่คือความสับสน:

เลือกเป็นป้ายกำกับสำหรับค่าในอาร์เรย์

นี่คือวัตถุ:

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

html (ทำงาน):

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

แล้วฉันกำลังพยายามเพิ่มแอตทริบิวต์ ng-option ภายในองค์ประกอบ select เพื่อตั้งprop.valueเป็นตัวเลือกเริ่มต้น (ไม่ทำงาน)

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

ผมทำอะไรผิดหรือเปล่า?

ดังนั้นสมมติว่าวัตถุนั้นอยู่ในขอบเขตของคุณ:

<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 ทำงาน: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

เอกสารเชิงมุมสำหรับเลือก * ไม่ได้ตอบคำถามนี้อย่างชัดเจน แต่มันจะมี หากคุณดูที่script.jsคุณจะเห็นสิ่งนี้:

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
}

นี่คือ html:

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

นี่น่าจะเป็นวิธีที่ชัดเจนกว่าในการกำหนดค่าเริ่มต้น<select>ด้วยการng-optionsเลือก นอกจากนี้ยังใช้งานได้หากคุณมีฉลาก / ค่าที่แตกต่างกัน

* นี่คือจาก 1.2.7 เชิงมุม

คำตอบนี้มีประโยชน์มากขึ้นเมื่อคุณนำข้อมูลจากฐานข้อมูลทำการแก้ไขและยืนยันการเปลี่ยนแปลง

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

ตรวจสอบตัวอย่างที่นี่:

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>

ถ้าอาร์เรย์ของวัตถุมีความซับซ้อนเช่น:

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

และโมเดลปัจจุบันของคุณถูกตั้งค่าเป็น:

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

มันช่วยในการใช้track byฟังก์ชั่นบน uuid (หรือฟิลด์ที่ไม่ซ้ำกัน) ตราบใดที่ ng-model = "user.friend" ก็มี uuid เช่นกัน:

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

ฉันต่อสู้กับสิ่งนี้เป็นเวลาสองชั่วโมงดังนั้นฉันต้องการเพิ่มความกระจ่างบางอย่างตัวอย่างทั้งหมดที่ระบุไว้ที่นี่หมายถึงกรณีที่ข้อมูลถูกโหลดจากสคริปต์เองไม่ใช่สิ่งที่มาจากบริการหรือฐานข้อมูล ดังนั้นฉันต้องการมอบประสบการณ์ของฉันให้กับทุกคนที่มีปัญหาเช่นเดียวกับฉัน

โดยปกติคุณจะบันทึกเฉพาะ id ของตัวเลือกที่ต้องการในฐานข้อมูลของคุณดังนั้น ... ขอแสดงมัน

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

ในที่สุด html บางส่วนmodel.html

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

โดยทั่วไปฉันต้องการชี้ชิ้นส่วนนั้นว่า " model.id_model เป็น model.name สำหรับโมเดลในโมเดล " the " model.id_model " ใช้รหัสของโมเดลสำหรับค่าเพื่อให้คุณสามารถจับคู่กับ " mainObj.id_model " ซึ่งเป็น "การselected_model " นี้เป็นเพียงค่าธรรมดายัง " เป็น model.name " เป็นป้ายชื่อสำหรับ repeater ในที่สุด " แบบจำลองในรูปแบบ " เป็นเพียงรอบปกติที่เราทุกคนรู้เกี่ยวกับ

หวังว่านี่จะช่วยใครซักคนและถ้าเป็นเช่นนั้นโปรดลงคะแนน: 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>

เพียงเพิ่มตัวเลือกที่มีค่าว่าง มันจะทำงาน.

DEMO Plnkr

วิธีที่ง่ายกว่าคือใช้data-ng-initดังนี้:

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

ความแตกต่างหลักที่นี่คือคุณจะต้องรวม data-ng-model

NG-รูปแบบแอตทริบิวต์ชุดตัวเลือกที่เลือกและยังช่วยให้คุณท่อกรองเหมือน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];

หากใครก็ตามที่ใช้งานเป็นค่าเริ่มต้นบางครั้งจะไม่มีการเติมข้อมูลในหน้าใน Chrome, IE 10/11, Firefox - ลองเพิ่มคุณลักษณะนี้ในการตรวจสอบฟิลด์อินพุต / เลือกของคุณสำหรับตัวแปรที่มีประชากรใน HTML ดังนี้:

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

ง่ายมาก ๆ ถ้าคุณไม่สนใจเกี่ยวกับการจัดทำดัชนีตัวเลือกของคุณด้วยรหัสตัวเลขบางตัว

1. ประกาศ $ var var - people array ของคุณ

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

2. ใน DOM ของขอบเขตด้านบนสร้างวัตถุ

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

3. ในคอนโทรลเลอร์คุณตั้งค่า ng-model "รับจ้าง" ของคุณ

   $scope.hired = "ME";

โชคดี!!! มันง่ายมาก!

เพียงเพื่อเพิ่มฉันทำอะไรเช่นนี้

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