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
Related
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();">
I am trying to figure out how to generate list of option elements using ng-repeat, but one of them to be marked as the selected option on load.
After googling, what I found is this base, which I modified by adding the selected property to the data objects
https://plnkr.co/edit/7g4MeAQnG4PzpnrebBGc?p=preview
However, it seems that ng-selected="option.selected == true" has no effect :(
Why? I also have the more complex example here: http://jsfiddle.net/ej5fx3kr/14/ which works, although I am not sure what is the difference, or what is the model here used for (note: changing the model name from "program" to anything, it still works... so not sure what is the purpose).
Bonus points: How do I debug code in AngularJS in directives? Like experiment in debug mode line by line to actually see what are the variable values in that particular scope, what is available to use, etc...
My ultimate goal in this question, is to load list of values via ajax on page load in the controller, IF there is a routeParam in the URL, find it in the list of loaded values, and add selected attribute, then set selected=true in the generated HTML on page load, otherwise not pre-select anything in the populated select box on the page load, so this is why its important for me to understand this on the simplest example before trying to plug this in.
Thanks!
The "Angular Way" to handle this is to use ng-options instead of ng-repeat, and then simply set the model equal to the default value on controller load.
For example:
<select ng-options="option.name for option in data.availableOptions"
ng-model="selectedItem"></select>
$scope.selectedItem=$scope.data.availableOptions[2];
For a more advanced case, where your ng-model might not be the object in the array, but a single property, you can use a modified version of ng-options:
<select ng-options="option.id as option.name for option in data.availableOptions"
ng-model="selectedId"></select>
$scope.selectedId = '2';
Here is a modified version of your plunker showing these different possibilities: https://plnkr.co/edit/xzYmXf8C3WuZaelwj5hO?p=preview
Using ng-selected = true inside ng-repeat would solve this .
However be sure of the data that you call in ng-repeat.For additional debugging and experiment line by line use chrome debugger .go to source tab and set break points on the js lines that you need to debug.This will let you debug line by line by pause and play . Hope this helps.Thanks
I'm just started learning angularJS and I wish to build some dropdowns and tabs with bootstrap and angular. I know there is a full angular bootstrap library out there, but I don't want to use it, since I want to know whats going on behind the scenes. So I'm trying to build the needed dropdown functionality, but haven't been able to do so. The problem is:
I have to click the dropdown if its opened before it can
disappear again. I wish to be able to click / touch anywhere but the
dropdown to close i again.
I've made a pen of the current markup/functionality: http://codepen.io/anon/pen/EBwlA
This is my first angular project so if anything is not done "the correct way" please feel free to tell me :)
Thanks
you can just attach an ng-click event to every li or a tag like this
ng-click="toggleOpen($event)"
if there is a more specific method you want to investigate let me know
this is a method using a service that will allow you to have collapsable elements working together
app.service('collapsables',['$rootScope',function($rootScope){
return{
notify:function(event,payload){
$rootScope.$broadcast(event,payload);
}
}
}]);
app.directive('collapsable',['collapsables',function(collapsables){
return{
restrict:'A'
controller:function($scope){
$scope.Toggle=function(){
$scope.expanded=!$scope.expanded;
collapsables.notify('toggled',{scid:$scope.$id,group:group});
}
$scope.$on('toggled',function($event,details){
var canClose=(!$scope.group || $scope.group==details.group || !details.group) && $scope.$id!=details.scid && $scope.expanded
$scope.expanded=canClose.
})
}
}
}])
now this this you can attach the collapsable directive to any element and it should allow you to comunicate the intents among all collapsables, you shuld be also be able to group them in case you want to isolate behaviors, notice that this directive doesn't cfreta a scope merely extends the xisting one to add a behavior, which is bad if you have several of this in the same controller, in that case a variant of this needs to be implemented using isolated scopes, but the idea remains the same
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.
I'm working in AngularJS / Jade, and I need to change an icon when you click on something. Currently I have the following code:
a(onclick='return false', href='#general', data-toggle='tab') General
span.glyphicon(ng-class='isGeneralChanged(selected) ? "glyphicon-ok-circle" : "glyphicon-adjust"')
Then below that:
.form-group
label Has the design entered?
toggle-switch(model='selected.general_engineer_made_inspection', on-label='Yes', off-label='No')
So basically the problem I have is that here it's easy, it's either "yes" or "no" and that changes the icon, but the next tab is just a list of names that once you just click on one the icon in the tab should change. I'm not sure how I could solve this. ng-click event?
Use a boolean to hide,show,toggle elements. Angular makes this easy. (look up ng-show, ng-hide, ng-switch)
Also, I prefer to use ng-class this way:
i.fa.fw(ng-class="{true:'fa-lock', false:'fa-unlock'}[locked]")
The initial value is set in the controller:
$scope.locked = true;
Then, a button that toggles the boolean (and thus, the class) is added to the view. Note the ng-click="locked=!locked"
button(ng-click="locked=!locked" ng-switch="locked")
span(ng-switch-when="true") Lock
span(ng-switch-when="false") Unlock
We can also employ the boolean to hide or show whatever we'd like:
pre(ng-show="locked") Locked!
pre(ng-show="!locked) Unlocked!
Here's a Plunk http://plnkr.co/edit/0PDT2cpQGwFKsu8h1hdg?p=preview that covers all of the above (albeit, in HTML, not Jade). The demo uses FontAwesome.