AngularJS：单击时隐藏li元素

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>

Angular代码：

$scope.addToShoppingList = function(id){

};

我只是希望id元素在点击时消失（隐藏，fadeOut等）。我打赌这是关于ng-hide的事情，但是现在我对此太过愚蠢了。

感谢您的回答。

编辑：它应该在addToShoppingList函数中。

Edit2 ：这是整个功能：

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

单击li元素时，会将该元素推送到新数组。然后它应该被隐藏。

Edit3 ：如果我想取消它并让这些项目返回数组，结果很奇怪。

Answer 1

您可以向名为$scope.drinks的{​​{1}}数组添加新状态，该数组将跟踪该项目是否隐藏。当用户点击isHidden时，该函数会将li设置为true，而isHidden会立即使其隐藏在DOM中。

ng-hide

Answer 2

你可以这样做：

<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小提琴同样如此： http://jsfiddle.net/59gdo817/

反之亦然，只需add the item back to results array即可显示回来。

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;
};