javascript - Angular Checkboxes not Binding Properly -
having trouble figuring out problem involving angular checkbox form generated api.
i can create checkboxes 2 problems: checkedness of boxes not match values in what's coming api, , when click checkboxes name value changes default "true" or "false." have seen other similar questions can't work. plunk here , source code below:
<!doctype html> <html ng-app="checktest"> <head> <meta charset="utf-8"> <title>angular multiple checkboxes</title> <style> label {display:block;} </style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script> <script type="text/javascript"> var jsonobj = {"fruits":[ { "name": "apple", "desc": "abcdefg", "selected": "true", "status": "created" }, { "name": "broccoli", "desc": "abcdefg", "selected": "true", "status": "none" }, { "name": "cucumber", "desc": "abcdefg", "selected": "false", "status": "created" }, { "name": "daikon", "desc": "abcdefg", "selected": "false", "status": "none" } ]}; var fruitsobj = jsonobj.fruits; </script> </head> <body> <div ng-controller="mainctrl"> <label ng-repeat="fruit in fruits"> <input type="checkbox" name="fruitselect" ng-model="fruit.name" ng-value="{{fruit.name}}" ng-checked="fruit.selected"> {{fruit.name}} </label> <p>services: {{fruits}}</p> </div> <script type="text/javascript"> var app = angular.module('checktest', []); app.controller('mainctrl', function($scope) { $scope.fruits = fruitsobj; }); </script> </body> </html>
simply booleans should true
or false
rather string 'true'
or 'false'
additionally there not need of ng-checked
directive. need use {{index}}
in form field become unique element of form doing serviceselect-{{$index}}
markup
<input type="checkbox" name="serviceselect-{{$index}}" ng-model="fruit.selected" ng-value="{{fruit.name}}" />
Comments
Post a Comment