hai cách ràng buộc không làm việc với ng-repeat

Question

tôi có một danh sách ng-repeat đơn giản, trong đó tôi đang gán giá trị danh mục hiện tại để sở hữu khác trên bộ điều khiển như sau:

<li ng-repeat="num in list"> 
    <input type="text" ng-init="value = num" ng-model="value" /> 
    <button type="button" class="btn btn-primary" ng-click="save()">Save</button> 
    </li> 

Nhưng khi tôi bấm nút Lưu tôi nhận giá trị mặc định được đặt cho $ scope.value. Tôi hy vọng giá trị cho văn bản đầu vào cụ thể sẽ được hiển thị.

Dưới đây là bộ điều khiển:

angular.module('myApp', []) 
    .controller('MyController', function($scope){ 
     $scope.value = false; 
     $scope.list = [0, 1, 2, 3, 4]; 

     $scope.save = function() { 
     alert($scope.value); 
     } 
    }); 

Làm thế nào tôi có thể truy cập vào các giá trị cập nhật của một mục nhập trong điều khiển của tôi trên lưu chức năng cuộc gọi.

Đây là plunker cho cùng: plnkr

Cập nhật: Tôi đang mong đợi giá trị được lấy để điều khiển mà không cần đi qua nó như một tham số.

Answer 1

ở đây nó là cách bạn có thể làm điều đó

<li ng-repeat="num in list"> 
    <input type="text" ng-init="value = num" ng-model="value" /> 
    <button type="button" class="btn btn-primary" ng-click="save(value)">Save</button> 
    </li> 


angular.module('myApp', []) 
    .controller('MyController', function($scope){ 
     $scope.value = false; 
     $scope.list = [0, 1, 2, 3, 4]; 

     $scope.save = function(argument) { 
     $scope.value = argument; 
     alert($scope.value); 
     } 
    }); 

Answer 2

Cho phép không lạm dụng biểu thức "2 cách ràng buộc";)

điều khiển của bạn có một phạm vi và có chỉ là một $scope.value là ở chỗ phạm vi. Bạn không thể ép buộc phải có nhiều giá trị đồng thời.

ng-repeat tạo phạm vi mới cho mỗi li. Và ngay cả khi bạn cố gắng sử dụng $parent.value, bộ điều khiển của bạn $scope.value sẽ chỉ có giá trị được gán cuối cùng trong ng-init

Bạn đặt cược tốt nhất trong trường hợp này để chuyển giá trị làm đối số. Hy vọng điều này đã giúp giải thích vấn đề nhiều hơn một chút. Đúng nếu tôi đã sai lầm.

Answer 3

Ngắt lại tạo phạm vi, vì vậy, đối tượng được chuyển theo tham chiếu và số theo giá trị. Mã của bạn có vấn đề, nếu bạn cập nhật thành công giá trị, nó sẽ cập nhật tất cả các số trong ng-repeat. Bạn có thể làm điều này:

html

{{value.val}} <!-- for check the value --> 
<li ng-repeat="num in list"> 
    <input type="text" ng-model="num" /> 
    <button type="button" class="btn btn-primary" ng-click="value.val=num">Save</button> 
    </li> 

javascript

angular.module('myApp', []) 
    .controller('MyController', function($scope){ 
     $scope.value = {val:false}; 
     $scope.list = [0,1,2,3,4]; 
}); 

http://jsfiddle.net/oq6zdeLd/

Tôi xin lỗi về tiếng anh của tôi ...

Answer 4

Wo Tôi không thể tin rằng hầu hết mọi người đã bỏ lỡ điều này. Nếu bạn đang sử dụng Angular 1.2 thì chắc chắn bạn nên kiểm tra track by từ khóa trong chỉ thị ngRepeat của bạn.

<li ng-repeat="num in list track by $index"> 
    <input type="text" ng-model="list[$index]" /> 
    <button type="button" class="btn btn-primary" ng-click="save()">Save</button> 
</li> 

Tóm lại là tránh xa các kiểu dữ liệu khi ràng buộc vì nó sẽ cung cấp cho bạn đồng bộ hóa các vấn đề.

Fellas vui lòng dành nhiều thời gian và công sức vào nghiên cứu các giải pháp thay vì chỉ đăng bài cho điểm.

Hy vọng điều này sẽ hữu ích!