Make checkbox not clickable in Angular - javascript

I have a checkbox which I want to make not clickable. But it also has ng-click function attached. How to do this ?
<input id="record-2" type="checkbox" class="checkbox" ng-click="doIfChecked()">
I tried adding ng-readonly, ng-disabled but it did not work. I added css pointer-events: none but it did not work. I want this checkbox to be not clickable on boolean true/false expression. any idea?

Can you handle the condition of non-clickability inside the ng-click function? If not then:
<input ng-disabled="disableCondition" id="record-2" type="checkbox" class="checkbox" ng-click="disableCondition?(return false):doIfChecked()">
Something like above should work for you.
Explanation:
If you know the condition to disable the input, then use the same condition to conditionally call the function or return false on click. Same logic can be handled in the ng-click handler too.

Here is a working sinppet
var app = angular.module("myApp", [])
app.controller("mainController", ["$scope", function($scope){
$scope.someFlag=false;
$scope.doIfChecked= function(){
$scope.someFlag=true;
}
}]);
select{
width:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<input id="record-2" ng-controller="mainController" type="checkbox" ng-controller="mainController" class="checkbox" ng-disabled="someFlag" ng-click="doIfChecked()">
</body>

Related

I need to pass a true or false value after checkbox is clicked to the function in input flag using angular js

<input class="bx--toggle" id="toggle-view" type="checkbox" ng-model="vm.monthView" ng-change="vm.getRelevantData()"
ng-attr-data-modal-target="{{vm.alertForSaveAll ? '#add-save-all-alert-modal': 'undefined'}}">
i have following Html my default vm.monthView is true i need to pass true or false with the check box of this type being checked or unchecked....and need to pass same to the function.
If I understand you question correctly, you are trying to get the controller to receive true if the checkbox is checked, and false if not.
If you look in angular's documentation for input[type=checkbox] you will see a very simple example that does exactly that.
I am copying the relevant part here.
<input type="checkbox" ng-model="checkboxModel.value2"
ng-true-value="'YES'" ng-false-value="'NO'">
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
</head>
<body data-ng-app="role" data-ng-controller="fooController">
<input class="bx--toggle" id="toggle-view" type="checkbox" ng-model="monthView" ng-change="getRelevantData(monthView)"></select>
</body>
</head>
<script>
var app = angular.module('role', []);
app.controller('fooController', function($scope){
$scope.getRelevantData = function(monthView){
alert(monthView)
}
});
</script>

$event not defined in ng-change on text input

I hope my issue is simple to solve, I can't access the value by ng-model because i have multiple of these boxes as they are rendered as part of a list of inputs in a form. I am trying to get the ID and text value of a text box with ng-change. heres my html:
<input type="text" class="other-box" ng-model="test" id="4" ng-change="otherBoxUpdate(this)"/>
(ng-model is required, which is why it's in there). Hers is my controller snippet:
$scope.otherBoxUpdate = function (obj, $event) {
console.log(obj)
console.log($event)
console.log($event.target)
}
obj seems to return a scope value, however from what i've read I need to access $event.target, however $event is not defined. What am i doing wrong?
ng-change not allow to pass $event as parameter.
ng-change="otherBoxUpdate(test)"
var myapp = angular.module('app', []);
myapp.controller('Ctrl', function ($scope) {
$scope.otherBoxUpdate = function (obj) {
console.log(obj);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl as vm">
<input type="text" class="other-box" ng-model="test" id="4" ng-change="otherBoxUpdate(4)"/>
</div>
If you only need to identify the input that was clicked, you can pass some other piece of identifying information to your handler. For example, we can pass the id:
<input type="text" class="other-box" ng-model="test" id="4" ng-change="otherBoxUpdate(4)"/>

Using ng-disabled on a group of inputs based on one value

I'm currently using one check box to toggle the disabled attribute on 8 form elements. I've used the ngDisabled Directive on each element. I'm searching for a way that I wouldn't have to put the directive on each of the 8 elements. Is this possible?
Checkbox Toggle
<input type="checkbox" ng-model="aircraftOnGround" />
Current working Disabled directive being used on each form element
ng-disabled="aircraftOnGround"
Codepen here:
CodePen
You can use a fieldset to disable every field inside it.
var $scope = {};
var myApp = angular.module('myApp', []);
myApp.controller('formCtrl', ['$scope', function($scope){
$scope.aircraftOnGround = 'true';
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<form ng-controller="formCtrl">
<fieldset ng-disabled='aircraftOnGround'> <!-- USE NG_DISABLE HERE -->
<input type="text">
<input type="text">
</fieldset>
<br>
<b>aircraftOnGround:</b> <button type="button" ng-click="aircraftOnGround = !aircraftOnGround"><span ng-bind="aircraftOnGround"></span></button>
</form>
</body>
You can disable a collection of DOM elements using a watcher in your controller.
myapp.controller('mainCtrl', function($scope, $element){
$scope.aircraftOnGround = false;
$scope.name = "abdullah";
$scope.$watch('aircraftOnGround',function(value) {
$element.find('.form-control').prop('disabled',value);
});
});
Note: I'm using jQuery in the example.

Revert ng-model value in Angular JS

Is it possible to revert the model value when displaying it?
My controller has this property:
this.config = {client: false, name: true};
And I want to use the values like this:
<label>
<input ng-model="ctrl.config.client"> Client
</label>
<div ng-hide="ctrl.config.client">Client</div>
I'd like to show the input checked when the config.client value is false. How can I do it?
UPDATE: If you want to check a checkbox, and you use $scope you can use ng-true-value="false" and ng-false-value="true" to revert the default values. This works only, if you use $scope instead of this! Here is an example:
<body ng-app="app">
<div ng-controller="ctrl">
<label>
<input type="checkbox" ng-model="config.client" ng-true-value="false" ng-false-value="true">
</label>
<div ng-hide="config.client">Client</div>
</div>
<script>
angular.module('app', []).controller('ctrl', function($scope) {
$scope.config = {client: false, name: true};
});
</script>
</body>
And the plunker to try it: http://plnkr.co/edit/vRIZMb2CpDQAKHu91yhN?p=preview
If I understand correctly I think you want ng-checked.
And then negate it. So something like:
<label>
<input type="checkbox" ng-checked="!ctrl.config.client" ng-model="ctrl.config.client"> Client
</label>
I am assuming you want a checkbox although it isn't clear from your example.

How to check a radio button with angularJS?

I am creating a html / angularjs form. In the form i have a radio button with yes or no. So i want to check by default the button No.
This is the code i use :
My controller :
angular.module('radioExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.myvariable = 'false';
}]);
My html code snippet:
<div class="col-lg-10">
<input type="radio" id="variable" name="variable" ng-model="myvariable" value="true">Yes</input>
<input type="radio" id="variable" name="variable" ng-model="myvariable" value="false">No</input>
</div>
But nothing is selected(checked) when i load the form the first time. I have to click to one value to have one selected (checked)
What's wrong with my code ? Here the plunker link
Thanks
I've made a fiddle for you. Check HERE
You should also set ng-value which should be true or false
<div ng-controller="MyCtrl">
<div ng-repeat="o in options">
<input type="radio" name="group1" ng-model="o.checked" ng-value="o.checked"></input>
<label>{{o.name}}</label>
</div>
</div>
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.options = [
{ name: 'OPT1', id: 1, checked: false },
{ name: 'OPT2',id: 2, checked: false },
{ name: 'OPT3',id: 3, checked: true }
];
}
The reason why it does not work in your plunkr is because you create a module named "radioExample" but you don't use it when you write the HTML code.
Basically, replace this -
<html ng-app>
at the beginning of the code with this
<html ng-app="radioExample">
This way, when you declare the controller, AngularJS knows which module it needs to look into to get the controller.
Note - if you had not associated your controller with a module, then your code would work.
Check out ng-checked. What you have to do is to add ng-app="radioExample" to the html-Tag of your Application.
Then add ng-checked="myvariable == 'false'" and ng-value="'value'" like in the following plunker example:
Plunker
<div class="col-lg-10">
<input ng-checked="myvariable == 'true'" type="radio" id="variable" name="variable" ng-model="myvariable" value="true">Yes
<input ng-checked="myvariable == 'false'" type="radio" id="variable" name="variable" ng-model="myvariable" value="false">No
</div>
Error in data binding. Define myvariable in controller override value in radiobutton. You must use ng-repeat like
<div ng-repeat="o in options">
<input type="radio" name="name" ng-model="o.checked" ng-value="o.checked"></input>
<label>{{o.name}}</label>
</div>
(I use code from previous answer)

Categories

Resources