如何使用AngularJS设置数据库中复选框中选中的默认值 - How to set default value checked in a checkbox from database using AngularJS

How to set default value checked in a checkbox from database using AngularJS

编辑记录时，数据会出现在各自的字段中进行编辑，但如果其值为1，则不会选中复选框。

如果字段的数据类型为tinyint，则如果字段具有1，则应处于选中状态，而如果字段具有0，则应不处于选中状态。我正在通过PHP从JSON数组中检索数据。我试图通过ng-checked="{{rec.isSpecial}}"获得价值，但它不起作用。

这是我的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>

这是我的JS

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

由于您的数据返回数字，而不是真值或假值，因此您可以这样做：

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

有关更多信息，请参阅fiddle。

您根本不需要ng-checked，ng-model就足够了。如果您的rec.isSpecial设置为1以进行检查，那么只需将您的input设置为：

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

Angular将自动选中该复选框。

表达式ng-checked={{ ... }}需要一个true或false语句。如果您要在Angular控制器中设置rec.isSpecial = true，那么您的代码应该可以工作！

'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>

如果在标记输入中使用ng-model，则实际上并不需要指令ng-checked。

由于它是一个复选框，所以模型将是一个布尔值，因此您需要进行强制转换。此示例适用于

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;
}