For each 'entry in entries', I have a button the toggles ng-show to true and displays details about the entry. Currently, this code toggles every entry to ng-show=true. I want each button to only toggle the details for the entry it is located in.
My View:
<h1>Listing Projects</h1>
<ul class="unstyled">
<li ng-repeat="entry in entries" ng-init="entryClass=isClass(entry.isProject)">
<ul class="unstyled">
<li>
<div class="alert" ng-class="entryClass">
<h3>{{entry.title}}</h3>
<button ng-click="toggleShow()">Details</button>
<div style="background-color:#000000; min-width:100px; min-height:100px;" ng-show="showThis">
</div>
</div>
</li>
</ul>
</li>
</ul>
The AngularJS:
app = angular.module("Resume", ["ngResource"])
app.factory "Entry", ["$resource", ($resource) ->
$resource("/entries")
]
@EntryCtrl = ["$scope", "Entry", ($scope, Entry) ->
$scope.entries = Entry.query()
$scope.showThis = false
$scope.isClass = (isProject) ->
if isProject == true
$scope.myVar = "project alert-info"
else
$scope.myVar = "tech alert-success"
$scope.toggleShow = ->
if $scope.showThis == false
$scope.showThis = true
else
$scope.showThis = false
]
pass the entry to your function:
$scope.toggleShow = (entry) ->
entry.showThis = !entry.showThis
<button ng-click="toggleShow(entry)">Details</button>
<div ng-show="entry.showThis">stuff here</div>
Alternatively, you could just handle the whole thing in the markup:
<button ng-click="entry.showThis = !entry.showThis">Details</button>
<div ng-show="entry.showThis">stuff here</div>
More alternatively you could use $index and a separate object:
$scope.showEntry = {}
$scope.toggleShow = (index) ->
$scope.showEntry[index] = !$scope.showEntry[index]
<button ng-click="toggleShow($index)">Details</button>
<div ng-show="showEntry[$index]">stuff here</div>
So there's a few options for you. Happy coding.
Your $scope.showThis variable serves as a reference for all your entries. Hence, when you change it for one entry, all other entries get changed as well.
Your isClass function is also not doing much because you're not actually using the myVar anywhere. That 'myVar' variable tells me that you were trying to follow the ng-class docs but I'm afraid you went off track a bit with it.
This is what you probably wanted your HTML to be like:
<h1>Listing Projects</h1>
<ul class="unstyled">
<li ng-repeat="entry in entries">
<ul class="unstyled">
<li>
<div class="alert" ng-class="{true: 'project alert-info', false: 'tech alert-success'}[entry.isProject]">
<h3>{{entry.title}}</h3>
<button ng-click="toggleShow($index)">Details</button>
<div style="background-color:#000000; min-width:100px; min-height:100px;" ng-show="shouldShow($index)">
</div>
</div>
</li>
</ul>
</li>
</ul>
and this is the matching controller for the HTML above:
app.controller('AppController',
[
'$scope',
function($scope) {
$scope.entries = [
{isProject: false, title: 'Entry1'},
{isProject: true, title: 'Entry2'}
];
var visible = [];
$scope.toggleShow = function(index){
position = visible.indexOf(index);
if(position===-1) {
visible.push(index);
return;
}
visible.splice(position, 1);
};
$scope.shouldShow = function(index){
return visible.indexOf(index) != -1;
};
}
]
);