Question

尝试在没有复选框的情况下点击列表项。我希望这些项目在点击时获得通过，并且最后仍然有删除选项。这功能正常，但我似乎无法维持当我尝试使项目可点击时。我如何修改此代码才能使其正常工作？

    <p class="lead" ng-bind="vm.list.content"></p>
  <div class="list-group">
    <span data-ng-repeat="item in vm.list.items|orderBy:'name'"
       class="list-group-item" ng-class="{strike: item.check}">
       <input type="checkbox" ng-model="item.check" ng-click="vm.cross(item)">
       <a class="btn btn-default pull-right" ng-click="vm.remove(item)">
      <i class="glyphicon glyphicon-trash"></i></a>
      <h4 class="list-group-item-heading" ng-bind="item.name + ' - ' + item.priority"></h4>
    </span>
  </div>

控制器：

function remove(item){
  var removedItem = $scope.vm.list.items.indexOf(item);
  $scope.vm.list.items.splice(removedItem, 1);

  if (vm.list._id) {
    vm.list.$update(successCallback, errorCallback);
  } else {
    vm.list.$save(successCallback, errorCallback);
  }

        function successCallback(res) {
    $state.go('lists.view', {
      listId: res._id
    });
  }

  function errorCallback(res) {
    vm.error = res.data.message;}
}

function cross(item){

  if (vm.list._id) {
    vm.list.$update(successCallback, errorCallback);
  } else {
    vm.list.$save(successCallback, errorCallback);
  }

        function successCallback(res) {
    $state.go('lists.view', {
      listId: res._id
    });
  }

  function errorCallback(res) {
    vm.error = res.data.message;}
}

Answer 1

为什么不将复选框行为移动到项目包装器？在这种情况下，如果单击废纸篓，则不会触发外部单击处理程序，因为我们会阻止事件进一步传播。

<div class="list-group">
    <span data-ng-repeat="item in vm.list.items|orderBy:'name'" class="list-group-item" ng-class="{strike: item.check}" ng-click="item.check = true; vm.cross(item)">
        <a class="btn btn-default pull-right" ng-click="vm.remove(item);$event.stopPropagation();">
            <i class="glyphicon glyphicon-trash"></i>
        </a>
        <h4 class="list-group-item-heading" ng-bind="item.name + ' - ' + item.priority"></h4>
    </span>
</div>

如果你想逐个交叉/不交叉项目，你可以实现像toggleCross这样的方法，而不是使用它来代替“item.check = true”语句：

item.toggleCheck = function() {
    this.check = !this.check;
}

修改AngularJS中的列表

1 个答案: