How to bind Array from angular $scope to the input

Question

I have an array in $scope, say

$scope.my_array = ["val_1", "val_2", "val_3"]

To bind this array input element, I used ng-model:

<input type="text" ng-model="my_array">

Now I want it to be display the array values as comma separated in input box, but nothing displays. Is this even possible?

In ng-repeat, it is iterating the values, so the array is available to the view.

EDITED: Thanks, the normal way is working for array binding. But in my case I was first using empty array:

$scope.my_array = []

Then, on ng-click function, I am grabbing the data-* attribute from the clicked element and pushing it to the array:

var item = $(".some-class").data("field-type");
$scope.my_array.push(item)

Iterating over this is working fine, but not working while setting to the input.

It works for me: https://jsfiddle.net/wr95vgom/. Can you post some more of your code. — lintmouse, Oct 02 '15 at 21:19
Yeah thanks, your jsfiddle code is also working for me. See the Edited info above. — Rahul Sagore, Oct 02 '15 at 22:31

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

Look at another topic where two-way filtering is explained in details: How to do two-way filtering in angular.js? in brief you should use ngModels' $parsers and $formatters collection to be able make .join(", ") before setting to input and to make .split(/, */) before setting value back to the model.

edited May 23 '17 at 10:26

Community

1
1

answered Oct 02 '15 at 21:24

skyboyer

22,209
7
57
64

Thanks, I'll look into it. – Rahul Sagore Oct 02 '15 at 22:32

score 0 · Answer 2 · answered Oct 04 '15 at 18:37

This problem has been solved, I used

$scope.my_array = $scope.my_array.concat(item)

Instead of using .push() method.

I don't know if the push method of the array is a problem, but after concating the value into array, worked for me, now the array values are visible in input field.

How to bind Array from angular $scope to the input

2 Answers2