AngularJS: How do I hide clicked element in angular?

Question

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

Satpal · Accepted Answer · 2014-02-07 19:02:32Z

4

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

answered Feb 7, 2014 at 19:02

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

malena Over a year ago

I was wondering how that worked with ng-hide. Thank you!! Works great!

Foo L Over a year ago

I think you can also skip the function: ng-click="fruit.hide=true"

Satpal Over a year ago

@FooL, But OP might need to do some operations in that method

Foo L Over a year ago

@Satpal, true, this is a good gold plated answer. i'm trying to provide the simplest answer to the original question "how do I hide the element when clicked?" :) both works

Satpal Over a year ago

@FooL, I totally agree with your solution and that will work. No doubt in that

Collectives™ on Stack Overflow

AngularJS: How do I hide clicked element in angular?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related