Can I use ng-readonly directive in a checkbox?
The checkbox is writable even after it is decorated with ng-readonly.
Html:
<input type="checkbox" ng-model="model" ng-readonly="test" /> {{model}}
Controller:
myApp.controller('MyCtrl', function($scope) {
$scope.test = true;
});
Added Fiddle
if you want to disable it use this:
<input type="checkbox" ng-disabled="true" ng-model="test" />
If you like to have it "more" visible, you can always use a little javascript trick:
<input type="checkbox" ng-model="model" onclick="return false;" />
ng-readonly only work with input type="text"
see documentation here -https://docs.angularjs.org/api/ng/directive/ngReadonly
The HTML specification does not require browsers to preserve the values of boolean attributes such as readonly. (Their presence means true and their absence means false.) If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The ngReadonly directive solves this problem for the readonly attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information.
In my case I did this, and it worked for me. I think that way I don't directly access the DOM. If someone see any error, please let me know. Thanks.
HTML
<input type="checkbox" name="name" id="name" [checked]="true" (click)="onNoClick($event)">
TypeScript
onNoClick(event: Event): void {
event.preventDefault();
}
Using CSS:
md-checkbox[ng-readonly="true"]{
z-index: -1;
}
or
md-checkbox[ng-readonly="true"]{
pointer-events: none
}
The last, doesn't work in IE
Also try [attr.disabled];
<input type="checkbox" [attr.disabled]="true"> </input>
Related
<input type="text" no-special-char class="form-control" name="name"
placeholder="" required="required"
value="" ng-model="Name" required no-spl-char-name />
Is this the correct way?
Yes , we have use directive as Attribute and there are four way to use directive.
Element
Attribute
Class
Comment
please check following codepen with input tag for only character input.
Example : https://codepen.io/santoshshinde2012/pen/oeaRNm
Example : AngularJS Numbers Only Directive
Fore more documentation please check to here.
Hope this will help you!
Yes, that is correct
I would also suggest you go through this doc completely
https://docs.angularjs.org/guide/directive
Check this too
Sample
JS
angular.module('docsSimpleDirective', [])
.directive('myCustomerFunction', function() {
return {
restrict: 'E',
...
};
});
HTML
<div ng-app="docsSimpleDirective">
<input type="text" my-customer-function>
</div>
In my Angular app, I'm setting the placeholders in my form through some code in the controller (showing particular text for particular times of day).
When a user begins typing into any field of that form, I want all placeholders to be cleared.
To do this I understand I need to use $dirty using $watch
$scope.$watch('myForm.$dirty', function() {
//clear the placeholders
}, true);
My question is watch quite performance intensive in this situation or is there a more optimised way?
Thanks.
If you use $dirty and $watch it will work but it will clear all placeholders before you begins type or on controller load.
So, you can try this its work for me.
<div ng-controller="Ctrl">
<input type="text" ng-model="name1" ng-change="change()" placeholder={{placeholder1}}>
<input type="text" ng-model="name2" ng-change="change()" placeholder={{placeholder2}}>
<input type="text" ng-model="name3" ng-change="change()" placeholder={{placeholder3}}>
</div>
function Ctrl($scope) {
$scope.placeholder1="name";
$scope.placeholder2="city";
$scope.placeholder3="address";
$scope.change=function() {
$scope.placeholder1="";
$scope.placeholder2="";
$scope.placeholder3="";
};
}
What is the "AngularJS way" of doing a form submit when any of its inputs have been clicked (or changed)?
<form ng-submit="submit($event)" id="myForm">
<input type="checkbox" name="foo" value="bar" ng-click="???"/>
</form>
I'm tempted to use jQuery and simply doing ng-click="$('#myForm').submit()", but it's probably worth learning it properly.
I have tried doing ng-click="submit($event)", but the error here is the $event object within the scope of the input instead of the entire form (correct me if I'm wrong, this is what I'm getting from the documentation).
Well, you can do something like this for sure by triggering the AngularJS submit event:
$scope.change = function($event) {
$timeout(function() {
angular.element($event.target.form).triggerHandler('submit');
});
};
where
<input type="checkbox" name="foo" value="bar" ng-click="change($event)" />
However I think it's better to simply use the same function in ngClick as used in ngSubmit.
Demo: http://plnkr.co/edit/tJIYD9ZVjYzwA2aXJobo?p=preview
ng-change is what worked for me using a text input:
<form>
<select data-ng-model="headerName" data-ng-options="header for header in headers"
data-ng-change="calculateCorrelations()"></select>
</form>
With the changes to angularjs and bootstrap 3 I have been unable to create a form field that's required where the item will be surrounded with red highlight by only adding the required parameter to the input field. Here is a plunker with how I have it setup on my system and would expect it to work. I can't seem to find any documentation on bootstraps site about required either so that would really help if anyone can find that.
Plunker
EDIT: Replaced all the following with below comments ideas... I would still like a solution where I don't need to write any css and use Bootstrap 3.
My form field looks like this:
<body ng-app>
<div ng-controller="Controller" class="container">
<form novalidate class="simple-form" name="myForm">
<div class="form-group col-sm-4">
Name: <input type="text" ng-model="name" name="name" class="form-control" required/>
E-mail: <input type="email" ng-model="email" name="email" class="form-control" required/>
<small class="error"
ng-show="myForm.email.$error.required">
Your name is required.
</small>
</div>
</form>
</div>
</body>
Script.js Looks like this:
function Controller($scope) {
$scope.name = "Test";
$scope.email = "";
}
Style.css looks like this:
input.ng-invalid {
border: 1px solid red;
}
While this works it replaces the bootstrap css with the css above. I would much prefer to simply add in required to an element and not have to rewrite the css to add the hue and the animation.
I agree with both of the other two answers but would like to add more
I think your main problem is that Bootstrap 3 removed styling based on the :invalid and related pseudo-classes (see here for why). This is where the red outline in bootstrap 2.x came from.
Firstly, to fix your plunker you should:
Bootstrap your app with ng-app as Mike says
Put your input in a form with novalidate
Give a model to your input with ng-model so that it can be invalidated (by angular, using classes)
Move jQuery script include before bootstrap as it is a requirement of bootstrap.
Now you have a plunker where the correct classes are applied to indicate input validity. You won't yet have styling on these, but they won't depend on your browser's HTML5 form validation, so will work in anything angular supports.
To apply styling, you can either use straight CSS and apply it to the ng-valid, ng-invalid, ng-invalid-required etc classes, or you can use the ng-class suggestion from this comment to apply bootstrap's classes when you need them
ng-class="{'has-error': formname.inputname.$invalid}"
if you have named your input and wrapped it in a control.
Updated plunker: http://plnkr.co/edit/mE3dkG?p=preview
Edit
I had a go at making a directive for this too. It may be overkill, but this should work wherever you have a form-group class and add an ng-form to the same element
.directive('formGroup', function(){
return {
restrict: 'C',
require: '?form',
link: function(scope, element, attrs, formController){
if(!formController)
return;
scope.$watch(function(){
return formController.$valid;
}, function(valid) {
if(valid)
element.removeClass('has-error');
else
element.addClass('has-error');
});
}
};
});
Yet another plunker: http://plnkr.co/edit/UQjRrA?p=preview
* The email will not be valid unless it looks like an email
You have a couple of things missing here. First, in order for a form field to validate it needs a unique name:
<input class="form-control" type="text" name="test" required/>
Second, in order to disable stock HTML5 validation, you need to add a novalidate attribute to the form:
<form class="form-horizontal" name="myForm" role="form" novalidate>
Third, and most importantly, your example has no app or controller associated with it, so angular is completely ignoring it. That one you have to fix yourself.
Read more about angular forms here: http://docs.angularjs.org/guide/forms
I suggest you this excellent step by step : http://www.ng-newsletter.com/posts/validations.html
I am generating a bunch of radio buttons using ng-repeat, and then trying to update a model when one of them is selected. This doesn't appear to be working.
The same markup works just fine when the radio inputs are hardcoded as opposed to being generated by ng-repeat.
This works:
<input type="radio" ng-model="lunch" value="chicken" name="lunch">
<input type="radio" ng-model="lunch" value="beef" name="lunch">
<input type="radio" ng-model="lunch" value="fish" name="lunch">
{{lunch}}
This doesn't:
<input type="radio" ng-model="lunch" ng-repeat="m in meat" value="m" name="lunch">
{{lunch}}
See jsfiddle showing both here: http://jsfiddle.net/mark_up/A2qCS/1/
Any help would be appreciated.
Thanks
<div ng-controller="DynamicCtrl">
<input type="radio" ng-model="$parent.lunch" ng-repeat="m in meat"
ng-value="m" name="lunch">
{{lunch}}
</div>
Should do the trick.
As I understand it, ng-repeat creates its own $scope. so you need to refer to the $parent $scope; Yes, AngularJS is tricky. Also you need to change the value to ng-value too.
the above issue was discussed here
That happens because ng-repeat creates a new scope. Basically, each <input> is creating a selectedOption value on its own inner scope. To work around that, create a new container object for that value. For example, you could declare in your controller:
$scope.data = {selectedOption: x};
And then in your template, use ng-model="data.selectedOption"
in this way, ng-model gets updated .. :)
this is tricky
Just need to replace value with ng-value