I want to have an input with text that is disabled but also selects all when you click on it.
Here's a working plnkr
http://plnkr.co/edit/o2hu8MCU2bjVPPFhhBLx?p=info
Here's my directive:
app.directive('selectAll', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.on('click', function () {
this.select();
});
}
};
})
and the html:
<input type="text" disabled select-All size="60" value="http://google.com"> - directive with disabled
<br>
<input type="text" select-All size="60" value="http://google.com"> - directive without disabled
I would like for the input to not be editable but still allow for the select all directive to work.
I tried adding the disabled functionality to the directive but I sometimes use this directive for thing other than input as well.
Any guidance?
so, garuuk, use readonly instead of disabled and just style your input to look disabled. Maybe slightly opaque
Related
I have a text input within a directive that I want to use as a filter for displaying a list of items, but I don't want the entering of a filter to affect the containing forms $pristine value so that entering a filter doesn't enable the save and show the Reset. How do I do this in angularJS (1.6.x)?
directive template
<form name='myForm'>
<input placeholder="Filter" class='form-control' type='text' ng-model='vm.searchText'>
<ul><li ng-repeat='item in vm.list | filter:vm.searchText'/></ul>
<div>
<br>
<button class='btn btn-primary' ng-click='vm.save()' ng-disabled="myForm.$pristine || frmCrm.$invalid">Save</button>
<div class='pull-right'>
<button class='btn btn-warning' ng-click="vm.reset()" ng-hide="myForm.$pristine">Reset</button>
</div>
</div>
</form>
Yes I know I could easily put the filter input outside the form in this example, but in my actual situation that isn't feasible as I have nested forms and one that wraps basically the whole page.
here's plnkr example:
http://plnkr.co/edit/y1dJLPbyvlZuIW1f7ey9
You can override the $setDirty and $setPristine methods of the ngModel:
angular.module('xyz').directive('dontCheck', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
//set to empty functions
ngModelCtrl.$setPristine = angular.noop;
ngModelCtrl.$setDirty = angular.noop;
}
}
});
I've forked your plunker, you can try the solution:
http://plnkr.co/edit/6UVTQjJtwu4mOXVt7sPT?p=preview
Edit:
Updated plunker to follow your code style. I will leave the code here as is.
I have a form and some fields get disabled with various conditions. Is there a way to determine is a model disabled (without running the same ng-disabled condition in the controller)?
If you have a form in your view, there would be a form object with the name you specified for the form on your controller scope which you can access inside your controller.
However you cannot access attributes (disabled is an attribute on your input) that from controller level (vs you can easily access input attributes from a directive):
app.directive('mydir', function ($compile) {
return {
require: '^form',
link: function(scope, element, attrs, formCtrl) {
var allDisabledInputs = $(formCtrl).find(':input:disabled');
//do stuff here
}
};
});
And on your form:
<form name="someForm" my-dir >
<input name="input1" />
<input name="input2" disabled />
</form>
I am trying to create a typeahead directive that does not bind the typed text to the model while typing.
This is as such no problem, but I would like to use the ngModel directive for my binding so I am able to use something similar to
<input type="text" ng-model="model.field" typeahead="sourceForTypeahead" />
instead of my current approach which works as a charm
<input type="text" ng-model="tmpFieldForInput" typeahead="sourceForTypeahead" typeahead-model="model.field" />
I can't figure if it is possible to change the "target" of ng-model internally in the directive so I get the typed input, and then is able to set the external model when an result from the source is selected.
Use ngModelOptions to specify when you'd like to bind the input text to the model:
<input type="text" ng-model="myModel" ng-model-options="{ updateOn: 'blur' }">
<p>Hello {{myModel}}!</p>
There are different events you can trigger on, but in this case, the text will only be bound to the model once the end-user leaves focus from the field.
Additional resources: https://docs.angularjs.org/api/ng/directive/ngModelOptions
Like #lux has mentioned, the right way to go about it is to use ng-model-options
But in your case, the ideal solution would be to do wrap your input in a form and bind on submit:
<form name="myForm">
<input type="text" ng-model="myModel" ng-model-options="{ updateOn: 'submit' }">
<p>Hello {{myModel}}!</p>
<input type="submit" value="Submit">
</form>
This will bind the value to the model only when you click your Submit button. This of course can be put anywhere you please.
I found a solution after looking into an old version of the checkbox-list module.
The solution is to change the ngModel attribute on compile time and make it point to an internal property in the directive and then compile in the postlink method.
I have updated the plunker for others to see the prototype: http://plnkr.co/edit/LbHH2pJGX1Iii8ZqqSie?p=preview
(Stack requires me to post code - so here is the )
app.directive('typeahead', ['$parse', '$compile', function ($parse, $compile) {
return {
priority: 1000,
terminal: true,
scope: {
source: '=typeahead',
ngModel: '='
},
compile: function(tElement, tAttrs) {
tElement.removeAttr("typeahead");
tElement.attr("ng-model", "searchTerm");
return function(scope, element, attrs) {
$compile(element)(scope);
// all my logic here
Codepen with the problem
this is my directive template:
<ion-toggle class="cw-alerttimebutton" ng-model="targetobject.isEnabled"
ng-checked="targetobject.isEnabled">
<input type="text" ng-model="targetobject.time" value="{{targetobject.time}}"> {{ text }}
</ion-toggle>
this is my app setup:
app.directive('cwAlertTimeButton', function() {
return {
restrict: 'AE',
replace: false, //toggle already replaces
templateUrl: 'templates/directives/cwAlertTimeButton.html',
link: function(scope, elem, attrs) {
scope.targetobject = scope.$eval(attrs.targetobject);
scope.text = attrs.text;
}
};
});
The questions:
<input type="text" ng-model="targetobject.time" value="1980-01-01T11:45:00.000Z"
class="ng-pristine ng-untouched ng-valid">
is write protected nor accessible in this place.
ion-toggle seems to use a class item-toggle that causes problems.
If I move the input outside of the containing element with class item-toggle it works as expected. As well as when I remove the class item-toggle from its parent.
How can I get it to work inside this construct?
The idea is to get an iphone like alarm. E.g. left the time, you click in it, you change it, right you have a toggle to enable disable it.
I use input type=text only to see if it works at all, but it doesn't.
Just in case someone still has this issue. This is caused by the class item-toggle that is generated by ion-toggle. It adds a style pointer-events:none.
To get it editable, overwrite the style for pointer-events of the ion-toggle to pointer-events:all
eg. <ion-toggle ng-model="onOff" ng-change="onChange()" style="pointer-events:all;">.
Of course, you could put this in a style sheet if you prefer. :-)
I want to achieve read/write access control for select input using angularjs and angular-ui (particularly ui-select2 feature).
Scenario is simple: by using ng-readonly attribute I can control whether given input value can be changed by user or not.
<input id="clientShortName" class="span4" type="text" ng-readonly="readOnly" ng-model="client.shortName" />
<input ui-select2="{ tags: sometags}" id="clientTagsSelection" class="span4" type="text" ng-readonly="readOnly" ng-model="client.tagsSelection"/>
<input type="button" value="Edit" ng-click="readOnly = !readOnly"/>
This works fine for standard angularjs but when I'm trying to use inputs defined by angular-ui it doesn't work (doesn't change the read/write state of input).
Full scenario is covered here: http://plnkr.co/edit/pKs4Tq
Unfortunately the AngularUI ui-select2 directive has no integration with the angularJS ng-readonly directive.
One way for you to overcome this is to create your own directive and watch for changes on the readOnly property, like this:
app.directive('csReadonly', function() {
return {
restrict: "A",
link: function(scope, iElement, iAttrs, controller) {
scope.$watch(iAttrs.csReadonly, function(readonly) {
iElement.select2(readonly ? 'disable' : 'enable');
});
}
}
});
And use it like this:
<input ui-select2="{ tags: sometags }" cs-readonly="readOnly" ... />
Plunker: http://plnkr.co/edit/LBFDg2
The advantage of the approach is that, if in the future AngularUI decides to include support for the ng-readonly, you will only have to replace cs- with ng- and you're done.