CODEWITHSUNDEEP
javascriptangularjs
Rajeev
Rajeev

Reputation: 1113

On repeat show unique scope for each record, angularjs

I'm using ng-repeat to show my records as :

<ul ng-repeat= 'stu in students'>
  <li>{{stu.name}}</li>
  <li>{{stu.age}}</li>
  <li><button ng-click="show()">show</button></li>
 <li ng-show="showThis">Hello {{stu.name}}</li>
</ul>

and in my controller: 

  $scope.show = function () {
      $scope.showThis = true ;
  };

So, when I click any of the show button it will show all the student's name, but I want to show only one student which is selected. How can I bind this scope only with selected record?

Upvotes: 1

Views: 337

Answers (1)

dfsq
dfsq

Reputation: 193301

Approach 1. On each iteration ngRepeat creates a new child scope. You can refer current one with this keyword in corresponding controller method. For example:

$scope.show = function() {
    this.showThis = true;
};

And that will make a trick.

Demo: http://plnkr.co/edit/857DsN6EYI21sEvn15Ul?p=preview

Approach 2. You just pass current student reference to show method and set its showThis property:

<ul ng-repeat='stu in students'>
    <li>{{stu.name}}</li>
    <li>{{stu.age}}</li>
    <li>
        <button ng-click="show(stu)">show</button>
    </li>
    <li ng-show="stu.showThis">Hello {{stu.name}}</li>
</ul>

And in controller:

$scope.show = function(student) {
    student.showThis = true;
};

Demo: http://plnkr.co/edit/F3yKm4kiq2HDZGe9aF6W?p=preview

Upvotes: 3

Related Questions