Question

46

AngularJS: How do I hide clicked element in angular?

rated 0 times [ 51] [ 5] / answers: 1 / hits: 5762 / 11 Years ago, fri, february 7, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

margob

Add To Favorites

Follow

Total Points: 302

Total Questions: 89

Total Answers: 100

Location: Guadeloupe

Member since Sat, Jul 25, 2020

4 Years ago

answered 11 Years ago reed · Accepted Answer

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