AngularJS: How do I hide clicked element in angular?

angularjs, angularjs-ng-repeat, angularjs-scope, javascript, ng-hide

Solution

You can use ngHide directive. In Example added a property hide, ngHide will hide li if this property is true.

HTML

<li ng-repeat="fruit in fruits" ng-hide="fruit.hide">
    <p>{{fruit.name}}</p>
    <button ng-click="hideMe(fruit)">hide li</button>
</li>

Angularjs Method

$scope.hideMe = function (fruit) {
    fruit.hide=true;
    alert('hide this li');
};

DEMO

Problem

I'm totally new to angular and I'm finding that doing simple things aren't as obvious to me? I have a list of items that I display using ng-repeat. I simply want to hide the element once I click on an element within that scope. I'd like to do it the "angular" way with good practices.. just not sure what that is. This is html ``` <div ng-app="myApp"> <div ng-controller="FruitsCtrl"> <ul> <li ng-repeat="fruit in fruits"> <p>{{fruit.name}}</p> <button ng-click="hideMe()">hide li</button> </li> </ul> </div> </div> ``` This is my js ``` var myApp = angular.module('myApp', []); myApp.factory('Fruits', function () { var Fruits = [{ name: "banana" }, { name: "watermelon" }, { name: "strawberry" }]; return Fruits; }); function FruitsCtrl($scope, Fruits) { $scope.fruits = Fruits; $scope.hideMe = function () { alert('hide this li'); }; } ``` I have this on jsfiddle: http://jsfiddle.net/hS5q8/2/ Help or direction would be great! Thanks!!

Original source