AngularJs ng-repeat with index

Question

I want to show the name in this section only when the display button is clicked. I'm trying to detect using index, but I didn't get success.

Code:

<div ng-repeat="c in customers">

   <a ng-click="display(c.id[$index])" ng-hide="need to hide after click this one">{{vm.updateText}}</a>
   <div ng-show="c.id[$index]" class="updateSection">
        <input type="text" name="id" data-ng-model="id" />
          <input type="button" ng-click="vm.veryId(id)" value="{{vm.verifyButtonText}}">
          <input type="button" ng-click="vm.Cancel()" value="{{vm.cancelButtonText}}">
       </div>
    </div>
    // will show ng-click="vm.veryId(id)"
    <rpe-progress data-ng-show="vm.showProgress" block="true"></rpe-progress>
    // if id is working will show following error message:
    <rpe-alert show="vm.mpnIdAlert">{{vm.errormessage}}</rpe-alert>        



<script>
   vm.display= function (index) {    
      vm.id[index] = true;  
  //   I want show updatesection & hide Update text   
   }
vm.cancel= function () {   
//   I want hide updatesection & show Update text 
       }


  vm.veryId= function (id) {   
    //  If id is wrong show error message.
           }
</script>

glcheetham · Accepted Answer · 2016-03-04 23:47:20Z

10

If I understand your question correctly, you should be using track by

As an example:

<div ng-repeat="n in [42, 42, 43, 43] track by $index">
  {{n}}
  <p ng-show="$index === 3">Index is 3</p>
</div>

https://docs.angularjs.org/api/ng/directive/ngRepeat

edited Mar 4, 2016 at 23:47

answered Mar 4, 2016 at 23:38

glcheetham

1,0039 silver badges23 bronze badges

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

1 Comment

glcheetham Over a year ago

that was just an example to demonstrate the use of track by

codeninja.sj · Accepted Answer · 2016-03-08 06:07:37Z

The logic posted @Pevara is absolutely fine. I suggest you to go with that logic.

I don't understand the actual use case of your problem. So, If you really want to accomplish this logic with $index value then, you can use the below code snippet to accomplish your tasks.

var app = angular.module('app', []);

app.controller('indexCtrl', function ($scope) {
  $scope.customers = [
    {name: 'ABC', Age: 26},
    {name: 'DEF', Age: 32},
    {name: 'GHI', Age: 21}    
  ]; 
  
  $scope.toggleDisplay = function(index) {
    $scope.customers[index].show = ! $scope.customers[index].show;    
  };
  
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
  <div ng-controller="indexCtrl">
    <table class="table">
      <tr>
        <td>Name</td>
        <td>Age</td>
      </tr>
    <tr ng-repeat="c in customers">
      <td>{{c.name}}</td>
      <td>
        <button ng-click="toggleDisplay($index)">Display</button>            
        <span ng-show="c.show">{{c.Age}}</span></td>
    </tr>
    </table>
  </div>
</body>

Pevara · Accepted Answer · 2016-03-04 23:51:22Z

1

Nothing you can't do in your template, no need for that function. All you need to do is toggle some show property on that item.

Have a look at this example: https://plnkr.co/edit/YS5zhU3pHMxut34XwPtR?p=preview

      <li ng-repeat="item in items">
        <p>{{item.id}}</p>
        <p ng-if="item.show">
          {{item.name}}
        </p>
          <button ng-click="item.show = ! item.show">toggle</button>
      </li>

If you don't want it to toggle you could just do something like this:

<button ng-click="item.show = true">show</button>

answered Mar 4, 2016 at 23:51

Pevara

14.3k1 gold badge37 silver badges48 bronze badges

2 Comments

user3194721 Over a year ago

That is just sample code, but my code has textboxes and error messages etc... so I'm trying to use index.

Pevara Over a year ago

I don't see why you'd want to complicate things like that... You should still be able to add a show property to each item c in your customers array. Just keep it simple and readable. If you are willing to post your full code I'd be happy to adapt my example to your use case.

Sunil Choudhary · Accepted Answer · 2017-11-22 05:40:36Z

1

if customers array of objects hold the name itself then pass the object itself rather than passing $index

See here:https://plnkr.co/edit/I7F4ZT5acm41P1fW58Hr?p=preview

<button ng-click="clickMe(x)">Click Me</button>
$scope.clickMe = function(x){
  $scope.selected = x;
}

answered Nov 22, 2017 at 5:40

Sunil Choudhary

3441 silver badge6 bronze badges

Collectives™ on Stack Overflow

AngularJs ng-repeat with index

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Linked

Related