флажок переключателя не работает в angular js, он только всегда показывается - PullRequest
1 голос
/ 04 марта 2020

Я хочу показать и выключить на основе переменной области. но он всегда показывается, включается или проверяется также. В окне консоли его показ проверен, но при переключении его показ выключается

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

Ответы [ 3 ]

0 голосов
/ 04 марта 2020

Если целью является односторонняя привязка, используйте ng-checked, но не используйте интерполяцию ({{ }}):

<input type="checkbox" disabled  ̶n̶g̶-̶c̶h̶e̶c̶k̶e̶d̶=̶"̶{̶{̶c̶o̶m̶p̶1̶s̶t̶a̶t̶u̶s̶}̶}̶"̶
                                 ng-checked="comp1status" >

Используйте логические значения в контроллере:

$scope.comp1status = response.data.ISCmpr1;
if ($scope.comp1status === "0") {
    ̶$̶s̶c̶o̶p̶e̶.̶c̶o̶m̶p̶1̶s̶t̶a̶t̶u̶s̶ ̶=̶ ̶"̶c̶h̶e̶c̶k̶e̶d̶"̶;̶
    $scope.comp1status = true;
}
else {
    ̶$̶s̶c̶o̶p̶e̶.̶c̶o̶m̶p̶1̶s̶t̶a̶t̶u̶s̶ ̶=̶ ̶"̶u̶n̶c̶h̶e̶c̶k̶e̶d̶"̶;̶
    $scope.comp1status = false;
}

ДЕМО

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app>
    <input type="checkbox" disabled ng-checked="check">Checkbox<br>

    <select ng-model="check">
       <option ng-value="" disabled>Select value</option>
       <option ng-value="false">unchecked</option>
       <option ng-value="true">checked</option>
    </select>
 </body>   
0 голосов
/ 04 марта 2020

Может быть, этот код поможет вам

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>
0 голосов
/ 04 марта 2020

Используйте объект, чтобы решить эту проблему, а также используйте «==» вместо «===», если вы не уверены в типе возвращаемых данных.

<input type="checkbox" ng-model="someObject.someProperty"> Check Me!

// Controller

$scope.comp1status = response.data.ISCmpr1;
if ($scope.comp1status == "0") {
  $scope.someObject.someProperty = false;
}
else {
  $scope.someObject.someProperty = true;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...