AngularJS : ng-model dynamic binding does not work

Question

for some reason I cannot get the below 2 way binded. I'm trying to make a dynamic way of filling the ng-model in forms

html:

<thead ng-repeat="field in fields">
<tr>
    <th>
        <select ng-model="{{field.day}}"></select> 
    </th>
    <th>
        <select ng-model="{{field.month}}"></select>
    </th>
    <th>
        <select ng-model="{{field.morning}}"></select>
    </th>
    <th>
        <select ng-model="{{field.eveningOpen}}"></select>
    </th>
    <th>
        <select ng-model="{{field.eveningClosing}}"></select>
    </th>
    <th>
        <input type="checkbox" ng-model="{{field.checkMorning}}" />
    </th>
    <th>
        <input type="checkbox" ng-model="{{field.checkEvening}}" />                                        
    </th>
</tr>
</thead>
</table>

<!-- add extra field -->
<button class="btn" ng-click="addNew()"c>add extra field</button>

<!-- delete last field -->
<button ng-show="fields.length > 0" class="btn" ng-click="deleteLast()"c>remove last extra field</button>

and here the angular/javascript:

$scope.fields = [];

$scope.addNew = function() {
    var newItemNo = $scope.fields.length+1;
    $scope.fields.push(
                        {
                            'day'            :'day'+newItemNo,
                            'month'          : 'month'+newItemNo,
                            'morning'        : 'morning'+newItemNo,
                            'eveningOpen'    : 'eveningOpen'+newItemNo,
                            'eveningClosing' : 'eveningClosing'+newItemNo,
                            'checkMorning'   : 'checkMorning'+newItemNo,
                            'checkEvening'   : 'checkEvening'+newItemNo
                        }
                      );
    console.log($scope.fields);
};

$scope.deleteLast = function() {
    $scope.fields.pop();
}

am I missing some limitation because everyone who did it this way on stack was successfull :/

Index · Accepted Answer · 2014-06-09T15:49:28.073

2

Your problem is ng-model="{{ obj.prop }}", it should simply be ng-model="obj.prop". Using {{}} will make Angular attempt to bind on the resolved property of the object. Also, since your objects are not unique I would suggest adding the track by function to the iteration.

Edit: Also, as mentioned below select also requires the ngOptions directive. Check-boxes can use string values with the ngTrueValue and ngFalseValue directives.

edited Jun 09 '14 at 15:49

answered Jun 08 '14 at 20:48

Index

2,351
3
33
50

A new object will be pushed everytime, so no reason to use `track by`. Well, at least not for the reason given :) – tasseKATT Jun 08 '14 at 20:54
Hmm for some reason obj.prop syntax still doesn't do anything. Could you maybe give a proper example of doing this, or is it impossible/bad practice? – user1213904 Jun 08 '14 at 21:02
@tasseKATT I've had problems with this in the past, but that was in relation to copying object as well. > user1213904 If you could create a fiddle I'm sure we can work it out. Also, please don't edit our your original code as it leaves any answers meaningless for future visitors :) – Index Jun 08 '14 at 21:48
oh sorry, I changed it back again :). Here is a jsfiddle http://jsfiddle.net/ADukg/5329/, so basically i'm trying to fill the fields array dynamically based on the forms (generated). I've tried things like this: http://stackoverflow.com/questions/21789833/angularjs-ng-repeat-use-index-inside-ng-model-directive but without success – user1213904 Jun 08 '14 at 22:45

score 0 · Answer 2 · answered Jun 08 '14 at 23:13

As has already been said, you shouldn't be binding with ng-model="{{field.day}}", just use ng-model = "field.day".

But the other problem is that you are binding to select elements that don't have any options.

<select ng-model="field.day">
  <!--<option val="1">Need some options here</option> -->
</select>

What are the dropdown options that you intend to have? If you change the select to an input, you'll see that the value is being binded.

<input type="text" ng-model="field.day"></input>

Similarly, for the checkboxes you should be binding to a boolean value. If you bind to a string value like checkEvening1, the checkbox will always be unchecked.

JSFiddle

AngularJS : ng-model dynamic binding does not work

2 Answers2