AngularJs ng-repeat with index

发布时间：2020-12-17 17:56:23 所属栏目：安全来源：网络整理

导读：我只想在单击显示按钮时在此部分显示名称.我正试图检测使用索引,但我没有成功. 码： 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]" clas

我只想在单击显示按钮时在此部分显示名称.我正试图检测使用索引,但我没有成功.

码：

<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>

解决方法

发布@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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!