angular store ng-repeat input values into model

Question

I'm having trouble populating an array of input values. I think I know why but I can't seem to get around it.

An input element is created for every item in an array called selectedAttributes[]. I want the value of each input element along with attribute to be stored into a NEW object, thus creating a hash/map.

Existing array: selectedAttributes ["attribute1",...."attribute_N"]

Goal:

{attribute1:'inputValue1', attribute2:'inputValue2'...}

So far, the HTML that doesn't work

    <tbody>
        <tr ng-repeat="attribute in selectedAttributes">
            <td><a>{{attribute}}</a></td>

            <td> ---> </td>

            <td><input ng-model="formFields.attribute" class="field" id="{{attribute}}" type="text" >   </td>
        </tr>
    </tbody>

If this is not possible I thought it would be ok to store the input values into an array then combine the selectedAttributes[] with input value list, but I prefer to avoid that.

Thanks!

Community · Accepted Answer · 2017-05-23 11:57:06Z

1

I am not sure if I understand your question. But here is you can see how to add dynamically the fields. Maybe helpfull Angularjs adding dynamically form fields in various forms

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Mar 22, 2014 at 22:20

J. Davidson

3,31714 gold badges58 silver badges105 bronze badges

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

Comments

nachinius · Accepted Answer · 2014-03-22 22:24:10Z

1

Have you tried using in ng-model formFields[attribute]

answered Mar 22, 2014 at 22:24

nachinius

3402 silver badges6 bronze badges

1 Comment

EKet Over a year ago

That doesn't work. formFields[attribute] is accessing the value of key=attribute. Which doesn't exist, because formFields hasn't been created yet and when it does it won't have any values, that's what I'm trying to do. I'm trying to store not read. I need something like formFields[index] = inputValue.

Chi Row · Accepted Answer · 2014-03-23 00:05:23Z

0

You would need an event to call a function to save the new value to the array.

Here is an example.

http://plnkr.co/edit/wibVbsesfahxmvfLpJ4H

EDIT:

Added a directive so that you can save the new entry either by clicking the button or by enter key in the value field.

edited Mar 23, 2014 at 0:05

answered Mar 22, 2014 at 23:22

Chi Row

1,1067 silver badges18 bronze badges

Comments

EKet · Accepted Answer · 2014-03-23 00:23:09Z

The answer is kind of a combination of the 2 answers below but both very helpful to get me resolve this. It's pretty damn obvious now that I understand what's going on, so I apologize if anyone assumed I was smart enough. I needed to initialize the object with empty values for the attributes, then use formFields[attribute] to bind the input value to attribute_N.

What I think the problem was (would love confirmation/correction here): ng-repeat creates a new input element for every item in the selectedAttributes array which is good, but it also creates a new scope for every row. So ng-model binds to the current scope. Which means if you store anything in ng-model=formFields, the next scope will create a new formFields and add the new scope's value.

Additionally, if you never define your model's "type" (array vs object) I think angular doesn't make any assumptions so it just throws "undefined" to be safe on how to store the value into a model.

Solution So intuitively you'd create the model in the controller first and initialize the type and push values dynamically from the view as they come in.

a. In controller, initialize the new object with empty values for keys in the map.

$scope.formFields = {};

b. Now the object has keys so we can bind the value of the input fields with ng-model to the key with object[key] approach.

   <tbody>
    <tr ng-repeat="attribute in selectedAttributes">
        <td><a>{{attribute}}</a></td>

        <td> ---> </td>

        <td><input ng-model="formFields[attribute]" class="field" id="{{attribute}}" type="text" >   </td>
    </tr>
 </tbody>

I will refrain from marking as answer because I'd like a best practice as answer for future folk and myself.

Is this bad practice? Why or why not? What's better?

Collectives™ on Stack Overflow

angular store ng-repeat input values into model

4 Answers 4

Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Linked

Related