javascript - 切换复选框在 Angular js 中不起作用，它只是一直在炫耀

Question

我想根据范围变量显示和关闭。但它总是炫耀，以防打开或选中。在控制台窗口中它的显示被选中，但在切换按钮中它的炫耀

html

<input type="checkbox" disabled ng-checked="{{comp1status}}"
       data-toggle="toggle" data-onstyle="outline-success"
       data-offstyle="outline-danger"><br />

试过

<input type="checkbox" disabled ng-model="comp2status" data-toggle="toggle"
       data-onstyle="outline-success" data-offstyle="outline-danger">

这也行不通

js

$scope.comp1status = response.data.ISCmpr1;
if ($scope.comp1status === "0") {
    $scope.comp1status = "checked";
}
else {
    $scope.comp1status = "unchecked";
}

标签： javascripthtmlcssangularjstwitter-bootstrap

Answer 1

也许，这段代码会帮助你

class AppController {
  constructor($scope, $q) {
    this.deferred = $q.defer();
    $scope.comp1status = true;
    this.getComp2Status()
      .then(comp2status => {
        $scope.comp2status = comp2status;
      });
  }

  getComp2Status() {
    setTimeout(() => {
      this.deferred.resolve(true);
    }, 2000);
    return this.deferred.promise;
  }
}

AppController.$inject = ['$scope', '$q'];

angular.module('app', [])
  .controller('appController', AppController);

angular.bootstrap(document.body, ['app']);

html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app {}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div ng-controller="appController" class="app">
  <div class="form-group form-check">
    <input ng-model="comp1status" type="checkbox" class="form-check-input" id="comp1status">
    <label class="form-check-label" for="comp1status">Comp1 status</label>
  </div>
  <div class="form-group form-check">
    <input ng-model="comp2status" type="checkbox" class="form-check-input" id="comp2status">
    <label class="form-check-label" for="comp2status">Comp2 status async</label>
  </div>
</div>