如何使用AngularJS在数据库的复选框中设置默认值

Question

While editing the record the data comes 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;
});

Answer 1

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

Answer 2

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.

Answer 3

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!

Answer 4

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

 <script src="https://ajax.googleapis.com/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> 

Answer 5

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;

}