If the goal is one-way binding, use ng-checked but don’t use interpolation ({{ }}):
<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" >
Use boolean values in the controller:
$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;
}
The DEMO
<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>
Maybe, this code will help you
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>
Use object to solve this issue and also use ‘==’ instead of ‘===’ if you are not sure about the data type that is returned.
<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;
}
i want to show on and off based on scope variable. but its always showing off , incase of on or checked also.in the console window its showing checked, but in the toggle button its showing off
html
<input type="checkbox" disabled ng-checked="{{comp1status}}"
data-toggle="toggle" data-onstyle="outline-success"
data-offstyle="outline-danger"><br />
tried with
<input type="checkbox" disabled ng-model="comp2status" data-toggle="toggle"
data-onstyle="outline-success" data-offstyle="outline-danger">
this also not worked
js
$scope.comp1status = response.data.ISCmpr1;
if ($scope.comp1status === "0") {
$scope.comp1status = "checked";
}
else {
$scope.comp1status = "unchecked";
}
i have set true and false , that also not working. ng-checked=”{{comp2status}}”
$scope.comp3status = “true”;?.
If we are not sure about the data type that is returned by the API, then it is acceptable. Using === is good only if the data is managed by data
It’s best to determine the API response format instead of guessing at types. When JS does the
