AngularJs ng-repeat with index

Question

我只想在單擊顯示按鈕時在此部分顯示名稱。 我正試圖檢測使用索引，但我沒有成功。

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>

Answer 1

如果我正確理解您的問題，您應該使用track by

舉個例子：

<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

Answer 2

發布@Pevara的邏輯非常好。 我建議你順應那個邏輯。

我不明白你的問題的實際用例。 所以，如果你真的想用$index值來完成這個邏輯，你可以使用下面的代碼片段來完成你的任務。

 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>

Answer 3

您在模板中無法做任何事情，不需要該功能。 您需要做的就是在該item上切換一些show屬性。

看一下這個例子： 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>

如果您不希望它切換，您可以執行以下操作：

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

Answer 4

如果客戶對象數組擁有名稱本身，則傳遞對象本身而不是傳遞$ index

請看： https ： //plnkr.co/edit/I7F4ZT5acm41P1fW58Hr？p = preview

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

AngularJs ng-repeat with index

問題描述

4 個解決方案

解決方案1
7 2016-03-04 23:38:48

解決方案2
2 已采納 2016-03-08 06:07:37

解決方案3
1 2016-03-04 23:51:22

解決方案4
1 2017-11-22 05:40:36

AngularJs ng-repeat with index

問題描述

4 個解決方案

解決方案1 7 2016-03-04 23:38:48

解決方案2 2 已采納 2016-03-08 06:07:37

解決方案3 1 2016-03-04 23:51:22

解決方案4 1 2017-11-22 05:40:36

解決方案1
7 2016-03-04 23:38:48

解決方案2
2 已采納 2016-03-08 06:07:37

解決方案3
1 2016-03-04 23:51:22

解決方案4
1 2017-11-22 05:40:36