PLUNKER
I have an app that allows users to see info about live music and favorite the shows they like. Pushing the star button does this. They can then see this information on their own music calendar page.
I'm able to save and update the favoriting data into my database just fine now. But I can't figure out how to style the star buttons (favoriting buttons) based on whether the user has favorited the item or not. They should change color/style if they are favorited or not.
There is data that comes from the music shows and data about the user (their personal info or favorites). These are separate bits of data. So when I bring the shows info in via ng-repeat, this is different than the info I have on whether the user has favorited that show.
The jist of the question, then, is how to style items/icons using ng-class within an ng-repeat when the info on whether those items have been favorited (true or false) comes from another object or array (can create either). Most of the examples with ng-repeat and ng-class are a alot simpler because the data on whether something is selected or not is within that same object.
HTML
<div class="list-group">
<div class="nav nav-stacked list-group-item" id="sidebar" ng-repeat=
"show in shows[0]">
<div>
<div class="col-md-3 text-center">
<h2>{{show.properties.price}}</h2>
<p id="tagtext">{{show.properties.tags}}</p>
</div>
<div class="col-md-6">
<h4 class="list-group-item-heading">{{show.properties.artist}}</h4>
<p class="list-group-item-text">{{show.properties.venue}}</p>
</div>
</div>
<div class="media col-md-3">
<h2 class="fa fa-star-o" ng-click="toggleStarred(show)" ng-class="I don't know">
</h2>
</div>
</div>
</div>
</body>
The pertinent part of the html is around <span class="pull-right star" ng-controller="StarredCtrl"> That's what creates the star icon.
Controller
I'll include the plunker so as not to have to jam this up.
The object where the user favorites are stored looks like this
$scope.loggedInUserFavorites = Object { $$conf: Object, $id: "favorites", $priority: null, show0: true, show1: false, show3: true, show5: false }
using Angular.foreach I pared it down to this:
Object { 0: false, 1: false, 3: true, 5: false }
How can I access those true/false properties of $scope.loggedInUserFavorites on my template to style the star icon?
PLUNKER
Actually this should work:
<h2 class="fa fa-star-o" ng-click="toggleStarred(show)" ng-class="{fillgreen:loggedInUserFavorites[show.properties.id]}">
As scopes prototypically inherit from their parents, you do actually have access to both the show model from the ng-repeat scope, and loggedInUserFavorites from the StarredCtrl scope.
Cheers!
Try this (where shows[$index].starred is your logic to check if the show has been favorited)
<div class="media col-md-3">
<h2 class="fa fa-star-o" ng-click="toggleStarred(show)" ng-class="{starred: shows[$index].starred, no-star: !shows[$index].starred}">
</h2>
</div>
I basically used both #sanghas26 and #HeberLZ's to come up with:
<h2 class="fa" ng-click="toggleStarred(show)" ng-class="{'fa-star': loggedInUserFavorites[show.properties.id], 'fa-star-o': !loggedInUserFavorites[show.properties.id]}"></h2>
So I changed the h2 to fa and then used the full and empty stars as the css classes. I really don't know why fillgreen and fillblue didn't work here. Will continue to investigate.
Anyway, it works. This took 6 weeks to figure out.
Related
I am very new to angular (just started trying to learn last week) so I apologize if this is difficult to follow. I am creating a very basic post and comment type page to practice making custom directives and I am having trouble with the scope. Since I am not storing any data I want a page that you can add posts and comment on them all without creating any new partials only rendering certain templates to the existing page. I am able to add posts perfectly and use a for each to display all of them. Once they are displayed within the creation of the post I added an optional add comment button which when clicked drops down a form. I want it so this form is linked only to that comment. I thought by putting it in the creation of the comment I was setting it up this way but when I add comments it adds it to all of the posts. I realized this is because I don't have anything setting the scope of my comment to only show for that post element nor do I know how to do this.
``` </rd-post>
<div class="posts" ng-repeat="posts in hpc.arr track by $index">
<img class="pic" alt="pic" src="{{posts.imgurl}}" />
<h1 class="posttitle"> {{ posts.title }}</h1>
<p class="author"> by: {{ posts.author}} </p>
<p> {{posts.description}}</p>
<p ng-click="addcomment=!addcomment" ng-init="addcomment=false"> <img class="commentpic" src="http://kingofwallpapers.com/pencil/pencil-003.jpg" /> Add comments </p>
<rd-comments ng-show="addcomment"></rd-comments>
<p ng-click="comm=!comm" ng-init="comm=false"> <img class="commentpic" src="http://www.psdgraphics.com/file/comment-icon.jpg" /> show comment </p>
<!-- ng-click="hpc.commentsF(posts, commment)" -->
<div ng-repeat="comment in hpc.commentarr track by $index">
<div ng-show="comm">
<!-- <div class="comm" ng-repeat="comment in hpc.commentarr track by $index"> -->
<h1>{{comment.title}}</h1>
<p> {{comment.description}} </p>
</div>
</div>
</div> ```
I'm working on a project where the client has supplied a pile of html where I need to plugin the data from our database and have hit a problem that I'm finding difficult to solve....
So first problem is with routing
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information collapse">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
he has supplied some javascript to handle the click on class-overview
$('.class-overview a').on('click',function(e) {
e.preventDefault();
});
$('.class-overview').on('click',function() {
$('.class-overview.active').removeClass('active').next('.class-information').collapse('hide');
$(this).addClass('active').next('.class-information').collapse('show');//.css('top',offset).collapse('show');
});
and i have a line like this in my state provider
// default route
$urlrouterProvider.otherwise("/")
So the problem is that the ui-router handles the click and sends me back to the home page.
The ideal solution is to leave as much of his markup intact, so can anyone tell me how I stop ui-router handling the click?
or failing that, how I might use ng-click and ng-show to get the same effect, i.e. hiding and showing the class-information div...
If I understand well your question, you want to display the .class-information div when you click on the .class-overview element.
That can be done by using a variable in a ng-show like this:
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#" ng-click="display = !display">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information" ng-show="display">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
The display variable will be falsy when you land on the page, therefore the ng-click will be executed, this variable will be set to true.
I see that you are using a collapse class to hide the content if it is collapsed. Then you could use angular ng-class to put the collapse class when the display variable is false. Your div.class-information would look like this:
<div class="class-information" ng-class="{collapse: !display}">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
I've a situation where I want to display an error message on the page when my modal don't have any records to show. This could be on the initial load or after applying some filter criteria on the page.
I'm using ng-if to check the count of records on the result set after applying the filter, that is why when my page initially loads as there is no data in the filtered result rest it is showing up the error message first and then later it is showing the data.
Any insight would be highly appreciated
prod.skulist is my modal.
<ul class="prd-list">
<li ng-repeat=" p in filtered =(prod.skulist | categoryFilter:prod.selectedFormat :prod.selectedRating) | filter :priceRange" id=" {{p.sku}}">
<figure class="prd-img" ng-click="wrapCtrl.showProdDetils(p.sku,prod.catName)">
<div style="background-image: url({{wrapCtrl.imageLocation+p.image}}); background-repeat: no-repeat;"></div>
<figcaption class="prd-nam f8">{{p.title}}</figcaption>
<span class="new-item" ng-show="{{p.isnew}}"><img src="Content/images/new.png" /></span>
<span class="new-item" ng-show="wrapCtrl.compareStreetDate(p.streetdate)"><img src="/Content/images/coming-soon.png" /></span>
</figure>
<div class="prd-price f5">
{{p.currentprice | currency}}<span class="sales" ng-show="{{p.onsale}}">ON SALE</span>
<span class="cart-btn" ng-click="wrapCtrl.addCart($event)"></span>
<div class="inactive-cart-btn" ng-show="wrapCtrl.compareStreetDate(p.streetdate)"></div>
</div>
</li>
</ul>
<div ng-if="(filtered | filter :priceRange).length ==0" class="error-box">
<div class=" wrp"><span class="error-head">I hate when this happens</span></div>
<div class="wrp error-message">
<span class="f9 pad-top">It looks like I don't have exactly what you are looking for.</span>
<span class="f9 pad-bot">try adjusting your filters to see more</span>
</div>
</div>
I ran into a similar situation and found an ugly, though working solution by using the $timeout service. In your case you would have a scope variable, lets call it loadTimeGiven = false and after the $timeout you set it to true. Then simply do
ng-if="(filtered | filter :priceRange).length ==0 && loadTimeGiven"
Alternatively you could set loadTimeGiven based on a service that your modal has access to.
i repeat things in ng repeat like so
<div class="" ng-repeat="deutscheBankEvent in deutscheBankEvents">
<div class="schrottler-opened schrottler" title="">
<span class="presse_ueber" style="font-size:22px;margin-left:10px;font-weight: normal;margin-top:5px">{{deutscheBankEvent.name}}</span>
</div>
<!-- data-ng-repeat also possible-->
<div class="">
<div class="presse_content">
<Div style="color:white">{{deutscheBankEvent.name}}</div>
<ul class="liste_k">
<li ng-repeat="list in deutscheBankEvent.list">
{{list}}
</li>
</ul>
</div>
</div>
later down the code comes up a form to register to events. the form is hidden until user selects a place and date via select. this is triggered like so:
<span ng-show="myForm.locationDate.$valid">
my issue now is: this shows up all hidden form elements when one select is valid.
how can i set the scope to only this one changed?
Since ng-repeat creates a new scope, changing ng-show/ng-hide conditions to scope bound properties will work perfectly (example).
this is my basic scenario. For a list of items (summary view) i want to show details view of item that got clicked on the same page.
I took this jsfiddle example and transformed it into this jsfiddle. If you look at the behavior it does work for first time but it is not consistent.
Maybe someone can help me with this, or suggest a better approach. I would like to have a different controller for managing the list and a different controller to handle the detail view.
One way of transforming the example (provided that you want to use ngSwitch) would be:
<ul ng-controller="ListController">
<li ng-repeat="item in items" ng-controller="ItemController">
<div ng-click="open(item)">{{item.content}}</div>
</li>
<hr>
<ng-switch on="anyItemOpen()">
<div ng-switch-when="true">
<div ng-controller="ItemController">
{{opened.name}}: overlay: tweet, share, pin
</div>
<a ng-click="close()">close</a>
</div>
</ng-switch>
</ul>
And here is the working jsFiddle: http://jsfiddle.net/pkozlowski_opensource/sJdzt/4/
Your jsFiddle didn't work since you were trying to reference item created in the ngRepeat scope (and thus not available outside of the ngRepeat).