Menu
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>
979
If I understand your question correctly, you should be using track by
As an example:
<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
95
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>Nothing you can't do in your template, no need for that function. All you need to do is toggle some show property on that item.
Have a look at this example: 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>
If you don't want it to toggle you could just do something like this:
<button ng-click="item.show = true">show</button>
if customers array of objects hold the name itself then pass the object itself rather than passing $index
See here:https://plnkr.co/edit/I7F4ZT5acm41P1fW58Hr?p=preview
<button ng-click="clickMe(x)">Click Me</button>
$scope.clickMe = function(x){
$scope.selected = x;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
