AngularJS : bind unpredictable amount of input in a form

Question

I am making an application by ionic and working along with Laravel server. The problem is, I have a list of items store in my server. In ionic application I will request for information of items from server to create a form. I have my code here,

<div ng-repeat="itemGroup in mydata">
    <div class="item item-divider nn-card-header">
        {{itemGroup.name}}
    </div>
    <ion-list>
        <ion-item ng-repeat="item in itemGroup.items">
            <h3>{{ item.name }}</h3>
            <div class="item range range-positive">
                broken
                <input type="range" id="{{ item.idgB }}" min="0" max="{{ item.max }}" ng-model="item.idgB" ng-init="item.idgB=0">
                {{ item.idgB }}
            </div>
            <div class="item range range-positive">
                missing
                <input type="range" id="{{ item.idgM }}" name="volume" min="0" max="{{ item.max }}" ng-model="item.idgM" ng-init="item.idgM=0">
                {{ item.idgM }}
            </div>
        </ion-item>
    </ion-list>
  </div>

that mydata is this json data:

[{
    "name":"name",
    "items":[{
        "id":1,
        "name":"itemA",
        "max":2,
        "idgM":"m.3.1.1",
        "idgB":"b.3.1.1"
    }]
}]

My question is, I don't know how to get value from the input because I can't use jquery to find element. I have an idea that i will send the list of all unique IDs of items from the server to application. But I do not know how to get ng-model data by using string variable.

Francesco Borzi · Accepted Answer · 2016-05-16 21:17:14Z

0

You don't need jQuery to get the value from the input, you have your array of objects that you are looping:

itemGroup.items

and in your code you are binding each object of that array with:

ng-repeat="item in itemGroup.items"
ng-model="item.idgB"
ng-model="item.idgM

then I expect to have those values as idgB and idgM properties of each element of your itemGroup.items array

but since you are using:

ng-repeat="itemGroup in mydata"

the itemGroup(s) themselves are elements of the mydata array, then in your controller in order to access to those inputs data, you should have something like this:

angular.forEach(mydata, function(itemGroup, key) {
  angular.forEach(itemGroup, function(item, key) {
    console.log("First input value: " + item.idgB);
    console.log("Second input value: " + item.idgM);
  });
});

edited May 16, 2016 at 21:17

answered May 16, 2016 at 21:08

Francesco Borzi

63.2k56 gold badges203 silver badges280 bronze badges

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

2 Comments

Knighty Ra Over a year ago

Thank for your answer. but I still have a question, is there anyway I can use a $scope.name while I have name as a string variable.

Francesco Borzi Over a year ago

sure, $scope.name in your controller is bound to {{ name }} of your view

Jernej Pirc · Accepted Answer · 2016-05-16 21:16:22Z

0

Value from input is stored in model, so you don't need to find element, you already use binding.

Here is help for how to use input in angular: https://docs.angularjs.org/api/ng/directive/input

answered May 16, 2016 at 21:16

Jernej Pirc

5141 gold badge4 silver badges13 bronze badges

4 Comments

Jernej Pirc Over a year ago

for Knighty Ra : Also, tell me where and how you want to use this input value.

Knighty Ra Over a year ago

i want to send all of values to server via ajax when click a button. I don't know how to do all these things. Thank for your help.

Jernej Pirc Over a year ago

you have to post mydata back to server. mydata will have all new values, but I don't know how to do this for "Laravel server" because I don't use it. this is what you nead to check stackoverflow.com/questions/31454024/…

Jernej Pirc Over a year ago

or better is this: stackoverflow.com/questions/32422940/…

Community · Accepted Answer · 2017-05-23 12:08:01Z

0

I think question has allready been answered here: How to create an Array with AngularJS's ng-model.

If you have any questions about if, feel free to ask in the comments

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered May 17, 2016 at 9:19

Jur Clerkx

6984 silver badges14 bronze badges

Collectives™ on Stack Overflow

AngularJS : bind unpredictable amount of input in a form

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related