How do I add more meaningful names to ng-model bindings?

Question

How do I add more meaningful names to ng-model bindings?

The code I am playing around with can be found here.

As of now, in all of my text fields, ng-model has only one name, fieldData. When I take the created javascript object and make it into a JSON object, I get the following:

[{"pHolder":"ID goes here","fieldData":"123"},{"pHolder":"Description goes here","fieldData":"456"},{"pHolder":"Drop Dead Date goes here","fieldData":"789"}]

Since each field has a different meaning, I would like that to be reflected in the bound name. So instead of an array with three objects that each have the string called fieldData, I would like an array of three objects where foo bar and baz are substituted in each place where there is now fieldData.

How do I do that?

angularjs

Answer 1

Javascript Array objects are quite flexible, as any other aspect of it, and you can use that to your advantage :) ngRepeat iterates through any array, be it ordered or associative (which are basically the same). So, if you change your array to:

$scope.entryFields = {
        id: {pHolder:'ID goes here',fieldData:""},
        description: {pHolder:'Description goes here',fieldData:""},
        date: {pHolder:'Drop Dead Date goes here',fieldData:""}
        };

The ng-repeat element will still work (you may want to reorder it, as it orders alphabetically by key name, by default) without any changes, but you can adress the fields by name (dot notation). See the updated fiddle here.