AngularJS: Скрыть литий элемент, когда он нажал

Question

У меня есть HTML код:

<div class="col-xs-6"> 
    <ul class="list-group itemList"> 
    <li class="list-group-item" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id)"> 
    <strong>{{ product.name }}</strong> - {{ product.price | currency }} 
    </li> 
    </ul> 
</div> 

и угловой код:

$scope.addToShoppingList = function(id){ 

}; 

Я просто хочу id элемента исчезнуть (скрыть, FADEOUT и т.д.) , когда он щелкнут. Бьюсь об заклад, это что-то о ng-hide, но пока я слишком думби для этого.

Спасибо за любые ответы.

Редактировать: Он должен находиться внутри функции addToShoppingList.

Edit2: Это целая функция:

$scope.addToShoppingList = function(id){ 
    $scope.itemsToBuy.push($scope.drinks[id]); 
}; 

Когда li элемент щелкнул, он толкает этот элемент в новый массив. И тогда это должно быть скрыто.

Edit3: Если я хочу отменить его и вернуть элементы в массив, результат будет странным.

Answer 1

Вы могли бы сделать что-то вроде этого:

<div ng-controller="MyCtrl2"> 
    <h2>Hide each LI:</h2> 
    <ul> 
     <li ng-click="pushItem(suggestion)" ng-repeat="suggestion in results" ng-click="visible = false"> 
      {{suggestion}} 
     </li> 
    </ul> 
</div> 

Ниже угловой код:

var myApp = angular.module('myApp',[]); 

function MyCtrl2($scope) { 
    $scope.results = [1, 2, 3, 4]; 

    $scope.itemsToBuy = []; 
    $scope.pushItem = function(item){ 
     $scope.itemsToBuy.push(item); 
     $scope.results.splice($scope.results.indexOf(item),1); 
    } 
} 

JS Fiddle на том же: http://jsfiddle.net/59gdo817/

На вице- наоборот, просто add the item back to results array, чтобы показать li обратно.

Answer 2

Вы можете добавить новый статус в массив $scope.drinks под названием isHidden, который будет отслеживать, скрыт или нет объект. Когда пользователь нажимает на это li, функция будет устанавливать isHidden на значение true, а ng-hide немедленно заставит его скрыться от DOM.

<div class="col-xs-6"> 
    <ul class="list-group itemList"> 
    <li class="list-group-item" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id)" ng-hide="product.isHidden===true"> 
    <strong>{{ product.name }}</strong> - {{ product.price | currency }} 
    </li> 
    </ul> 
</div> 

$scope.addToShoppingList = function(id){ 
    $scope.itemsToBuy.push($scope.drinks[id]); 
    $scope.drinks[id].isHidden = true; 
}; 

Answer 3

Как об этом:

<div class="col-xs-6"> 
    <ul class="list-group itemList"> 
    <li class="list-group-item" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id);" ng-hide='product.hidden'> 
    <strong>{{ product.name }}</strong> - {{ product.price | currency }} 
    </li> 
    </ul> 
</div> 

И в вашем addToShoppingList, вы можете установить продукт скрытых:

$scope.addToShoppingList = function(id){ 
    $scope.itemsToBuy.push($scope.drinks[id]); 
    $scope.drinks[id].hidden = true; 
};