如何将字符串数组值的总和绑定到 $scope

Question

我正在尝试绑定表格中选定复选框的总和。我快到了，但我无法弄清楚我做错了什么。图为2个选中框

您会看到我的代码的结果。如果有更好的解决方法，我愿意接受建议。

  $http.get('/api/Products/').success(function (data, status) { $scope.productList = data; });
    $scope.selection = [];
    $scope.OrderAmount = []
    $scope.myTotal = 0;
    $scope.toggleSelection = function toggleSelection(ProductId) {
        var idx = $scope.selection.indexOf(ProductId);
        if (idx > -1) {
            $scope.selection.splice(idx, 1);
        }
        else {
            $scope.selection.push(ProductId);
        }

        for (var i = 0; i < $scope.selection.length; i++) {
            var OrderProductId = $scope.selection[i]
            var data = Enumerable.From($scope.productList).Where("x => x.ProductId == '" + OrderProductId + "'").ToArray();

            $scope.OrderAmount.push(data[0].ProductPrice)

     // $scope.OrderAmount = ["8500", "8500"]

            for (var i = 0, len = $scope.OrderAmount.length; i < len; i++) {
                $scope.myTotal += $scope.OrderAmount[i][0];
            };
        };

        $scope.$watch('myTotal', function (value) {
            $scope.model.OrderAmount = value;
        });
    };

查看

<table class="table">
    <th>Product</th>
    <th>Price</th>
    <tbody>
      <tr ng-repeat="model in products">
        <td>
           <div class="toggle-switch" data-ts-color="blue">
             <input id="{{model.ProductId}}" type="checkbox" hidden="hidden" ng-checked="selection.indexOf(model.ProductId) > -1" ng-click="toggleSelection(model.ProductId)">
            <label for="{{model.ProductId}}" class="ts-helper"></label>
           </div>
        </td>
        <td>{{model.ProductName}}</td>
        <td>{{model.ProductPrice}}</td>
       </tr>
     </tbody>
   </table>

  <div class="form-group">
            <input type="text" ng-model="model.OrderAmount" class="form-control fg-input">
   </div>

更新到第一个答案

Answer 1

您正在错误地进行数据绑定。检查状态应使用ng-model 绑定，而不是ng-checked。您可以通过在model 中使用属性（在示例中为checked）来简化此操作，然后遍历products 以计算总和。

<tr ng-repeat="model in products">
    <td>
       <div class="toggle-switch" data-ts-color="blue">
           <input id="{{model.ProductId}}" type="checkbox" hidden="hidden" ng-model="model.checked" ng-click="toggleSelection()">
           <label for="{{model.ProductId}}" class="ts-helper"></label>
       </div>
    </td>
    <td>{{model.ProductName}}</td>
    <td>{{model.ProductPrice}}</td>
</tr>

控制器：

$scope.toggleSelection = function() {
    var sum = 0;
    angular.forEach($scope.products, function(value){
        if (value.checked) sum += value.ProductPrice;
    });

    $scope.model.OrderAmount = sum;
}