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

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.

Related

AngularJS - How to set the value of the checkbox as true by checking another checkbox?

I have two checkboxes. If you click checkbox B, checkbox A must be checked too. But in my code, when I click checkbox B, the checkbox A is also checked. But the ng-model of checkbox A is not changing it's value from false to true. Can someone help me with this? Thank you in advance! Here's my code below: (Try running the code snippet)
<div ng-app="myApp" ng-controller="myCtrl">
Box a
<input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
Box b
<input type="checkbox" ng-model="box2"> {{box2}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.box1 = false;
$scope.box2 = false;
});
</script>
One solution can be attach a change event handler to the second checkbox and change the box1's scope inside this method.
<div ng-app="myApp" ng-controller="myCtrl">
Box a
<input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
Box b
<input type="checkbox" ng-change="change()" ng-model="box2"> {{box2}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.box1 = false;
$scope.box2 = false;
$scope.change=function(){
$scope.box1=$scope.box2;
}
});
</script>
One single advice:
ng-model and ng-checked are not meant to be used together.
ng-checked is expecting an expression, so by saying ng-checked="true", you're basically saying that the checkbox will always be checked.
You should be able to just use ng-model, binded to a boolean property on your model.
You can add ng-change directive on box2, which will invoke the function, where you can change the value of box1 programmatically, like this:
<div ng-app="myApp" ng-controller="myCtrl">
Box a
<input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
Box b
<input type="checkbox" ng-model="box2" ng-change="checkBox1()"> {{box2}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.box1 = false;
$scope.box2 = false;
$scope.checkBox1 = function() {
$scope.box1 = $scope.box2;
}
});
</script>
Pass same variable into ng-model of both input boxes
<div ng-app="myApp" ng-controller="myCtrl">
Box a
<input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
Box b
<input type="checkbox" ng-model="box2" ng-change="onChange()"> {{box2}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.box1 = false;
$scope.box2 = false;
$scope.onChange= function(){
$scope.box1= $scope.box2;
};
});
</script>
basically, ng-checked does not change the value of $scope.box1.
what you can do is display {{box2 || box1}} instead of {{box1}}
#Commercial Suicide has a good answer. I also found another method which uses less logic. Check the codes below:
<div ng-app="myApp" ng-controller="myCtrl">
Box a
<input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
Box b
<input type="checkbox" ng-click="click()" ng-model="box2"> {{box2}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.box1 = false;
$scope.box2 = false;
$scope.click = function () {
$scope.box1 = $scope.box2;
};
});
</script>

Resolving ng-model outside the form

I have an html file with 2 form elements with input elements inside both. I would be using the ng-if to select which form element I need. The input elements are bound to the same model. But I am unable to resolve it outside the form scope.
<form ng-if="some_name == '1'">
<input ng-model="model_name">
</form>
<form ng-if="some_name == '2'">
<input ng-model="model_name">
</form>
{{model_name}} //This is different from the value of either of the input elements
//it has the initial value which i would assign : $model_name = "xyz"; in my associated js file
The reason you are not able to see those changes outside your form is because you are using 'ngIf' directive to add/remove the DOM and also the 'ngIf' directive creates a new scope.
There are two quick ways to solve this:
1) Make use of 'ngShow'. Look at the below example:
angular.module('app', [])
.controller('HomeController', function($scope) {
$scope.model_name = 'Hi';
$scope.some_name = '1';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="HomeController">
<form ng-show="some_name == '1'">
<input ng-model="model_name">
</form>
<form ng-show="some_name == '2'">
<input ng-model="model_name">
</form>
{{model_name}}
</div>
2) Make the input model an object, instead of a primitive.
angular.module('app', [])
.controller('HomeController', function($scope) {
$scope.model_name = {
value: 'Hi'
};
$scope.some_name = '1';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="HomeController">
<form ng-if="some_name == '1'">
<input ng-model="model_name.value">
</form>
<form ng-if="some_name == '2'">
<input ng-model="model_name.value">
</form>
{{model_name.value}}
</div>

Re-focus input field right after blur event in AngularJS

i have a html input field and would like to stay focussed on it no matter what happens. I know how to achieve it with JQuery but i only want to embed it if i really need to. My code example doesn't work.
My thoughts for code so far:
HTML
<input type="text" ng-blur="refocus()" autofocus>
AngularJS (inside my controller)
$scope.refocus = function($scope, $element) {
$element.focus();
};
I hope you guys have the right inspiration or better solution to solve this :)
You can keep an element focused with the following directive:
angular.module('test', []).directive('stayFocused', function(){
return {
link: function($scope, $element){
$element.on('blur', function(){
$element[0].focus();
});
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
First
<input type="text" stay-focused="" autofocus>
<br />
Second
<input type="text" stay-focused="" autofocus>
</div>

Adding/Removing checked attribute to checkbox dynamiclly in angularjs

How can i simply add and remove checked attribute to check-box using angularjs.
I've find solution from this question,but it requires Jquery
Is any other way to do this without using Jquery?
Here is what i am tried
<input type="checkbox" id="test" class="switch__input" checked="{{checkVal}}">
<input type="button" ng-click="test()" value="test">
JS
module.controller('settingsCtrl',function($scope){
//for adding
$scope.checkVal="checked";
//for removing checkbox
$scope.test=function(){
$scope.CheckVal="";
}
}
But the removing wont work
This is Angularjs recommended way of check and un check checkbox
HTML :
<input type="checkbox" ng-model="checkVal" ng-true-value="true" ng-false-value="false">
Also works
<input type="checkbox" ng-checked="checkVal">
JS :
module.controller('settingsCtrl',function($scope){
//for adding
$scope.checkVal=true;
//for removing checkbox
$scope.test=function(){
$scope.checkVal=false;
}
}
You don't need special directive for this, ngChecked would work well:
var app = angular.module('demo', []).controller('MainController', function($scope) {
$scope.checkVal = true;
$scope.test = function() {
$scope.checkVal = !$scope.checkVal; // or false
};
});
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<div ng-app="demo" ng-controller="MainController">
<input type="checkbox" id="test" class="switch__input" ng-checked="checkVal">
<input type="button" ng-click="test()" value="test">
</div>
Please check working example : DEMO
HTML
<input type="checkbox" id="test" class="switch__input" ng-checked="checkVal">
<input type="button" ng-click="test()" value="test">
Controller:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.checkVal = true;
//for adding/removing checkbox
$scope.test = function() {
$scope.checkVal = !$scope.checkVal;
}
});
I can across a directive to add dynamic attribute may be this can help you
myApp.directive('dynAttr', function() {
return {
scope: { list: '=dynAttr' },
link: function(scope, elem, attrs){
for(attr in scope.list){
elem.attr(scope.list[attr].attr, scope.list[attr].value);
}
//console.log(scope.list);
}
};
});
In the controller
$scope.attArray = [
{ attr: 'myattribute', value: '' }
];
Use it as
<input dyn-attrs="attArray"></input>

Two-way data binding is not working on text boxes in AngularJS

I tried to implement two-way data binding in two text boxes using AngularJS, however it is not working.
Here is my code:
<html ng-app="myApp">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js"></script>
<script>
var app = angular.module('myApp', []);
</script>
</head>
<body ng-controller="tasksController">
<input type="text" ng-model="username" value="{{userage}}">
<input type="text" ng-model="userage" value="{{username}}">
</body>
Can anyone help me on this?
You haven't defined tasksController in your Angular code:
<script>
var app = angular.module('myApp', []);
app.controller('tasksController', function($scope){
$scope.username = "John Doe";
$scope.userage = 45;
});
</script>
The model scope will then work. Also, you don't need to bind the model to the input value. ng-model binds the value automatically :
<input type="text" ng-model="username">
<input type="text" ng-model="userage">

Categories

Resources