Using AngularJs $index



Background
Today I had a set if divs I created using AngularJs ng-repeat. My challenge was that there was a button in each div that triggered a modal pop-up when clicked. The content of the modal was supposed to be updated from the corresponding element that generated the particular button that was clicked. Hmm...

 Solution
Taking advantage of the ng-click attribute and $index, I added this to the button element

ng-click="SetSelected($index)"

$index is a powerful reference that allows us to pass the index of the element that generated the current control to a function.  That way, I was able to fetch the correct element from the original array of elements that generated the set of controls! 

 Isn't Angular sweet?

Comments

Post a Comment

Popular posts from this blog

Resize or Crop Image before Upload Using HTML5 File API

Image
I've always loved how Whatsapp, Facebook, Twitter and all the major social network platforms maintained sanity of uploaded profile pictures through the use of instant resize at upload time. Of course not only profile pictures need to be made to conform to a specific dimension, if you find other scenarios during development when you need to ensure that your images are of a specific height and width, or aspect ratio then this article will help you do just that. You may also just want to give the user ability to resize before final upload, this article will help you do just that. Step 1: Download CropperJs Plugin There are lots of plugins that could help to achieve our objective, and I've tried a few. I find this one very robust and easier to use. Here's the github link Step 2: Import the CropperJs Plugin Using your script tag, import the downloaded plugin's Javascript file and link the CSS file too. Note, that for speedy loading, CSS files should be loaded in t...
Read more

Get Creative With Data Tables: Row Click Events

Image
Introduction Datatables from datatables.net are so lovely, especially with the responsive extension that you can enable by including dataTables.responsive.js in your project. I particularly find fascinating the combination of search / filtering, pagination, ordering and exporting features which are available right 'out-of-the-box'. Issue Well, as great as datatables are, you will find it difficult if not impossible to develop a system with acceptable user-experience using bare-bone datatables implementation. In my own case, because I was porting my superb Asset and Inventory Management Application found at asset.bz to the mobile platforms using PhoneGap, I needed the user to be able to tap on any record in order to perform some pre-define operations like editing, approvals etc. Solution Apparently, the solution isn't far fetched. The sample code below would do the job nicely: // HTMLTableData is your array of records to be displayed in the data table ...
Read more

Determine Appropriate Font-Size for Text iTextSharp

Image
Background: I use CorelDraw a lot to lay out my reports before writing the iTextSharp code to generate them. It gives me a fair idea of how to position report elements and keeps me from doing guesses or trial and error. This was the case when I worked on the ID Card project for Delta State University: I had the ID card neatly laid out and the school loved the design. Issue: Now, everyone knows we normally have long names in Nigeria. My design template had a name that was 10 characters long and I used 28pt points for this text. What I wanted to achieve however is that, for names that will not be able to fit into the maximum space allowed for the name text at the 28pt used in the design template, the system should use the maximum font size that will permit the name to fit in the space available. Its a simple problem, but wasn't so easy to resolve. Solution: public Font GetSafeFont ( string DisplayText, Font FontToUse, float SafeLength, float StartingSize) {...
Read more