Làm cách nào để đặt tùy chọn chọn góc mặc định làm tùy chọn cuối cùng?

Question

Tôi có mã sau đây. Tôi đang cố gắng đặt tùy chọn mặc định làm tùy chọn cuối cùng trong hộp chọn. Nếu tôi hardcode độ dài trong ng-init nó hoạt động. ng-init="mySelect = 3" Nhưng không phải với ng-init="mySelect = myData.length-1"

Mọi ý tưởng về cách đặt tùy chọn cuối cùng?

$scope.myData = ['a','b','c']; 

<select class="form-control" ng-init="mySelect = myData.length-1" ng-model="mySelect"> 
    <option ng-repeat="$index in myData" value="{{ $index }}" >Select This Option #({{ $index+1 }})</option> 
</select> 

Answer 1

Tôi có thể đạt được điều này bằng cách sử dụng ng-được chọn trong thuộc tính tùy chọn.

ng-selected="{{$index==myData.length-1}}" 

Answer 2

Sử dụng ng-selected và $index truy cập chúng tôi có điều kiện có thể thiết lập ng-selected="true" cho lựa chọn cuối cùng bằng cách kiểm tra rằng $index bằng với chỉ số cuối cùng của myData mảng của bạn (myData.length - 1). Ví dụ:

<option ng-selected="{{$index === myData.length - 1}}"></option> 

Hoặc như @ wickY26 chỉ ra, chúng ta cũng có thể thực hiện điều này bằng $last:

<option ng-selected="$last"></option> 

Bạn tuy nhiên nên có một cái nhìn tại ng-options directive mà là một thực hiện cụ thể của hành vi ng-repeat nhưng đối với <select> yếu tố:

<select 
    class="form-control" 
    ng-init="mySelect = myData[myData.length - 1]" 
    ng-model="mySelect" 
    ng-options="data for data in myData"> 
</select> 

Answer 3

Hãy thử điều này:

<select class="form-control" ng-model="mySelect" 
ng-options="item for item in myData" ng-init="mySelect = myData[myData.length -1]"> 
</select> 

Answer 4

Toàn bộ điểm góc (hoặc các khung MVVM khác) là bạn có thể lý giải điều khoản của ViewModel và có Chế độ xem bị ràng buộc phản ánh nó.

Điều đó có nghĩa là nếu bạn cần thứ gì đó được chọn hoặc một số giá trị đặt trước <input type="checkbox"> - chỉ cần gán trạng thái mong muốn cho ViewModel.

Trong trường hợp của bạn, hãy gán mySelect cho những gì bạn cần ViewModel được chỉ định theo mặc định. Và Chế độ xem sẽ theo sau.

$scope.myData = ['a','b','c']; 
$scope.mySelect = $scope.myData[$scope.myData.length - 1]; // last value 

<select ng-model="mySelect"> 
    <option ng-repeat="item in myData" value="item">{{item}}</option> 
</select> 

Không liên quan đến câu hỏi, nhưng nó tốt hơn để sử dụng ng-options thay vì ng-repeat, nhưng cùng một ý tưởng áp dụng:

<select ng-model="mySelect" 
     ng-options="item for item in myData"> 
</select> 

Chỉ cần sử dụng ng-selected không làm thay đổi mô hình cơ bản, đó là điều cuối cùng quan trọng trong ứng dụng Góc.