Làm thế nào để thiết lập giá trị mặc định trong ng-options

Question

tôi có thể thiết lập một danh sách thả xuống với giá trị mặc định trong angularjs như,

<select name="repeatSelect" id="repeatSelect" ng-model="repeatSelect" ng-init=" repeatSelect = data[0].id"> 
    <option ng-repeat="option in data" value="{{option.id}}">{{option.name}}</option> 
</select> 

Làm thế nào tôi có thể đạt được cùng sử dụng ng-options? Tôi treid với,

<select name="repeatSelect" 
    id="repeatSelect" 
    ng-model="repeatSelect" 
    ng-init=" repeatSelect = option.id" 
    ng-options="option.name for option in data track by option.id"> 
</select> 

Nhưng không sử dụng. Ví dụ fiddle is here

Answer 1

Sử dụng ng-init để đặt giá trị mặc định cho ng-options.

Đây là: demo

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

Answer 2

tôi đã acheieved những gì bạn cần sử dụng mã của bạn và ng-options như bạn đã đề cập, đây là Working Fiddle

Full MÃ

<div ng-app="ngrepeatSelect"> 
    <div ng-controller="ExampleController"> 
     <form name="myForm"> 
      <label for="repeatSelect">Angular select:</label> 
      <select name="repeatSelect" 
    id="repeatSelect" 
    ng-model="repeatSelect" 
    ng-init=" repeatSelect = data[0]" 
    ng-options="option.name for option in data track by option.id"> 
</select> 
     </form> 
     <br/> <tt>Selected value: {{repeatSelect.id}}</tt> 

    </div> 
</div> 
<br/> 

Answer 3

Tất cả điều này sử dụng bỏ lỡ ng-init.

Từ các tài liệu góc:

Chỉ thị này có thể bị lạm dụng để thêm một lượng không cần thiết của logic vào các mẫu của bạn. Chỉ có một vài cách sử dụng thích hợp của ngInit, chẳng hạn như để đánh dấu các thuộc tính đặc biệt của ngRepeat, như đã thấy trong bản demo dưới đây; và để tiêm dữ liệu qua kịch bản lệnh phía máy chủ. Bên cạnh những trường hợp này, bạn nên sử dụng bộ điều khiển thay vì ngInit để khởi tạo các giá trị trên một phạm vi.

Source docs

Theo tôi cách chính xác để đặt một giá trị mặc định là chỉ cần pre-điền sở hữu ng-model của bạn với giá trị được lựa chọn từ ng-options của bạn, góc cạnh hiện phần còn lại.

Về cơ bản khi bạn xác định thuộc tính $scope, lựa chọn của bạn sẽ liên kết để gán giá trị mặc định từ mảng data của bạn. Nếu mảng data của bạn là từ một yêu cầu ajax, chỉ cần gán nó sau khi bạn có data.

.controller('test', ['$scope', function ($scope) { 
    $scope.data = [{name: 'one', id: 1}, {name: 'two', id: 2},{name: 'three', id: 3}]; 
    $scope.repeatSelect= $scope.data[0]; 
}]); 

Có một lưu ý cần lưu ý. Nếu bạn sử dụng từ khóa as trong biểu thức của mình, bạn phải chỉ định ng-model với thuộc tính thực tế mà bạn muốn chọn.

Xem đầy đủ fiddle demoing cả: http://jsfiddle.net/kb99gee8/

Answer 4

Tôi sẽ đề nghị một ví dụ HTML phần

<select class="form-control" ng-model="data.selectedOption" required ng-options="option.name as option.name for option in venueNamelists" ng-change="getmediationRooms(data.selectedOption)"></select> 

Trong điều khiển của tôi

$ scope.data = {selectedOption: $ scope.venueNamelists [ i] .name};

giá trị của mô hình phải bằng với cặp khóa, giá trị trong địa điểmNamelists.