text input not binding to object array

Question

Upon initial rendering the data shows up fine, meaning if I have data for the custom fields the values are displayed on the HTML.

The problem is when I change the values of the custom fields, the changes are not attached back to the object, in other words it appears the binding is only one way for some reason.

I have the following object:

{ 
        "_id" : BinData(3, "6aUPCzvqTUuzZWlWRJCdPQ=="), 
        "name" : "MyObject", 
        "customFields" : [
            {
                "_id" : BinData(3, "ksRiQNZnuE2BKFpjbQEQaQ=="), 
                "name" : "Field 1", 
                "order" : NumberInt(1), 
                "type" : "string", 
                "isMultiValue" : false, 
                "values" : [
                    "11111"
                ]
            }, 
            {
                "_id" : BinData(3, "S9bSzoqy5EafPP0NEdbfCw=="), 
                "name" : "Field 2", 
                "order" : NumberInt(2), 
                "type" : "string", 
                "isMultiValue" : false, 
                "values" : [
                    ""
                ]
            }
        ]
    }

I have the following HTML bound to it:

                    <div ng-repeat="customField in customer.customFields">
                        <p>
                            {{customField.name}}:
                        </p>
                        <p ng-repeat="customFieldValue in customField.values">
                            <input type="text" class="form-control" ng-model="customFieldValue" />
                        </p>
                    </div>

Update: After the suggestion from @ngLover I got the binding to work correctly in this case:

Here is the new object:

{ 
    "_id" : BinData(3, "FKibZl5WDk2jprg1gY5KAQ=="), 
    "name" : "MyObject", 
    "customFields" : [
        {
            "_id" : BinData(3, "3HUUHy1FMUaxD41JcuYqQw=="), 
            "name" : "Field 1", 
            "order" : NumberInt(1), 
            "type" : "string", 
            "isMultiValue" : false, 
            "values" : [
                {
                    "value" : "Data 1"
                }
            ]
        }, 
        {
            "_id" : BinData(3, "2t0oiy5LukSSuPR9XYKwcA=="), 
            "name" : "Field 2", 
            "order" : NumberInt(2), 
            "type" : "string", 
            "isMultiValue" : false, 
            "values" : [
                {
                    "value" : "Data 2"
                }
            ]
        }
    ]
}

New HTML:

                  <div ng-repeat="customField in customer.customFields">
                        <p>
                            {{customField.name}}:
                        </p>
                        <p ng-repeat="customFieldValue in customField.values">
                            <input type="text" class="form-control" ng-model="customFieldValue.value" >
                        </p>
                    </div>

customField.values is an array make it a simple var like values:11111 — ngLover
– ngLover, Commented Nov 2, 2015 at 6:40
@ngLover I changed customField.values to be a custom object and now the binding is working fine. — CodeMilian
– CodeMilian, Commented Nov 2, 2015 at 6:58

levi · Accepted Answer · 2015-11-02 06:50:28Z

1

remember that each ng-repeat has its own scope, so, in your second ng-repeat, ng-model="customFieldValue" is being attached to the second ng-repeat scope, not the outer scope.

edited Nov 2, 2015 at 6:50

answered Nov 2, 2015 at 6:38

levi

22.8k7 gold badges79 silver badges76 bronze badges

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

1 Comment

svarog Over a year ago

child scopes inherit from parent scopes. and you can access parent scope properties using $scope.$parent.someproperty

Collectives™ on Stack Overflow

text input not binding to object array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related