AngularJs NG重复索引 [英] AngularJs ng-repeat with index
本文介绍了AngularJs NG重复索引的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在点击屏幕按钮仅在本节中显示的名称。我试图用指数来检测的，但我没有获得成功。
code ：
＆LT; DIV NG重复=C中的客户＆GT; ＆LT;一个NG点击=显示（c.id [$指数]）NG隐藏=需要隐藏后点击这个＆GT; {{vm.updateText}}＆LT; / A＆GT;
＆LT; DIV NG秀=c.id [$指数]级=updateSection＆GT;
＆LT;输入类型=文本名称=ID数据-NG-模式=ID/＆GT;
＆LT;输入类型=按钮NG点击=vm.veryId（ID）VALUE ={{vm.verifyButtonText}}＆GT;
＆LT;输入类型=按钮NG点击=vm.Cancel（）VALUE ={{vm.cancelButtonText}}＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
//将显示NG点击=vm.veryId（ID）
＆LT; RPE-进度数据-NG-秀=vm.showProgress块=真＆GT;＆LT; / RPE-进步＆GT;
//如果ID工作会显示以下错误信息：
＆LT; RPE-警报显示=vm.mpnIdAlert＆GT; {{vm.errormessage}}＆LT; / RPE-警报＆GT;＆LT;脚本＆GT;
vm.display =功能（指数）{
vm.id [指数] =真;
//我想表明updatesection＆安培;隐藏文字更新
}
vm.cancel =功能（）{
//我想隐藏updatesection＆安培;显示更新的文字
}
vm.veryId =功能（ID）{
//如果id是错误显示错误消息。
}
＆LT; / SCRIPT＆GT;
解决方案
发布的逻辑 @Pevara 是绝对的罚款。我建议你用这个逻辑去。
我不明白你的问题的实际用例。所以，如果你真的想完成与 $指数值这个逻辑的话，你可以用下面的code片段来完成任务。
\r
\r\r
\r VAR应用= angular.module（'应用'，[]）;\r
\r
app.controller（'indexCtrl'，函数（$范围）{\r
$ scope.customers = [\r
{名称：'ABC'，年龄：26}，\r
{名称：'DEF'，年龄：32}，\r
{名称：'GHI'，年龄：21}\r
];\r
\r
$ scope.toggleDisplay =功能（指数）{\r
$ scope.customers [指数] .show =！ $ scope.customers [指数] .show;\r
};\r
\r
}）; \r
＆LT;链接HREF =https://maxcdn.bootstrapcdn.com/bootstrap /3.3.6/css/bootstrap.min.css的rel =stylesheet属性/＆GT;\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;机身NG-应用=应用程序＆GT;\r
＆LT; DIV NG控制器=indexCtrl＆GT;\r
＆LT;表类=表＆GT;\r
＆所述; TR＆GT;\r
＆LT; TD＆GT;名称和LT; / TD＆GT;\r
＆LT; TD＆GT;年龄＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; TR NG重复=，在客户C＆GT;\r
＆所述; TD＆GT; {{c.name}}＆下; / TD＆GT;\r
＆所述; TD＆GT;\r
＆LT;按钮NG点击=toggleDisplay（$指数）＆GT;显示与LT; /按钮＆GT;\r
＆LT;跨度NG秀=c.show＆GT; {{c.Age}}＆LT; / SPAN＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; /表＆gt;\r
＆LT; / DIV＆GT;\r
＆LT; /身体GT; \r
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重复索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
