js góc thêm giá trị của hộp kiểm để một mảng

Question

tôi có mã này:

<tr ng-repeat="doc in providers">  
    <td><input type="checkbox" ng-true-value="{{doc.provider.Id}}" ng-false-value="" ng-model="ids"></td> 
</tr> 

{{ids}} 

tôi muốn để có được các giá trị của các hộp kiểm trên một mảng

Answer 1

ng-true-value chỉ chấp nhận chuỗi, do đó bạn sẽ cần phải sử dụng giải pháp thay thế. Đây là một số feature request trong một thời gian. Trong khi đó, bạn có thể làm điều này:

Tạo một đối tượng ids trong bộ điều khiển như:

$scope.ids = {}; 

và thay đổi ng-model để tham khảo một chìa khóa trong đối tượng đó. Bạn có thể sử dụng mặc định true/false giá trị checkbox:

<td><input type="checkbox" ng-model="ids[doc.provider.Id]"></td> 

Sau đó, bạn lặp trên các phím trong ids có thể kiểm tra các true.

Here is a fiddle

Answer 2

tôi sẽ bắt đầu bằng cách nói rằng tôi thực sự không thích các tùy chọn để làm điều này trong góc. Tôi thậm chí không thể nói rằng điều này là tốt hơn so với câu trả lời được chấp nhận, nhưng nó giữ dữ liệu trong mô hình.

Markup:

<tr ng-repeat='(index, doc) in provider'> 
    <td><input type='checkbox' ng-true-value='{{doc.provider.Id}}' ng-model='ids[index]' /></td> 
</tr> 

<span ng-repeat='id in ids'>{{id}} </span> 

Bây giờ chỉ cần $ xem giá trị mảng và lọc khi nó thay đổi trong bộ điều khiển (hãy chắc chắn để vượt qua các thông số bình đẳng đối tượng):

$scope.ids = []; 

$scope.updateIds = function() { 
    $scope.ids = $scope.ids.filter(function(id) { 
     return !!id; 
    }); 
}; 

$scope.$watch('ids', $scope.updateIds, true); 

Khi tôi bắt đầu trả lời câu hỏi này, tôi nghĩ rằng các tùy chọn thành ngữ nhất sẽ là thêm một chỉ thị ng-thay đổi trên đầu vào:

<input type='checkbox' ng-true-value='{{doc.provider.Id}}' ng-model='ids[index]' ng-change='updateIds()'/> 

Thật không may điều này không hoạt động như mong đợi. Giao diện người dùng không cập nhật đúng khi xóa giá trị. Tôi cũng muốn chỉ ra rằng bạn có thể làm điều này mà không có sự chỉ lặp lại:

<input type='checkbox' ng-true-value='1' ng-model='ids.0' /> 
<input type='checkbox' ng-true-value='2' ng-model='ids.1' /> 
<input type='checkbox' ng-true-value='3' ng-model='ids.2' /> 
<input type='checkbox' ng-true-value='4' ng-model='ids.3' /> 
<input type='checkbox' ng-true-value='5' ng-model='ids.4' /> 
<input type='checkbox' ng-true-value='6' ng-model='ids.5' /> 

Trong trường hợp này, $ đồng hồ chắc chắn là tốt hơn so với thêm ng thay đổi cho mỗi đầu vào. Cuối cùng, đây là một hoạt động plunkr. Chức năng đồng hồ $ kết thúc chạy hai lần mỗi lần một hộp được chọn hoặc không được chọn, nhưng đó thực sự là cách nó phải như thế!

Answer 3

Tôi thấy rằng this directive cung cấp chức năng tôi đang tìm kiếm. Vấn đề chính tôi gặp phải với các giải pháp phổ biến hơn là tôi có hai mảng mà tôi cần để lưu trữ dữ liệu tương thích với danh sách đa lựa chọn. Danh sách kiểm traModel chỉ thị cung cấp chức năng rất cơ bản này và làm việc với nhiều mô hình.