tùy chọn ng với init mảng đơn giản

Tôi hơi bối rối với Angular và ng-options .

Tôi có một mảng đơn giản và tôi muốn bắt đầu một lựa chọn với nó. Nhưng, tôi muốn tùy chọn đó giá trị = nhãn.

script.js

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

html

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

Những gì tôi nhận được:

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

Những gì tôi muốn:

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

Vì vậy, tôi đã cố gắng:

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

(Nhưng nó không hoạt động.)

Biên tập:

Biểu mẫu của tôi được gửi ra bên ngoài, đó là lý do tại sao tôi cần 'var1' làm giá trị thay vì 0.

Bạn thực sự đã có nó chính xác trong nỗ lực thứ ba của bạn.

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

Xem một ví dụ làm việc ở đây: http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview

Thủ thuật là AngularJS viết các khóa dưới dạng số từ 0 đến n và dịch lại khi cập nhật mô hình.

Kết quả là, HTML sẽ trông không chính xác nhưng mô hình vẫn sẽ được đặt đúng khi chọn một giá trị. (tức là AngularJS sẽ dịch '0' trở lại 'var1')

Giải pháp của Epokk cũng hoạt động, tuy nhiên nếu bạn đang tải dữ liệu không đồng bộ, bạn có thể thấy nó không luôn cập nhật chính xác. Sử dụng ngOptions sẽ làm mới chính xác khi phạm vi thay đổi.

Bạn có thể sử dụng ng-repeatvới optionnhư thế này:

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

Khi bạn gửi, formbạn có thể nhận được giá trị của đầu vào ẩn.

DEMO

ng-chọn ng-lặp lại

bạn có thể sử dụng một cái gì đó như

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

sử dụng ng-select bạn chọn trước tùy chọn trong trường hợp myselect đã được điền sẵn.

Tôi thích phương thức này hơn các tùy chọn ng, vì các tùy chọn ng chỉ hoạt động với các mảng. ng-repeat cũng hoạt động với các đối tượng giống như json.

Nếu bạn thiết lập lựa chọn của bạn như sau:

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

bạn sẽ nhận được:

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

fiddle làm việc: http://jsfiddle.net/x8kCZ/15/

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

$ scope.option sẽ bằng 'var1' sau khi thay đổi, thậm chí bạn thấy value = "0" trong html được tạo

plunker