ตัวเลือก ng กับ init อาร์เรย์ที่เรียบง่าย

ฉันนิด ๆ หน่อย ๆ ng-optionsสับสนกับเชิงมุมและ

ฉันมีอาร์เรย์ที่เรียบง่ายและฉันต้องการเริ่มต้นการเลือกด้วย แต่ฉันต้องการตัวเลือก value = label

script.js

$scope.options = ['var1', 'var2', 'var3'];

HTML

<select ng-model="myselect" ng-options="o for o in options"></select>

สิ่งที่ฉันได้รับ:

<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>

สิ่งที่ฉันต้องการ:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

ดังนั้นฉันจึงพยายาม:

<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>

<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>

(แต่มันไม่ทำงาน)

แก้ไข:

แบบฟอร์มของฉันถูกส่งจากภายนอกซึ่งเป็นสาเหตุที่ฉันต้องการ 'var1' เป็นค่าแทนที่จะเป็น 0

คุณถูกต้องจริงในความพยายามครั้งที่สามของคุณ

 <select ng-model="myselect" ng-options="o as o for o in options"></select>

ดูตัวอย่างการทำงานได้ที่นี่: http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview

เคล็ดลับคือ AngularJS เขียนคีย์เป็นตัวเลขตั้งแต่ 0 ถึง n อย่างไรก็ตามและแปลกลับมาเมื่ออัปเดตโมเดล

เป็นผลให้ HTML จะดูไม่ถูกต้อง แต่รูปแบบจะยังคงตั้งอย่างถูกต้องเมื่อเลือกค่า (เช่น AngularJS จะแปล '0' กลับเป็น 'var1')

โซลูชันของ Epokk นั้นใช้งานได้เช่นกันอย่างไรก็ตามหากคุณกำลังโหลดข้อมูลแบบอะซิงโครนัสคุณอาจพบว่าการอัปเดตไม่ถูกต้องเสมอไป การใช้ ngOptions จะรีเฟรชอย่างถูกต้องเมื่อขอบเขตเปลี่ยนไป

คุณสามารถใช้ng-repeatกับoptionสิ่งนี้:

<form>
    <select ng-model="yourSelect" 
        ng-options="option as option for option in ['var1', 'var2', 'var3']"
        ng-init="yourSelect='var1'"></select>
    <input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>

เมื่อคุณส่งformคุณจะได้รับค่าการซ่อน

DEMO

เลือก ng ซ้ำ

คุณสามารถใช้สิ่งที่ชอบ

<select ng-model="myselect">
    <option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
        {{o}}
    </option>
</select>

ใช้ ng-selected คุณเลือกตัวเลือกล่วงหน้าในกรณีที่ myselect ถูกเติมล่วงหน้า

ฉันชอบวิธีนี้มากกว่า ng-options อย่างไรก็ตามเนื่องจาก ng-options ใช้งานได้กับอาร์เรย์เท่านั้น ng-repeat ยังใช้งานได้กับวัตถุที่เหมือน json

หากคุณตั้งค่าการเลือกดังนี้:

<select ng-model="myselect" ng-options="b for b in options track by b"></select>

คุณจะได้รับ:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

ซอทำงาน: http://jsfiddle.net/x8kCZ/15/

<select ng-model="option" ng-options="o for o in options">

$ scope.option จะเท่ากับ 'var1' หลังการเปลี่ยนแปลงแม้คุณจะเห็น value = "0" ใน html ที่สร้างขึ้น

plunker