hidden property not reflecting immediately in angular 10 - javascript

I want to hide a div on condition, so I used hidden property like
<div [hidden]="isControlDisplayed()?false:true">
isControlDisplayed() method returns true/false based on some other dropdown(select) control in the form group . so when this method returns false it doesn't reflect immediately , it reflects only after I click somewhere else on window.
I have one observation like angular calls method only on some actions on window , is it something like this. how can I solve this issue. can somebody help me.
Thank you

Use the *ngIf directive.
<div *ngIf="isControlDisplayed();">

Related

AngularJS - ng-if and ng-show/ng-hide behave crazy

It seems like AngularJS is reacting crazy on the following scenario:
When I provide to a route from another Controller, everything acts right and the template is shown right. But after reloading the same route (!) in the browser the template is behaving crazy because ng-if and ng-show/ ng-hide blocks are not acting right. The template relates on search()-variables from the URL (got via AngularJS).
What could be the problem?
In my controller:
$scope.excel = $location.search().excel;
I checked this via console.log(), it is false. But my template does not act right, I tired everything from === true to = true and all that stuff.
<div class="row" ng-hide="loading" ng-show="!excel && !tooMuchData">
Why are you using both ng-hide and ng-show on the same div. ng-hide is the inverse of ng-show and vice versa. Both does is setting display: none and display: block. Also no mention about your loading parameter.
Just only use ng-show with !loading.
Ex: ng-show= "!excel && !tooMuchData && !loading"
It's beneficial to provide us with accompanying code and / or Plunker to showcase your problem.
Here I am gonna guess based on sparse information you provided:
Somehow state of the controller for that view is influenced with from what state you came from or the fact something has been passed to the controller when coming into that state.
Here is a couple of examples how this might happen:
Something was passed to the controller when you changed states. Let's say you list your porn videos in categories and you list them (/porn). When you select a certain category (eg. MILF) you open a new view (enter a new state and pass the id of that category). Now the route is /porn/MILF Then you list the videos. All videos in this section are now from the category with Id you passed from the previous state via router. When you refresh that Id becomes unknown and when filter unknown from data ut can get funky if you have not set defaults.
Your controller depends on some property in $rootScope that is reset upon refresh. Same example as above but somewhere upon picking a category you said.
$rootScope.pickedCategory = 'MILF'
You now try to do stuff in your controller with it but it's now unknown. You should generally stop abusing rootScope like this.
EDIT: now that you provided the code ng-show and ng-hide in on the same object is a terrible idea and probably the cause of problems.
Use either of those not both on the same element.
You can always use this rule for conditions:
condition you wanna to be true - A and condition you wanna to be false - B
equals to:
condition you wanna to be true A && !B
or
condition you wanna to be false B && !A

Two way binding for checkbox inside an accordion not workiing

In my angular 1.5 html5 application, I have an accordion group and inside it's body I have Couple of check-boxes. Since direct scope binding will not work inside accordion, I'm using ng-click event as attached.
This works as expected, I'm getting click events with correct value.
I have another reset button on screen, when user clicks this button I have to reset all filters including the checkbox inside the accordion. Even after I reset the model value to false, checkbox still shows as checked. I know this is because the binding is not there.
How can I update the checkbox value from javascript. Is there any angular way. I'm not a big fan of JQuery.
Regards,
Nixon
We faced a similar issue with the data bindings while using accordian.
Instead of using directly model variable, we created an object of it.
For eg, instead of using $scope.includeLocalParties, try using $scope.checkbox.includeLocalParties.
Also initialize it in your controller. Something like this:
$scope.checkbox = { includeLocalParties : false};
Hope it helps!

KendoUI Switch control with AngularJS

I am trying to use kendo UI's switch control (http://demos.telerik.com/kendo-ui/web/mobile/switch.html) with angularjs. I am having problem that the value is not being bound with model. I am using it like this:
<input type="checkbox" id="locked" kendo-mobile-switch on-label="Yes" off-label="No" ng-model="Model.IsLocked" checked="{{Model.IsLocked}}" data-role="switch">
Basically the variable in model keep the value received from db irrespective of the state on UI.
Second problem I am having is with on and off labels that it keeps on displaying default On and Off.
I opened an issue on the github site and a fix was applied. See this link:
"I pushed a fix, it should work now if you use k-ng-model. The plain ng-model is still broken."
https://github.com/kendo-labs/angular-kendo/issues/333
The second problem (the on/off labels) is because it should be:
k-on-label="'Yes'" k-off-label="'No'"
Note the string literals, otherwise it is interpreted as a variable.

Extjs 4 how hide/show trigger on combox field without doComponentLayout?

I am need hide/show trigger on fields (combobox,*date* and etc.) without invoke method doComponentLayout() (source code of setReadOnly method). The method doComponentLayout() is very slowly on IE. Can anybody help me? Thank you!
You can also use the setHideTrigger(true) method. This is a private method on Ext.form.field.ComboBox - (see Extjs ComboBox, make sure to check "Private" in the "Show" menu.)
Calling myCombo.triggerEl.hide() doesn't work if the combo component hasn't been rendered yet.
You can also hide the trigger when component is first initialized by setting the config property hideTrigger: false.
You should be able to show/hide the triggerEl that is a property of anything that extends Ext.form.field.Trigger (such as combo, date, etc.).
See live example here:
http://jsfiddle.net/hWGYE/765/

updating value in html table via javascript

Hi is there any way to upadte cell value with no events (i dont want to use 'onClick' or others)?
The scheme is: user is filling form value, then clicks 'ok', and then value should be showed in cell in html table ?
thx in advance for all help
Well, you can use a link with href="javascript:myFunction()" instead of an onclick, but I'm not sure if that counts as an event :)
No, you need to hook up on an even to trigger it.
Since the user is going to click the Ok link anyways that seems to be the most relevant place to invoke your javascript from.
Create a div with an id around the content you would like to change.
Create a javascript function that sets the innerHTML of the above div.
Call the javascript function when the user hits the Ok link.

Categories

Resources