带索引的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

回答

相关问题