Data Binding to a specific item of an array in Angular

Question

Given a data structure that contains an array of JavaScript objects, how can I bind a certain entry from that array to an input field using Angular?

The data structure l

Answer 1

I personally would reorganize the array in a way that field property of an entry of the array become the identifier of the object. Mhhh that sentence may sound strange. What I mean is the following:

$scope.data = {
    name: 'F1',
    fields: {
        F1: {
           value: "1F"
        },
        F2: {
           value: "2F"
        }
    }
};

If you want to bind a the value dynamically and it's an easy and quick way to achieve it. Here is your fiddle modified so that it words. http://jsfiddle.net/RZFm6/

I hope that helps

Answer 2

You can use an array of objects, just not an array of strings.

HTML:

<div ng-repeat="field in data.fields">
    <input ng-model="field.val"/>
</div>

JS:

$scope.data = {
    name: 'F1',
    fields: [
        { val: "v1" },
        { val: "v2" }
    ]
};

I've updated @Flek's fiddle here: http://jsfiddle.net/RZFm6/6/

Edit: Sorry just read your question properly, you can still use an array with:

<label>Bound to F1:</label>
<input ng-model="data.fields[0].value"/>

though maybe stop and think. Is there going to be variable number of fields ? or are you making a predetermined number of fields ? Use an array in the former and an object for the latter.

Answer 3

One way to do it is to simply add the necessary references to the scope, like this:

$scope.fieldF1 = fieldValue('F1');
$scope.fieldF2 = fieldValue('F2');

And then use those references:

<input ng-model="fieldF1.value"/>
<input ng-model="fieldF2.value"/>

Fiddle: http://jsfiddle.net/cbnAU/5/

Note: I'm assuming that $scope.data is static, but if it happens to be dynamic you can always watch for changes on it and recalculate the references...