AngularJs ng-repeat with index [英] AngularJs ng-repeat with index

查看：29 发布时间：2021/11/10 0:09:18 angularjs angularjs-ng-repeat

本文介绍了AngularJs ng-repeat with index的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想仅在单击显示按钮时在此部分中显示名称.我正在尝试使用索引进行检测，但没有成功.

代码:


<a ng-click="display(c.id[$index])" ng-hide="点击后需要隐藏">{{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}}">

//将显示 ng-click="vm.veryId(id)"<rpe-progress data-ng-show="vm.showProgress" block="true"></rpe-progress>//如果 id 正在工作，将显示以下错误消息:<rpe-alert show="vm.mpnIdAlert">{{vm.errormessage}}</rpe-alert><脚本>vm.display= 函数(索引){vm.id[index] = true;//我想要显示更新部分 &隐藏更新文本}vm.cancel=函数(){//我想隐藏 updatesection &显示更新文本}vm.veryId= 函数 (id) {//如果 id 错误，则显示错误消息.}

解决方案

@Pevara 发布的逻辑绝对没问题.我建议你采用这种逻辑.

我不明白您的问题的实际用例.所以，如果你真的想用 $index 值来完成这个逻辑，你可以使用下面的代码片段来完成你的任务.

var app = angular.module('app', []);app.controller('indexCtrl', function ($scope) {$scope.customers = [{名称:'ABC'，年龄:26}，{名称:'DEF'，年龄:32}，{名称:'GHI'，年龄:21}];$scope.toggleDisplay = 函数(索引){$scope.customers[index].show = !$scope.customers[index].show;};});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="样式表"/><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>姓名</td><td>年龄</td></tr><tr ng-repeat="c 在客户中"><td>{{c.name}}</td><td><button ng-click="toggleDisplay($index)">Display</button><span ng-show="c.show">{{c.Age}}</span></td></tr>

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>

解决方案

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>

这篇关于AngularJs ng-repeat with index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

AngularJs ng-repeat with index [英] AngularJs ng-repeat with index

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

AngularJs ng-repeat with index [英] AngularJs ng-repeat with index

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭