AngularJs và <select>: Các tùy chọn được chọn mặc định sẽ bị xóa

Question

Tôi hy vọng mã sau đây sẽ hiển thị danh sách thả xuống với tùy chọn thứ ba được chọn theo mặc định. Tuy nhiên, khi tôi liên kết lựa chọn với angularjs, lựa chọn mặc định biến mất. Bất cứ suy nghĩ nào?

var myApp = angular.module('myApp', []); 

... 

<div> 
    <select id="myselection" ng-model="selectedColors"> 
    <option value="1" >Red</option> 
    <option value="2">Blue</option> 
    <option value="3" selected="selected">Green</option> 
    </select> 

    <div> 
    Selected Colors: {{selectedColors }} 
    </div> 
</div> 

Dưới đây là một ví dụ làm việc: http://jsfiddle.net/TXPJZ/134/

Cảm ơn!

Answer 1

Cách dễ nhất để sửa lỗi triển khai của bạn là sử dụng ng-init.

<div> 
    <select id="myselection" ng-init="selectedColors=3" ng-model="selectedColors"> 
     <option value="1">Red</option> 
     <option value="2">Blue</option> 
     <option value="3">Green</option> 
    </select> 
    <div>Selected Colors: {{selectedColors }}</div> 
</div> 

Dùng thử trên FIDDLE.

Answer 2

Góc ghi đè thuộc tính "đã chọn" khi bạn liên kết lựa chọn với mô hình. Nếu bạn kiểm tra DOM được hiển thị, bạn sẽ thấy rằng một mục mới đã được thêm vào:

<option value="? undefined:undefined ?"></option> 

Để tự động chọn tùy chọn thứ ba bạn cần điền trước mô hình trong phạm vi. Có một số cách để thực hiện việc này, bao gồm cả việc chọn lựa trong bộ điều khiển:

<div ng-controller="MyCtrl"> 
    <select id="myselection" ng-model="selectedColors"> 
     <option value="1">Red</option> 
     <option value="2">Blue</option> 
     <option value="3">Green</option> 
    </select> 
<div>Selected Colors: {{selectedColors }}</div> 

Và sau đó xác định mô hình đó trong bộ điều khiển.

var myApp = angular.module('myApp', []) 
    .controller('MyCtrl', ['$scope', function ($scope) { 
    $scope.selectedColors = 2; 
}]); 

Đây là ví dụ đang chạy.

http://jsfiddle.net/93926/

Ngoài ra, bạn có thể chỉ cần khởi tạo nó bằng cách sử ng-init như trong ví dụ này:

<div ng-init="selectedColors=3"> 

http://jsfiddle.net/9JxqA/1/

EDIT: Loại bỏ các thuộc tính được chọn trong ví dụ đầu tiên, đó là không cần nữa.

Answer 3

Bằng cách thêm tùy chọn có giá trị trống để chọn và khởi tạo các màu được chọn thành chuỗi rỗng (ng-init = "selectedColors = ''"), chúng ta có thể thấy tùy chọn 'chọn màu' ở trên đầu thay vì chọn màu đầu tiên :

<div> 
<select id="myselection" ng-init="selectedColors=''" ng-model="selectedColors"> 
    <option value="">Select Color</option> 
    <option value="1">Red</option> 
    <option value="2">Blue</option> 
    <option value="3">Green</option> 
</select> 
<div>Selected Colors: {{selectedColors }}</div> 

Thử nó trên Fiddle http://jsfiddle.net/CodecPM/qxyckf7u/

Answer 4

Bạn cần phải làm chỉ có hai điều 1) ng-init = "ngày = 'noday" 2) ng-selected =" đúng "

<select class="filtersday" ng-init="days='noday'" ng-model="days"> 
<option ng-selected="true" value="noday">--Select Day--</option> 

Answer 5

Dùng ng-selected = "true"

Kiểm tra mã bên dưới:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<select ng-model="foo" ng-app > 
 
    <option value="1">1</option> 
 
    <option ng-selected="true" value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
</select>