While editing the record the data es in their respective fields for editing, but the checkbox is not checked if its value is 1.

It should be in checked state if it has 1 and not checked if it has 0 as the datatype of the field is tinyint. I am retrieving the data from JSON array via PHP. I am trying to get value by ng-checked="{{rec.isSpecial}}" but it is not working.

Here is my HTML:

<div class="form-group">
  <div class="col-lg-offset-2 col-lg-10">
    <div class="checkbox c-checkbox">
      <label>
        <input type="checkbox" ng-checked="{{rec.isSpecial}}" ng-model="rec.isSpecial">
        <span class="fa fa-check"></span>Special
      </label>
    </div>
  </div>
</div>

While editing the record the data es in their respective fields for editing, but the checkbox is not checked if its value is 1.

It should be in checked state if it has 1 and not checked if it has 0 as the datatype of the field is tinyint. I am retrieving the data from JSON array via PHP. I am trying to get value by ng-checked="{{rec.isSpecial}}" but it is not working.

Here is my HTML:

<div class="form-group">
  <div class="col-lg-offset-2 col-lg-10">
    <div class="checkbox c-checkbox">
      <label>
        <input type="checkbox" ng-checked="{{rec.isSpecial}}" ng-model="rec.isSpecial">
        <span class="fa fa-check"></span>Special
      </label>
    </div>
  </div>
</div>

here is my JS

$scope.rec = $resource('api/AdminArea/category/edit/:id', {
  id: id
}).get(function(data) {
  $scope.rec = data;
});

• javascript
• php
• angularjs

• check without {{}} for ng-check – Divesh Oswal Commented Dec 17, 2015 at 11:45
• thanx for reply let me check – usman ahmad Commented Dec 17, 2015 at 11:47

5 Answers 5

Since your data returns numbers and not true or false values you could do like so:

<div class="form-group">
    <div class="col-lg-offset-2 col-lg-10">
      <div class="checkbox c-checkbox">
        <label>
          <input type="checkbox" ng-checked="rec.isSpecial==1" ng-model="rec.isSpecial">
          <span class="fa fa-check"></span>Special
        </label>
      </div>
    </div>
  </div>

see fiddle for more info

You don't need ng-checked at all, ng-model is enough for it to work. If your rec.isSpecial is set to 1 for it to be checked then just your input like this:

<input type="checkbox" ng-model="rec.isSpecial" ng-value="1" />

and the Angular will automatically check that checkbox.

The expression ng-checked={{ ... }} expects a true or false statement. If you would set rec.isSpecial = true, in your Angular controller, your code should work!

'use strict';
var app = angular.module('MyApp',[]); 
app.controller('myController', function ($scope) {
   $scope.isSpecial =true;
})

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="form-group" ng-app ="MyApp" ng-controller="myController">
                              <div class="col-lg-offset-2 col-lg-10">
                                 <div class="checkbox c-checkbox">
                                    <label>
                       <input type="checkbox" ng-checked="{{isSpecial}}" ng-model="isSpecial">
                                       <span class="fa fa-check"></span>Special
                                      </label>
                                 </div>
                              </div>
                           </div>

You don't really need the directive ng-checked if you are using ng-model in the tag input.

Since it is a checkbox, the model will be a boolean, so you need to make a cast. This example will work

HTML

<div data-ng-app="app">

  <div data-ng-controller="MainController">
    Check
    <input type="checkbox" data-ng-model="isSpecial">
  </div>
</div>

JS

angular.module('app', []);

angular.module('app')
    .controller('MainController', mainController);

mainController.$inject = ['$scope'];

function mainController($scope){

  $scope.check = 0;
  $scope.isSpecial = ($scope.check === 1) ? true : false;

}