I'm trying to set up a form.IO form that will let me use the value of a field as part of the css class. This needs to take effect when the item is in the table view. If it also influences the form view that's ok because we don't have the element showing in the form view.
Specifically I want to get the following output:
<div class="[value]Stoplight"> </div>
The values from the object are going to be colors e.g. "yellow" so the result would be:
<div class="yellowStoplight"> </div>
Once I have that I can have my CSS file specify a background image based on the class and make it display the way I want.
Alternatively if I could put an html element of type image and have the source be different based on the value of the object that would work too.
Any ideas on how I could make either of those work? I'm not finding anything that relates to "dynamic css". Perhaps I'm looking for the wrong search criteria.
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 like to confess that i am not very good in angular and still learning. i have to load huge data and has to show by dropdown. i would prefer if i could do the pagination at dropdown end. i am working with a custom dropdown which is good and taken from this site http://developers.dss.ucdavis.edu/angularjs-serachable-multiselect-dropdown-directive/
but the above custom multi select dropdown lack one feature for showing pagination link. so the problem is user can not show minimum data and click on other link on demand to load next set of data. just wonder anyone mind to add code in the custom directive which add pagination feature there.
so at a time i can load 20 data and click on next pagination link to load next 20 data. i have seen people already developed angular pagination directives. here is one similar link http://angularjs4u.com/pagination/top-5-angularjs-pagination-demos-2014/ hence i am new in angular so do not understand how to add custom pagination directive in another custom multi select dropdown directive.
it will be really good help if some one show me how to achieve it. thanks
With the same UI Bootstrap that they use in that blog there is a pagination directive.
Here's a Plunkr
A few key points here are:
The normal ng-repeat is set as filtered variable to allow for update of search filter along with paginated.
ng-repeat="item in filtered = (allItems | filter: ...
In the same repeat after the filter you set a "limitTo" to set pagination on the list
... ) | limitTo:limit:begin
Then you just need to follow the ui bootstrap pagination
<uib-pagination total-items="filtered.length">
I want to filter an array based on even and odd $index property and I want to add odd elements in a separate div and even elements in another div, I could easily do this in JavaScript or jQuery, but I wanted to know the correct way to implement the same in AngularJS.
This is what I've done so far:
<div ng-app>
<div ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
<div class="row" ng-repeat="name in names">
<div class="col-xs-6" ng-show="(($index + 1)%2) == 0">{{name}}</div>
<div class="col-xs-6" >{{name}}</div>
</div>
</div>
</div>
It shows empty spaces in place of odd elements in first case, and when I add the odd expression for second div, the elements in the second div disappear and appear in first div. Here is the fiddle for the same issue.
Please advise.
EDIT:
I have got what I wanted, I split the main array into two different arrays odd and even array; this fiddle may be useful for people who stumble upon the same issue in the future.
Since Angular 1.2.0-rc1, ngRepeat exposes the $odd and $even properties on the local scope. You can simply use an ngSwitch based on one of this properties:
<div ng-repeat="item in itemsList" ng-switch="$even">
<div ng-switch-when="true">{{item}} is even</div>
<div ng-switch-default>{{item}} is odd</div>
</div>
Notice that if you just want to change the class based on the parity, ngClassOdd and ngClassEven are available since 1.0.0:
<div ng-repeat="item in itemsList" ng-class-even="'even'" ng-class-odd="'odd'">
{{item}}
</div>
All-in-one Fiddle
I think you're going to have some trouble with what you're looking to do, due to the way ng-repeat works. It generates a new scope for each iteration of the repeat. So you'll end up with two divs each time through the loop, one visible and one hidden.
To explain the weird behavior you've been seeing:
In your first case, the loop is alternating between showing two divs and showing one div. In a row that displays only one div, it understandably looks like a blank was inserted in the second column.
In the second case, the ng-repeat loop alternates between showing the first div and the second one. Without some CSS styling to show the difference, it looks like one div. You can make it pop by adding a style such as text-info to one of the divs.
I hope that explains what's going on behind the scenes, but the better question is... what are you trying to accomplish with the two divs?
Update: Since it looks like your goal is to take that array and pump it out into a 2-column layout, you can probably do away with your row div and your 2 column divs. Instead, try repeating a single 6-width column div. It'll handle the row wrapping for you every other column. You can use odd and even styling as #Blackhole pointed out if you want to differentiate the divs. I've got an example fiddle set up here that may be of use.
Currently I am using ng-repeat to show a division.
<div class="something" ng-repeat="item in items">{{item.name}}</div>
In my controller the moment I add one more item to items it shows in my page. But it just displays the new content. What I want is to show an effect while its added like the new div should slide down while being added to the page. How I can I achieve it?
Try adding a ngAnimate attribute with animation values. You can find more information here
http://www.yearofmoo.com/2013/04/animation-in-angularjs.html#animating-ng-repeat