Question

我目前在我的webapp中有一个复选框列表。我想显示已选中复选框的顺序。所以我写了下面的代码。

$scope.updateNumbers = function(id, checked, inputs) {
    if (checked === true) {
        $scope.count += 1;
        var span = angular.element('#'+id+'-'+id);
        span.html($scope.count);
    } else {
        if ($scope.count != 0) {
            $scope.count -= 1;
        }

        for (index = 0; index < inputs.length; ++index) {
            var input = inputs[index];

            var span = angular.element('#'+test.id+'-'+test.id);
            if (span.html() > $scope.count || span.html() == $scope.count) {
                span.html(span.html()-1);
            }
        }

        var span = angular.element('#'+id+'-'+id);
        span.html($scope.count);
    }
}

这个HTML

<div class="list-view__body__row" ng-repeat="restaurant in restaurants">
    <div class="list-view__body__cell">
        <input type="checkbox" id="<% restaurant.id %>" value="" 
          class="input-field__checkbox--input" 
          ng-model="restaurant.checked" 
          ng-change="updateNumbers(restaurant.id, restaurant.checked, restaurants)">
        <label for="<% restaurant.id %>" 
          class="input-field__checkbox--label" 
          ng-bind-html="restaurant.name|html"></label>
    </div>
    <div class="list-view__body__cell">
        <div class="order__wrapper" ng-show="restaurant.checked">
            <span id="<% restaurant.id %>-<% restaurant.id %>">0</span>
        </div>
    </div>
</div>

在当前的实现中，有时数字会下降到0或数字会出现两次。它无法正常工作，那么我该如何改进此代码？

Answer 1

使用angular，您始终希望数据模型能够驱动视图。请注意，以下解决方案不需要dom操作代码，并且角度根据数据管理dom。它也只需要很少的代码。

您需要的只是数据模型中已检查餐厅的数组。

然后顺序由该数组中的索引确定，count是数组的长度。

控制器：

  // array to store selections
  $scope.checkedItems=[];

  $scope.updateSelections = function(rest){        
    if(rest.checked){
      // add to array if item is checked
      $scope.checkedItems.push(rest)
    }else{
      // remove from array if not checked
      $scope.checkedItems.splice($scope.checkedItems.indexOf(rest),1)
    }
  }

查看：

<div ng-repeat="restaurant in restaurants">
    <div>
      <input type="checkbox" ng-model="restaurant.checked" 
             ng-change="updateSelections(restaurant)">
      <label ng-bind="restaurant.name"></label>
    </div>        
    <div ng-show="restaurant.checked">
        <!--   Use index to display order -->
        Order: <span>{{checkedItems.indexOf(restaurant) +1}}</span>
    </div>        
  </div>

  <h3>Count of checked items: {{checkedItems.length}}</h3>

的 DEMO

如何在AngularJS中注册复选框的顺序？

1 个答案: