In this post we will be looking at some interesting implementation of Angulat JS. It was some day before I got a call from one of my friend asking me to help her in sorting out one of the problem that she was facing in angular JS. I am writing this post so that I could present that problem with some solution. The problem was rather complicated and here I am presenting a simple version of it.
In simple terms the problem statement can be stated like: There are n number of dropdowns to be created inside an ng-repeat of the division. And each dropdowns should be uniquely identifiable. The real problem is not this simple, but yes, this post will give you some idea though.
To start with, let’s see on how to use select with angular. I have a collection in my viewmodel and I want to bind that collection with my select’s options, and here’s how it can be done.
The ViewModel part is like following:
So the output would be like this:
Now adding the above select into a division with ng-repeat, would make the dropdown to repeat the number of times as the number of items in the collection to which the division binds to.
And the ViewModel is like:
The output would be like this:
If you inspect the element right now, you will see that every dropdown has no id and there is no means by which you can differentiate the dropdowns. Or incase you are thinking to give the Id to the select, each select will then posses the same id.
So, the best one can do is to give the select an Id but rather, in a little tricky way.
So by appending {{$index}} with the id will make the ids as “drop_0”, “drop_1” and so on. And by using these ids, you can differentiate the dropdowns or in fact any element you might be using in ng-repeat.
Hope you’ll like the post. We will be continuing with filters from the next post.
Happy Reading.
Posts
0 comments