I have a list of DIVs that are generated by ng-repeat.
I need to apply an ng-class to those that're selected. To find out if the div is selected, I call to a model function ( not ng-model, just standard conceptual model ).
<div class="default" ng-class="{selected : myModel.isSelected({{item.id}})}" ng-repeat="item in items">
<!--Div content-->
</div>
This doesn't work, and none of the divs get the selected class.
However, when I call the model function from the inspector (myModel.isSelected(id)) for a specific id constant, I get "true".
Any ideas?
Thanks!
Related
In this case blob files won't bind to the image variables
<div ng-repeat="image in images track by $index">
<div ngf-drop ng-model="image"></div>
</div>
But in this case it works:
<div ng-repeat="image in images track by $index">
<div ngf-drop ng-model="images[$index]"></div>
</div>
Yet {{image == images[$index}} returns true if I put in the ng-repeat loop...
How come the image variable in the first example won't bind ?
I'll try to explain this with my limited experience, correct me if I'm wrong :).
According to doc of ngRepeat:
Each template instance gets its own scope, where the given loop variable is set to the current collection item...
Which means every <div> generated by your ng-repeat has its own scope, and an image attribute has been bind to each of them. But images was bind to the parent scope of ng-repeat.
Back to our question, when you do ng-model="image", actually you have bind it to a scope's of a template but not the one(images) in your controller, that's why the change won't bind to images.
I am trying to add a class to the every last element in that row. Here I have a ng-repeat and showing it in three columns in a row so every 3rd(last) column should have a class. Though I am in the beginning stage of Angular I couldn't figure it out.
Thanks for your kind answers.
You could try to use $last (a exposed property of ng-repeat) and ng-class
<div class="container" ng-repeat="item in items">
<div ng-class="{'yourClass':$last}"> your content...</div>
</div>
I would have tried to provide a better example, but its hard to guess the structure of what you are working on based on your input.
I wanted to create sortable tabs using uiSortable directive (https://github.com/angular-ui/ui-sortable) and tabs from AngularUI bootstrap (http://angular-ui.github.io/bootstrap/). Important thing for me is an ability to sort elements in model, by using ng-model. So, I added ui-sortable and ng-model="someArray" on element. It doesn't work that way, because tabset is being replaced with structure like that:
<div>
<ul>
<li>tab 1 header</li>
<li>tab 2 header</li>
<li>tab 3 header</li>
</ul>
<div class="tab-content"> tabs content </div>
</div>
and in effect, sortable is applied to outer div so I can grab ul and .tab-content when in fact I wanted to sort those li elements.
My first try on solving that problem was creating uiSortableTabs directive with compile function that adds ui-sortable attribute to ul (using just attr()). Good thing is that now tabs are sortable. Bad thing is that now sortable is not aware of model. I tried invoking .attr('ng-model',attrs.ngModel) on that ul together with adding that ui-sortable. Now sortable see the model, but it's undefined.
Does anyone know how to make sortable tabs with updatable model or how to correctly add directive to an element, together with ngModel using compile function in other directive?
I was working with a similar one, my solution is to use jQuery ui sortable directly and change the data model by hooking the start and stop event.
I am using AngularStrap checkbox button where checkbox items come from server. So, I am trying to use ng-repeat, but I am not able to see the values of the item selected. Please see the plunker where I have 3 types of checkboxes in it -
A regular checkbox and it works.
Bootstrap checkbox using ng-repeat. It does not reflect selected object values.
Bootstrap checkbox where items are repeated. It works.
Please help me to fix #2 above where I am using ng-repeat option.
Get rid of the extra tag around the button element:
http://plnkr.co/edit/jRIedNZdqZ4phdDk21Vw?p=preview
<div class="btn-group" bs-buttons-checkbox>
<button ng-repeat="item in items" type="button" class="btn" ng-model="selection.ids[item.id]">{{item.name}}</button>
</div>
When the grid is initially rendered, it follows the ordering of the list (model) behind it. How would one revert to that same natural ordering after a sort by column has occurred?
Within an ng-repeater you could set a custom data attribute to {{$index}}
<li class="sortable" ng-repeat="item in items" data-index="{{$index}}">
Then when the DOM is manipulated to produce your column sort the index when rendered will be preserved within data-index