Liên kết đối tượng JSON với nút radio trong angularjs

Question

Vì vậy, tôi đang cố gắng kết buộc các nút radio với các đối tượng. Tôi đã dành một giờ để cố gắng tìm ra điều này và cuối cùng thừa nhận thất bại. Đây là những gì tôi nhận:

<table> 
     <tr ng-repeat="theCustomer in customers"> 
      <td> 
       <input type="radio" ng-model="currentCustomer" value="theCustomer" id="{{theCustomer.id}}" ng-change="currentCustomer = theCustomer"> 
       <label for="{{theCustomer.id}}">{{theCustomer.name}}</label> 
      </td> 
     </tr> 
</table> 

Những thứ góc:

bankApp.controller("BankController", function ($scope, CustomerRepository) 
{ 
    $scope.customers = []; 
    $scope.currentCustomer = {}; 

    $scope.createCustomer = function() { 
     CustomerRepository.save($scope.customer, function (customer) { 
      $scope.customers.push(customer); 
      $scope.customer = {}; 
     }); 
    }; 
}); 

Hiện nay, khi tôi cố gắng và nhấp chuột vào một nút radio có gì xảy ra, nó thậm chí không đánh dấu được kiểm tra. Tôi chắc rằng có một giải pháp thực sự đơn giản cho việc này. Mục tiêu cuối cùng là để có currentCustomer giữ khách hàng phản ánh trong lựa chọn radio.

Answer 1

<input type="radio" ng-model="$parent.currentCustomer" name="foo" ng-value="theCustomer" id="{{theCustomer.id}}">{{theCustomer.name}}</td> 

Mấu chốt ở đây là ng-value="theCustomer. Đây là cách mà angular biết đối tượng nào được chọn. Html value chỉ biết giá trị chuỗi và không thể ánh xạ tới đối tượng.

Nếu bạn chèn mã trên, radio sẽ phản ánh mô hình, ngay cả khi nó được thay đổi theo chương trình. Ngoài ra, bạn không thể quên $parent trong ng-model vì ng-repeat tạo ra một phạm vi mới.

Answer 2

Rõ ràng, việc nhóm radio hoạt động bên trong một ng-lặp lại có thể hơi phức tạp một chút. Vấn đề là với ng-repeat tạo phạm vi con của riêng nó. Một giải pháp là liên kết mô hình với $ parent. This thread đưa ra một ví dụ.

Tôi cũng đã tạo một working fiddle gần giống với ví dụ của bạn hơn.

Về bản chất, tôi nghĩ html của bạn là điểm duy nhất mà cần làm lại:

<table> 
     <tr ng-repeat="theCustomer in customers"> 
      <td><input type="radio" ng-model="$parent.currentCustomer" name="foo" value="{{theCustomer}}" id="{{theCustomer.id}}">{{theCustomer.name}}</td> 
     </tr> 
    </table> 

Answer 3

Đó là bởi vì các thừa kế phạm vi, bạn có thể đọc thêm về các vấn đề here.

Một trong những giải pháp mà tôi sử dụng trong trường hợp này là liên kết đối tượng với thuộc tính đối tượng thay vì giá trị nguyên thủy như ng-model="form.currentCustomer".

Demo: Plunker