帶索引的AngularJs ng-repeat

僅當單擊顯示按鈕時，我想在本節中顯示名稱。我試圖檢測使用索引，但我沒有得到成功。帶索引的AngularJs ng-repeat

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>

來源

2016-03-04 user3194721

邏輯張貼@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>

來源

2016-03-08 06:07:37

如果我正確理解你的問題，你應該使用的軌道由

舉個例子：

<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

來源

2016-03-04 23:38:48 glcheetham

我不想要使用硬代碼值 - 3 – user3194721

這只是一個例子來演示如何使用 – glcheetham

沒有什麼可以」不要在你的模板中做，不需要那個功能離子。您需要做的只是在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>

來源

2016-03-04 23:51:22 Pevara

Th在只是示例代碼，但我的代碼有文本框和錯誤消息等...所以我試圖使用索引。 – user3194721

我不明白爲什麼你想要這樣的事情複雜化......你應該仍然可以在'customers'數組中添加一個'show'屬性到每個項目'c'。只要保持簡單和可讀。如果您願意發佈您的完整代碼，我會很樂意將我的示例適用於您的用例。 – Pevara

我更新了我的代碼 – user3194721

如果對象的數組客戶持有這個名字本身則傳遞對象本身，而不是通過$指數

在這裏看到：https://plnkr.co/edit/I7F4ZT5acm41P1fW58Hr?p=preview

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

來源

2017-11-22 05:40:36

帶索引的AngularJs ng-repeat

回答

相關問題