Binding an array to a variable directive in AngularJS

Question

I am trying to get an array into a template to use its values. My problem is that the attribute turns into a string once inside my template, so it is no longer available as {{var [0]}} and will instead return the first character of the "string", usually "["

Here is a simplified data setup:

"varForward": ["100", "1"], "varBack": ["1", "100"] 

Here is the simplified part of the HTML file that interacts with this data:

 <my-customer-vars value="{{varForward}}"> </address-numbers> <my-customer-vars value="{{varBack}}"> </address-numbers> 

and finally, here is the part that is SUPPOSED for replacing the user tag with my own things:

 directive('myCustomerVars', function($compile) { return { restrict: 'E', scope: { value: "@" }, template: '<div>'+ '<p class="body-text">Some stuff goes here</p>'+ '<input type="text" name="firstinput" value="{{value[0]}}"> - '+ '<input type="text" name="secondinput" value="{{value[1]}}">'+ '</div>', replace: true } }); 

So now, if I try to use the value [0], I get [If I try to get the value [1], I get ", etc. Is there any help in using arrays inside the directive template?

Answer 1

You need to change "@" to "=" and pass to the array without {{}}

like this:

 <my-customer-vars value="varForward"> </my-customer-vars> <my-customer-vars value="varBack"> </my-customer-vars> 

:

 directive('myCustomerVars', function($compile) { return { restrict: 'E', scope: { value: "=" }, template: '<div>'+ '<p class="body-text">Some stuff goes here</p>'+ '<input type="text" name="firstinput" value="{{value[0]}}"> - '+ '<input type="text" name="secondinput" value="{{value[1]}}">'+ '</div>', replace: true } }); 

This is because each expression inside the directuve attribute defined by the @ symbol is evaluated as only a string, and, conversely, it is evaluated as a required expression. (with two-way binding, so be careful).

Answer 2

If you prefer not to create a selection in the directive (for example, when creating your own validation directives), you can pass the array as:

 <my-customer-vars model="varForward"> 

And then read the value in the directive binding function as:

 directive('myCustomerVars', function($compile) { return { restrict: 'E', link: function (scope, elm, attrs, ctrl) { var myVars = scope[attrs.model]; // <--- took a time to figure out console.log(myVars); } } }); 

Answer 3

To add Danita to the answer, you will need to use $eval to get this scope variable:

Just change

 var myVars = scope[attrs.model]; 

to

 var myVars = scope.$eval(attrs.model); 

Answer 4

Another perspective - if the problem is managing the array of strings in an angular application, I would use one of the following (or any similar ones):

• ngTagsInput
• angular select2 with tag mode
• ngList

If you don't practice creating your own angular directives (then just ignore my answer)