Hiding individual divs in ng-repeat loop

Question

I have a ng-repeat loop, which displays individual panels (one for each loop iteration). In each panel I have a 'mark as read' button that has a ng-click event. I want to be able to hide the panel that the mark as read button is clicked on, but so far I can only get all the panels to show and hide, not the individual selected panel. How can I get the ng-click to hide the selected panel?

Thanks

Sorry here is some code of what I am doing now:

The panel section:

<section class="card" ng-repeat="item in notifications" ng-hide="msgRead">
        <div class="item item-header notification wrap">
            <h2>{{item.title}}</h2>
            <div class="notification-content">
                {{item.text}}
            </div>
            <button class="button button-block button-stable" ng-click="markAsRead(item.id)">
                Mark As Read
            </button>
        </div>
    </section>

And this is my controller function:

$scope.msgRead = true;

$scope.markAsRead = function (id) {

    $scope.msgRead = $scope.msgRead === false ? true : false;
};

Stephen

You could add a `visible` property to your model (`items`) , have your `markAsRead(item.id)` change that as well, then bind `ng-show` to the visible property — Balázs Édes, Jan 27 '15 at 09:13

score -1 · Answer 1 · answered Jan 27 '15 at 09:13

You can write like:

<section class="card" ng-repeat="item in notifications" ng-hide="item.readonly">
    <div class="item item-header notification wrap">
        <h2>{{item.title}}</h2>
        <div class="notification-content">
            {{item.text}}
        </div>
        <button class="button button-block button-stable" ng-click="item.readonly = true">
            Mark As Read
        </button>
    </div>
</section>

You don't need to write a scope method for this.

Needs more explanation for what was changed from the original question with = true — akahunahi, Jan 10 '17 at 01:36

Hiding individual divs in ng-repeat loop

1 Answers1