ng-lặp lại - đếm trong vòng lặp html

Question

Có cách nào để đếm một mục, sau đó hiển thị nó bên ngoài vòng lặp không?

<tr ng-repeat="value in values"> 
    <td>value.total</td> 
</tr> 
<tr> 
    <td>Total Of All Values: {{ total }}</td> 
</tr> 

Tôi đã thử sử dụng ng-init() để không thành công như tôi nghĩ rằng nó vượt quá mỗi lần.

<tr ng-repeat="value in values"> 
    <td ng-init="total = total + value.total>value.total</td> 
</tr> 
<tr> 
    <td>Total Of All Values: {{ total }}</td> 
</tr> 

Có cách nào để thực hiện việc này tại đây mà không có chức năng trong bộ điều khiển của tôi không?

Answer 1

total đó được khởi tạo trong ng-repeat sẽ có một phạm vi khác nhau và không thể được truy cập bên ngoài vòng lặp.

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

<table ng-init="total = 0"> 
<tr ng-repeat="value in values"> 
    <td ng-init="$parent.total = $parent.total + value.total">{{value.total}}</td> 
</tr> 
<tr> 
    <td>Total Of All Values: {{ total }}</td> 
</tr> 
</table> 

Answer 2

Bạn có thể sử dụng ký hiệu $ parent để truy cập biến $ scope (từ bên ngoài ng-repeat) trong phạm vi ng-repeat. Vì vậy, bây giờ sau khi khởi tạo nó sẽ tính toán tổng số và lưu nó trong biến $ scope được khởi tạo bên ngoài.

Code:

<div ng-app ng-controller="test"> 
    <table ng-init="total=0;"> 
     <tr ng-repeat="value in values"> 
      <td ng-init="$parent.total = total + value">{{value}}</td> 
     </tr> 
     <tr> 
      <td>Total Of All Values: {{ total }}</td> 
     </tr> 
    </table> 
</div> 

Working Fiddle

Answer 3

Mặc dù họ dường như tương tự ngRepeat không hoạt động giống như một vòng lặp for trong một ngôn ngữ lập trình bắt buộc. Chỉ thị ngRepeat bao gồm hai bước chạy riêng biệt. Đầu tiên, nó tạo ra một mảng/một bản đồ với các giá trị lặp lại. Thứ hai, nó biểu thị khuôn mẫu (các phần tử bên trong phần tử với ngRepeat) cho mỗi giá trị lặp lại. Tuy nhiên nó không lặp qua một khối mã như một ngôn ngữ lập trình bắt buộc.

Mặc dù bạn có thể đạt được những gì bạn cố gắng làm với $parent.total, bạn có thể gặp phải những cạm bẫy khác với giải pháp này ngay khi nội dung của thay đổi mảng của bạn. Để cắt ngắn, bạn nên tìm cách khác để tổng hợp các giá trị trong mảng.

Theo tôi, nơi tốt nhất để tổng hợp các giá trị là bộ điều khiển với một dòng như thế này:

$scope.total = values.reduce(function (a,b) {return a+b}); 

Answer 4

Bạn luôn có thể làm điều này trong chức năng JS của bạn.

 $scope.values = data; 
     angular.forEach($scope.values,function(value){ 
      $scope.total += value.value; 
     }); 

plunker làm việc: http://plnkr.co/edit/5WZ9alCXzq115wi3xl4B?p=preview