Изменение списка в AngularJS

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 = истинное» утверждение:

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