Show/Hide items in an ng-repeat
Question
Using the above question's code, my question is there a clean way to be able to remove all the booleans in each object and get angular to know whether to show/hide each individual repeated object.
I have a table of items that if you click a button it will flip a boolean and show it's self, but it will do this to every item in the table and not just the individual item as they are all pointing to the same boolean.
Is there a way to dynamically generate a boolean for each item? I really don't want to have to add a show item within each object to call on. There has to be a better way. Edit: Here is a better template to use as an example: JSFiddle
HTML
<body ng-app="task" ng-controller="repeat">
<table class="table table-striped table-hover">
<thead>
<tr>
<td>Account</td>
<td>Details</td>
<td>Secret</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in accounts">
<td>{{x.account}}</td>
<td>{{x.details}}</td>
<td><span>{{x.secret}}</span></td>
<td>
<button type="button" class="btn btn-default">Show Secret</button>
</td>
</tr>
</tbody>
</table>
</body>
JavaScript
var app = angular.module('task', []);
app.controller('repeat', function($scope) {
$scope.accounts = [{
account: "account 01",
details: "lorum ipsum",
secret: 0101101,
}, {
account: "account 02",
details: "lorum ipsum",
secret: 0101101,
}, {
account: "account 03",
details: "lorum ipsum",
secret: 0101101,
}, {
account: "account 04",
details: "lorum ipsum",
secret: 0101101,
}];
});
2 answers
solution1
1 ACCPTED 2016-03-09 06:18:40
Try this in context with question you mentioned
In your html pass
<button ng-click="toggle(x.$index)">Hide</button>
While in js
$scope.toggle = function(index){
$scope.array[index].show = !$scope.array[index].show;
};
solution2
0 2016-03-09 06:13:36
在按钮上，调用angularjs函数设置布尔值，然后使用ng-show / ng-hide切换视图。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.