Nút radio được chọn theo mặc định khi sử dụng ng-repeat

Question

Tôi đã muốn có nút radio được kiểm tra trong danh sách các nút radio mà tôi trình bày trên màn hình bằng ng-repeat, nhưng mã của tôi không hoạt động. Đây là những gì tôi đang làm:

<div class="clubRole" data-ng-if="club.checked"> 
    <div data-ng-repeat="role in securityGroups.slice(0,1)"> 
     <input type="radio" class="clubRole" data-ng-model="club.role" data-ng-value="role.securityGroupCode" checked="checked"> {{role.description}} 
    </div> 
    <div data-ng-repeat="role in securityGroups.slice(1,securityGroups.length+1)"> 
     <input type="radio" class="clubRole" data-ng-model="club.role" data-ng-value="role.securityGroupCode"> {{role.description}} 
    </div>  
</div> 

Mục đích của mã là chọn nút radio đầu tiên và các nút khác được bỏ chọn. Mã đó có vấn đề: nó không hoạt động. Nhưng ít nhất nó đưa ra ý tưởng về những gì tôi đang cố gắng làm: Tôi muốn một trong các nút radio được kiểm tra theo mặc định, bất kể nó là cái gì.

Answer 1

nút radio sẽ được kiểm tra xem giá trị của thuộc tính đầu vào tương đương với giá trị của phương thức được áp dụng trên nút radio.

<div ng-repeat="val in ['a','b','c']"> 
    <input 
      type="radio" 
      name="val" 
      data-ng-model="role" 
      data-ng-value="val" 
      ng-init="$index==0?(role=val):''" 
     /> 
    {{val}} 
</div> 

Đã kiểm tra = "đã đánh dấu" sẽ không hoạt động trong bối cảnh góc cạnh. Bạn có thể thiết lập giá trị của nút radio một cách rõ ràng trong bộ điều khiển hoặc bạn có thể quản lý nó trong khung nhìn giống như tôi đã làm trong ví dụ trên. Nhưng phương thức nên được cân bằng theo thuộc tính value trên phần tử inmput.

Ví dụ: nếu phương thức là x trên ba nút radio và mỗi nút radio có giá trị khác nhau như a, b và c. thì x phải bằng bất kỳ giá trị nào cần kiểm tra.

Plunker

Answer 2

Bạn không cần checked="checked", tôi nghĩ góc cạnh sẽ tự lo liệu nếu bạn đặt mô hình thành một trong các giá trị. Một cái gì đó như:

club.role = securityGroups.slice(0,1)[0].securityGroupCode; 

Ngoài ra, phạm vi có thể vấp bạn lên đây, mô hình có thể phải $parent.club.role

Answer 3

Bạn không cần phải lo lắng về việc kiểm tra.

HTML:

<div ng-app="app"> 
<div ng-controller="mainController"> 
    <label ng-repeat="option in options"> 
     <input type="radio" ng-model="$parent.selected" ng-value="option"/>{{option}} 
    </label> 
</div> 
</div> 

JavaScript: fiddle

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

appModule.controller('mainController', function($scope) { 

$scope.selected = 'red'; 
$scope.options = ['red', 'blue', 'yellow', 'green']; 

}); 

Làm việc ở đây: https://jsfiddle.net/qnw8ogrk/1/

Answer 4

nếu bạn sử dụng một loại nguyên thủy trong danh sách, câu trả lời của bm1729 là đúng, nhưng nếu bạn sử dụng các đối tượng trong danh sách, sau đó xem ví dụ này: https://jsfiddle.net/9chd58mk/2/

phần đầu tiên là xấu, bởi vì đối tượng được chọn trông giống với một mục danh sách, nhưng nó không giống nhau bằng tham chiếu. toán tử == là false trong trường hợp này

$scope.selected = {c:'red'}; 
$scope.options = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}]; 

nhưng ví dụ thứ hai và thứ ba sử dụng tham chiếu mục danh sách và nút radio được chọn. các toán tử == là đúng trong trường hợp này

$scope.options3 = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}]; 
$scope.selected3 = $scope.options3[0];