Patrickkx Patrickkx - 9 months ago 61
AngularJS Question

AngularJS: Hide li element when it's clicked

I have a html code:

<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>{{ }}</strong> - {{ product.price | currency }}

And the Angular code:

$scope.addToShoppingList = function(id){


I just want the
element to disappear (hide, fadeOut etc), when it's clicked. I bet it's something about the
but for now I'm too dumby for that.

Thanks for any answers.

Edit: It should be inside the addToShoppingList function.

Edit2: This is the whole function:

$scope.addToShoppingList = function(id){

When the
element is clicked, it pushes that element to the new array. And then it should be hidden.

Edit3: If I want to cancel it and make the items come back to the array, the result is strange.enter image description here

Answer Source

You could do something like this:

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

Below is the angular code:

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

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

    $scope.itemsToBuy = [];
    $scope.pushItem = function(item){

JS Fiddle on the same:

On the vice-versa, just add the item back to results array to show the li back.