Populate array in angularJS model from view

Question

I am building an angularJS on client side and asp.net as backend. I have a aspx repeater that generate html on server side. I want to populate and array of angular model so that it can be used to make client side interactive application.

            <div ng-controller="myController">
                    <input type="number"id='1' ng-model="number"/>
                    <input type="number"id='2' ng-model="number"/>
                    <input type="number"id='3' ng-model="number"/>
                    <input type="number"id='4' ng-model="number"/>
                    <input type="number"id='5' ng-model="number"/>                        

            </div>

I want to have all the numbers in an array of my model. is it possible to populate model array from the already generated html.

Im sure it's possible in a hacky way...you should iterate over the data client-side with ng-repeat to provide easier Angular interaction — tymeJV
– tymeJV, Commented Jul 15, 2014 at 13:36

Matt M · Accepted Answer · 2014-07-15 13:46:03Z

3

Make $scope.numbers an array and use ng-repeat like this: $scope.numbers = [1,2,3,4,5];

In your markup:

<div ng-controller="myController" ng-repeat="number in numbers">
                    <input type="number" id="number{number}" ng-model="number"/>
</div>

answered Jul 15, 2014 at 13:46

Matt M

3,7795 gold badges53 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Edminsson · Accepted Answer · 2014-07-15 14:29:45Z

0

When you are generating html code on the server side you can use ngInit to place some data in the scope. You could write something on the server side:

<div ng-controller="myController" ng-init="myData=[{type:'number', id:1, model:'number1'},{type:'number', id:2, model:'number2'}]">
  <div>{{numbers}}</div>
  <input ng-repeat="item in myData" type="{{item.type}}" id="{{item.id}}" ng-model="numbers[item.model]"/>
</div>

and your controller could look like this

app.controller('myController', function($scope) {
  $scope.numbers = {};
});

answered Jul 15, 2014 at 14:29

Edminsson

2,51422 silver badges25 bronze badges

1 Comment

Ishaan Puniani Over a year ago

Hi, As i am using asp:repeater and serializing and formatting data like myData=[{type:'number', id:1, model:'number1'},{type:'number', id:2, model:'number2'}] would be an overhead. I am looking for an option that process the html view to populate data in the model.

Collectives™ on Stack Overflow

Populate array in angularJS model from view

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related