AngularJS : ng-model dynamic binding does not work

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 :/

Answers


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.


Need Your Help

Noncapturing along with capturing match

c# regex

I am trying to capture the subdomain from huge lists of domain names. For example I want to capture "funstuff" from "funstuff.mysite.com". I do not want to capture, ".mysite.com" in the match. Th...

search string starts and ends with in a multiple occurance of same string

objective-c nsstring nspredicate nsrange nsscanner

I appoligize for the same question but i didnt got the answer i was trying for 2 days m not getting it , can any one help me .

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.