I want to make bootstrap switch by default on and read-only in angularJS.
This is my code:
<input type="checkbox"
ng-model="data.sla_enabled"
ng-readonly="true"
bs-switch
switch-size="mini"
ng-change=""
ng-checked="data.sla_enabled">
I use ng-readonly but It will not work.
You need to keep checkbox disabled and checked. As shown below:
<input type="checkbox"
ng-model="data.sla_enabled"
ng-readonly="true"
bs-switch
switch-size="mini"
ng-change=""
checked="checked"
disabled="disabled">
I think you need to use ng-disabled directive for checkboxes and not ng-readonly.
Here is an example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<label>Check me to make checkbox readonly: <input type="checkbox" ng-model="checked"></label><br/>
<input type="checkbox" ng-disabled="checked" />
</div>
</body>
</html>
More info you can find here:
As mentioned by Rajmond use ng-disabled, just added a checked property to keep it ON by default.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<input type="checkbox" checked ng-disabled="true"/>
</div>
</body>
</html>
Related
I have the following AngularJS code and I want to be able to total the calculated fields that appear in the results1 and results2 disabled inputs. Can someone advise how this is done?
Thanks,
John
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<form name="form" action="index.php" method="post" autocomplete="off">
<input type="text" name="field1" ng-model="field1" ng-init="field1='10'">
<input type="text" name="field2" ng-model="field2" ng-init="field2='10'">
<br>
<input type="text" name="results1" value="{{(+field1*100|currency)}}" disabled>
<input type="text" name="results2" value="{{(+field2*100|currency)}}" disabled>
</form>
<h1>{{(+results1--results2|currency:"")}}</h1>
</body>
</html>
Use ng-value instead of value to get that expression evaluated properly
<h1>{{(+field1--field2|currency:"")}}</h1>
<h1>{{(+field1*100--field2*100|currency:"")}}</h1>
Can you try like this ?
Is it possible to access $dirty property of some element which is not put directly in form, something like:
<form name="form">
<div name="divInForm">
<input type="text" name="inputInDivInForm">
</div>
<button ng-disabled="form.divInForm.inputInDivInForm.$dirty"></button>
</form>
At first, you must set ngModel to your input, otherwise it won't work.
Also, you have to access it this way: form.inputInDivInForm.$dirty.
Look at this simple example:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<form name="form">
<div name="divInForm">
<input type="text" ng-model="any" name="inputInDivInForm">
</div>
<button type="submit" ng-disabled="form.inputInDivInForm.$dirty">Click</button>
</form>
<pre ng-bind="form.inputInDivInForm | json"></pre>
</body>
</html>
I am looking for something like this:
<input type="text" ng-model="stuff1">
<input type="checkbox" ng-model="stuff">
<div ng-class="{'stuff': stuff};stuff1">Stuff!!!</div>
However this doesn't work
You can achieve what you want by two ways:
Using the array notation of ngClass:
<div ng-class="[{'stuff': stuff}, stuff1]">Test</div>
Separating class and ngClassdirective, as below:
<div class="{{stuff1}}" ng-class="{'stuff': stuff}">Stuff!!!</div>
Take a look:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<input type="text" ng-model="stuff1">
<input type="checkbox" ng-model="stuff">
<div ng-class="[{'text-success': stuff}, stuff1]">Stuff1!!!</div>
<div class="{{stuff1}}" ng-class="{'text-danger': stuff}">Stuff2!!!</div>
</body>
</html>
I want to uncheck the two checkbox on startup, and allow user to select only one check box at a time. Can I do it only using from ng-... attribute?
I am trying the following code
<div style="border:1px solid">
<label><input type="checkbox" ng-checked="!Titleshine_check" ng-model="blink_check">Blink</label>
(OR)
<label><input type="checkbox" ng-checked="!blink_check" ng-model="Titleshine_check">Shine</label>
<br>
</div>
http://plnkr.co/edit/2BLssmNTB5r8LjeGZf65?p=preview
Here you got full example
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.17/angular.js" data-semver="1.3.17"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div style="border:1px solid">
select type:
<form>
<input type="radio" name="opt1" ng-change="radioValue" ng-model="radioValue" value="this" unchecked> this
<br>
<input type="radio" name="opt2" ng-change="radioValue" ng-model="radioValue" value="that" unchecked> that
</form>
<span ng-bind="radioValue"></span>
</div>
</body>
</html>
and js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.radioValue="empty";
});
If you really, really want the checkboxes you can do it like this:
http://plnkr.co/edit/ukDKjBZsp7AtY5UiIhBj?p=preview
<div style="border:1px solid">
<label><input type="checkbox" ng-model="blink_check">Blink</label>
(OR)
<label><input type="checkbox" ng-click="blink_check = !blink_check" ng-model="!blink_check" >Shine</label>
<br>
</div>
I have a list of checkboxes... when any of them are checked I want them to print in the area where I use the {{}}... If it is not checked then I want there to be no visual sign that there is anything there... see my sandbox here http://plnkr.co/edit/lvkdCmg7dQabuRKsBT5A?p=preview
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>AngularJS Multiple Checkboxes</title>
<style>
label {display: block;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
</head>
<body>
<div class="col-sm-7">
<input type="checkbox" ng-model="fali">
fa-li
<br>
<input type="checkbox" ng-model="falg">
fa-lg
<br>
<input type="checkbox" ng-model="fa2x">
fa-2x
<br>
<input type="checkbox" ng-model="fa3x">
fa-3x
<br>
<input type="checkbox" ng-model="fa4x">
fa-4x
<br>
<input type="checkbox" ng-model="fa5x">
fa-5x
<br>
<input type="checkbox" ng-model="spin">
fa-spin
</div>
<div class="col sm-4">
<xmp class="prettyprint">
<i class="fa {{fali}} {{falg}} {{fa2x}} {{fa3x}} {{fa4x}} {{fa5x}} {{spin}}"></i>
</xmp>
</div>
<script>
</script>
</body>
</html>
It works currently but it shows true/false instead of the value and it has a space in the string for non checked items
Use ng-true-value and ng-false-value to specify the value you want. Otherwise the value is true or false.
<input type="checkbox" ng-true-value="fa-li" ng-false-value="" ng-model="fali">
fa-li
Updated plnkr: http://plnkr.co/edit/8BxnlsrvIhPmrGup7UaV?p=preview
Use ng-true-value="your value" and ng-false-value="your value" on your checkbox elements to give values aside from true and false to checkboxes. To show the text initially, set your models to false.
Plunkr: http://plnkr.co/edit/V4IA9uUS4feDXcXC4BMk?p=preview