javascript - AngularJS : ng-model dynamic binding does not work -
for reason cannot below 2 way binded. i'm trying make dynamic way of filling 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 field --> <button class="btn" ng-click="addnew()"c>add field</button> <!-- delete last field --> <button ng-show="fields.length > 0" class="btn" ng-click="deletelast()"c>remove last field</button>
and here 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 missing limitation because did way on stack successfull :/
your problem ng-model="{{ obj.prop }}", should ng-model="obj.prop"
. using {{}}
make angular attempt bind on resolved property of object. also, since objects not unique suggest adding track by function iteration.
edit: also, mentioned below select
requires ngoptions directive. check-boxes can use string values ngtruevalue , ngfalsevalue directives.
Comments
Post a Comment