Patrickkx Patrickkx - 1 month ago 5
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>{{ product.name }}</strong> - {{ product.price | currency }}
</li>
</ul>
</div>


And the Angular code:

$scope.addToShoppingList = function(id){

};


I just want the
id
element to disappear (hide, fadeOut etc), when it's clicked. I bet it's something about the
ng-hide
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){
$scope.itemsToBuy.push($scope.drinks[id]);
};


When the
li
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

You could do something like this:

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

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){
       $scope.itemsToBuy.push(item);
       $scope.results.splice($scope.results.indexOf(item),1);
    }
}

JS Fiddle on the same: http://jsfiddle.net/59gdo817/

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