When Ng-click do ng-show on the clicked element in a ng-repeat

Question

I am trying to have a element show certain text during a load. The issue that I run into is the elements are repeated in the ng-repeat. When I click on one they all switch vs. just that element. I am not sure how to just target one.

<div ng-repeat="session in importableMeetings">
    <a ng-click="importMeeting(session.sessionId)" class="btn btn-default btn-xs">
        <span ng-show="loadingBtn">Loading...</span>
        <span ng-show="!loadingBtn">Import &raquo;</span>
    </a>
</div>

$scope.importMeeting = function (meetingId) {
          $scope.loadingBtn = true;

          .......

        };

score 2 · Answer 1 · answered Sep 09 '15 at 23:08

You are binding all your ng-repeat items to the same value. In order to do it separately you will need to bind each item to its own value. I would do this by setting loadingBtn on each of the importableMeetings items (defaulting to false). For example, inside the link:

<a ng-click="importMeeting(session)">
    <span ng-show="session.loadingBtn">Loading...</span>
    <span ng-show="!session.loadingBtn">Import</span>
</a>

Then inside your controller:

$scope.importMeeting = function(session){
    // do what you were originally doing with your session.sessionId

    // set the bool
    session.loadingBtn = true;
};

Note that you now pass the entire session object (not just the id) to the function, allowing you to alter its properties.

score 2 · Accepted Answer · answered Sep 09 '15 at 23:38

If you can't use session.loadingBn for some reason, then you can use:

<a ng-click="importMeeting(session); loadingBtn = !loadingBtn">
    <span ng-show="loadingBtn">Loading...</span>
    <span ng-show="!loadingBtn">Import</span>
</a>

Every instance inside an ng-repeat creates it's own scope. So even though they all will be called loadingBtn the click will only alter the one instance of loadingBtn.

When Ng-click do ng-show on the clicked element in a ng-repeat

2 Answers2