I have the following code which displays a textbox along with the possible character limit:
<input id="noteAbstract" ng-model="abstract" max-length="{{abstractCharacterLimit}}" ng-trim="false" ng-focus="displayCounter=true" />
<span ng-show="displayCounter" id="noteAbstractCounter">{{abstractCharacterLimit - abstract.length}}</span>
I need to display the counter only when the focus is on the textbox. So I have set a scope variable 'displayCounter' to true on focus. However, the code is not working and the 'span' of counter is always hidden. What am I doing wrong?
Note: I tried invoking another method on ng-focus and that is working fine. So ng-focus is supported in my angular version
Can check the angular version you are using? I tried with 1.1.1 it didnt work but with 1.2.1 version it works. Hence it would be better to user versions which later than 1.2.1
Here's the working jsfiddle link http://jsfiddle.net/ztUsc/2/. As the version is 1.2.1 ng-focus is working.
Related
I am trying to use Material Design Lite in Angular 2 and have trouble updating checkboxes after the state has changed. See the following Plunker example.
When the user clicks on "All" to select all boxes, only the normal checkboxes update. I have tried using componentHandler.upgradeDom() and componentHandler.upgradeAllRegistered() but it made no difference.
How can I get the data-binding to work?
Ok, so I had a similar problem like you, and after good 2 or 3 hours of Googling around, I came up with a solution (or maybe it's just a dirty hack, don't know):
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" [class.is-checked]="isChecked()">
<input type="checkbox" [(ngModel)]="checkbox.Checked" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">A label</span>
</label>
I've updated the plunk you've shared so you can see it there. I hope this solves your problem, as it have solved mine.
After reading the MDL code, it seemed to me that the appearance of the MDL checkbox only changes when it sees the onchange event. But just setting "checked" in code doesn't deliver the changed event. So, after I set it, I give it a poke.
function setChecked(element, bool) {
element.checked = bool;
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
element.dispatchEvent(evt);
}
Now, I'm not saying this is the RIGHT or BEST way to do this, but it works for me.
I have this tooltip on a input field:
<input id="chatMsg" uib-tooltip="something" tooltip-trigger="openTrigger" ng-model="chatMsg" />
and i want to show it on a custum trigger like this:
angular.element('#chatMsg').trigger('openTrigger');
but i can't get it to work, on my previus versions of ui-bootstrap-tpls it was working (0.12.1) now i've upgraded to 0.14.3
i've also configured the provider like this:
app.config(['$uibTooltipProvider', function ($uibTooltipProvider) {
$uibTooltipProvider.setTriggers({
'openTrigger': 'closeTrigger'
});
}]);
Thanks.
From version 0.12.0 onwards, tooltip-trigger is no longer observable (so you are not able to change it programatically).
You can use tooltip-enable to get the same behavior. See more details here: https://github.com/angular-ui/bootstrap/issues/3372
I have a custom directive (to exposecertain fields), and inside that I have another directive (the drop down box for the field). It's working well on Chrome, but on IE9 it appears the ng-show and ng-if is failing to evaluate. It appears not to even enter the function I defined (I put console.log inside the isAllowed function and it appears in Chrome but not in IE9).
<div>
<select id="" class="form-control" ng-model="measure" name="{{name}}">
<option ng-if="isAllowed(name, 1)" value="1">Kilowatt Hours</option>
<option ng-if="isAllowed(name, 2)" value="2">mmBTU</option>
<option ng-if="isAllowed(name, 3)" value="3">Therms</option>
<option ng-if="isAllowed(name, 4)" value="4">Decatherms</option>
</select>
</div>
I have tried ng-show instead of ng-if and it behaves the same in IE9. It appears the replace: true I put on my first directive is not honoured in IE9:
Whereas in Chrome this is replaced as expected with surrounding DIV elements and my custom directives cannot be seen anywhere, which is good.
Has anyone had experience of this before? Is it something to do with having a directive inside of a directive? Seems like IE9 does the first one OK then stops.
(I wish I could drop IE9 but it's an internal app and they're still on IE9 everywhere, so I've got to make it work somehow).
PS: The aim here is to only show the options that are relevant to the given field. In this case Electricity can be measured in kWh and mmBTUs but not in Therms and Decatherms. Inside the isAllowed function is supposed to be some switch logic. It works fine in Chrome, just not IE9, so I might need another method as a workaround.
PPS: Angular 1.3.2. IE9 - Browser Mode: IE9, Document Mode: IE9 Standards.
Figured it out. Isolated scope. Somehow Chrome was dealing with it OK, but IE9 was not.
In my app I have the fields I want to show to my user defined in a Partials module, but the drop-down lists is something I want to use in multiple places and they may change, so I defined them in a directive called BusinessRulesDirectives.
All I needed to do was drop in the BusinessRulesDirectives as a dependency to my Partials module and it works across both Chrome and IE9.
angular.module( 'ActualsPartials', [
'BusinessRulesDirectives'
] )
For some reason Chrome was able to run fine with this, but IE9 did not like it:
angular.module( 'ActualsPartials', [] )
Also, no errors were being output. I just happened to double-check for isolated scope as a wild guess.
Would be interested to know why Chrome was OK but IE9 was not.
I have the following code:
<form class="form"
data-ng-submit="modalSubmit(modal.data)"
id="modal-body"
name="modalForm"
novalidate>
This works and when I click on a button of type submit then the modalSubmit function is called.
However I would like to do this in my controller:
$scope.modalForm.$setPristine();
But it gives an error saying:
has no method '$setPristine'
How I can I set the form to pristine? I did try adding data-ng-form="modalForm" but then I get
a message saying something to the effect of duplicate directive names.
I tried changing the form element to a DIV but then the clicking on the submit button does not call
the function
Here's an example (modified from another user) that shows what I am trying to do which is set values to pristine:
plnkr.co/edit/LNanJdAggMLIgxii0cfv?p=preview
You're not doing anything wrong there, only problem is you're referencing an old version of angular in which $setPristine() was not a feature. $setPristine() was added in 1.1.+, so reference a newer version of angular and you're good to go. See it working in this plunk, using 1.2.+.
If you can't upgrade, then a dirty workaround would be to loop through all inputs in the form and set their $dirty and $pristine values manually:
$scope.mp = function() {
$scope.mainForm.$pristine=true;//clean main form
$scope.mainForm.$dirty=false;
angular.forEach($scope.mainForm,function(input){//clean all input controls
if (input !== undefined && input.$dirty !== undefined) {
input.$dirty=false;
input.$pristine=true;
}
});
}
First, your version of angular was old, 1.2.12 is the latest stable on the CDN. But even it wouldn't allow $setPristine because of the HTML5 validation that was going on.
The biggest problem was you used required on the fields instead of ng-required. The browser was doing the form validation for you instead of angular. You could also add the novalidate attribute to the form tag.
http://plnkr.co/edit/l1mUCceSFMFFZWgGgL6u?p=preview
it has already been implemented in this link you can use it this was as it has been demonstrated in the plnkr link.
As you can see from the above description, $setPristine only changes the state of the form (and thereby resets the css applied to each control in the form).
If you want to clear the values of each control, then you need to do for each in code.
IE9 isn't playing nice with my select boxes. When you click on one to change the value in Chrome it works as intended. In IE9 it's removing the default selection from every select box on the page. What the heck is happening here?
I had to do a jsfiddle this time becuase plunker doesn't seem to link IE9 either.
http://jsfiddle.net/sonicparke/nEDfY/
Here's one section of the code I'm using for the select boxes. There's a working example in the fiddle.
<select ng-model="initialOption1" ng-options="drafter.name for drafter in drafterItems"><option value="">Initial Option</option></select>
<select ng-model="initialOption2" ng-options="drafter.name for drafter in drafterItems"><option value="">Initial Option</option></select>
<select ng-model="initialOption3" ng-options="drafter.name for drafter in drafterItems"><option value="">Initial Option</option></select>
I'm not exactly sure what the cause is, but you can make it work by not using the initial option in the markup. Instead set a default in your ngOptions object and set the model values to that.
http://jsfiddle.net/Z2gkg/
$scope.initialOption1 = $scope.drafterItems[0];
$scope.initialOption2 = $scope.drafterItems[0];
$scope.initialOption3 = $scope.drafterItems[0];
I would love to know the underlying cause, but it is likely related to the ng-grid library you are including.