Had this working earlier, now it doesnt respond accordingly.
In my html:
<div ng-click="setFalse();" ng-show"emptyspotslist">No results</div>
Controller:
$scope.setFalse = function () {
$scope.emptyspotslist = !$scope.emptyspotslist;
console.log($scope.emptyspotslist);
}
Default value of $scope.emptyspotslist = true.
The DIV doesnt hide, after clicking. Function gets called though.
Probably something really simple i'm overlooking.
You should have a = after ng-show attribute
Old
<div ng-click="setFalse();" ng-show"emptyspotslist">No results</div>
New
<div ng-click="setFalse();" ng-show="emptyspotslist">No results</div>
Your HTML is malformed...
ng-show="emptyspotslist"
You're missing an equals =.
Related
In the ma-resource-text-watch Directive I make an api call to get a list of resource texts.
I want to be able to hide the alert-component if the api doesn't return any resource texts.
Does anyone know how I might be able to do this?
<div ng-controller="IntroductionCntrl" class="hidden-print">
<div class="container-fluid" ng-if="introductionResourceKey">
<alert-component type="guidance">
<span ma-resource-text-watch="{{introductionResourceKey}}"></span>
</alert-component>
</div>
</div>
You can have your directive take in a callback (or expression), which it will fire when the data is loaded. For example, in the directive definition, the scope property can have:
scope: {
onTextsLoaded: '&'
}
The directive can then call:
scope.onTextsLoaded({ texts: yourTexts })
And the parent controller can pass in an expression as a callback, and use ng-show to hide the alert-component:
<alert-component ng-show="dataIsLoaded && texts.length">
<span ma-resource-text-watch="{{introductionResourceKey}}" on-texts-loaded="onTextsLoaded(texts)"></span>
</alert-component>
With the function defined like:
$scope.onTextsLoaded = function(texts) {
$scope.dataIsLoaded = true;
$scope.texts = texts;
}
I have a T/F property called "valid" returning from an API call. I want to accurately display it as a checkbox, as well as allow the user to set/unset it. Setting or unsetting it will make a SAVE call.
{{vm.selectedQuestion}}
<md-checkbox
aria-label="Confirmed"
ng-model="vm.selectedQuestion.valid"
ng-click="vm.setReviewed()"
ng-checked="vm.selectedQuestion.valid">
Valid
</md-checkbox>
.
vm.setReviewed = function () {
vm.selectedQuestion.valid = !vm.selectedQuestion.valid;
// a bunch of other stuff
};
If the question gets loaded with value: true, then I see the checked box. If I uncheck the box, the valid property disappears from the object completely.
I know I'm doing something wrong with the ng-model and the ng-checked, but I've tried every combination I can think of.
Astonishingly, the angular docs and examples do not seem to address this simple case as far as I have found.
I would simply change it to:
{{vm.selectedQuestion}}
<md-checkbox
aria-label="Confirmed"
ng-model="vm.selectedQuestion.valid"
ng-change="vm.setReviewed()">
Valid
</md-checkbox>
with the function:
vm.setReviewed = function () {
// a bunch of other stuff depending on the value of vm.selectedQuestion.valid
};
Usually there is no need to over-complicate it (unless there is something about md-checkbox that I am not aware of). There is also no need to manually toggle the value in the ng-change (it's already changed by ng-model, and the value of vm.selectedQuestion.valid you see in the function is already after the change).
Here is the link for the docs of md-checkbox directive with a clear example:
https://material.angularjs.org/latest/api/directive/mdCheckbox
And the ng-change is as ng-change does, until angular goes v2, and then all bets are off. :)
A few notes on directives in question (with input from OP comment):
ng-click happens before the change of the ng-model and the checkbox in the element
ng-change happens after the change in the ng-model and the element
ng-checked is used only to set the checked attribute of the element if it's evaluated to truthy - should not be used alongside ng-model
Try following snippet
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = true;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="checkbox" ng-checked="name" ng-model="name">{{name}}</div>
</div>
</div>
Hope this will help you
I want my ng-class to update when the variable in my controller changes. For some reason, it is only triggered on the page load and whilst the variable change, the ng-class does not update to reflect this.
Here is the code that triggers the variable change:
<a class="cs-mobile-menu__close-icon" ng-click="switchMobileMenu('right')">
</a>
Here is the code which I want to change depending on the variable:
<div class="right-menu__user"
ng-class="{
'animate': true,
'animate--leave': !isRightMenuOpen}">
{{user.firstName}} {{user.lastName}}
</div>
Here is the corresponding code from the controller:
$rootScope.isLeftMenuOpen = false;
$rootScope.isRightMenuOpen = false;
$scope.switchMobileMenu = function(direction) {
if (direction === 'left') {
$scope.isLeftMenuOpen = !($scope.isLeftMenuOpen);
} else {
$scope.isRightMenuOpen = !($scope.isRightMenuOpen);
}
};
It seems that ng-class is only set on the initial ng-click. I believe I need to wrap the above function in a $scope.apply() function so that the ng-class watches for changes and applies them as the ng-click toggles the variable. Am I on the right track? If so, how would I do this?
You don't need $scope.$apply. Working example: https://jsbin.com/fogasiniku/edit?html,js,output
Do you really have double dashes in the CSS class name?
I have HTML code that is returned from AJAX:
<div ng-controller="CounterPostsController">
<span ng-click="Do();"></span>
</div>
So, event ng-click does not work
In your CounterPostsController, do you have the Do() method defined and associated to the $scope variable?
i.e. $scope.Do() = function () {} or $scope.Do() = myCustomFunction;
You will need to associate your function to $scope in order the code above to work.
Hope this helps
In my project, thanks to animate.css, I can have entry animations like this:
<div class="row animated fadeInDown" ng-show="someCondition">
This is great. When someCondition is true, the div appears with an animation. What I don't understand is how to cause the reverse to happen. Say, in my controller I set someCondition = false;. What should I do in the markup to make the div do a fadeOutUp?
I tried putting the fade out in the class="" attribute, but that just conflicts with the fade in. I also tried ng-class={} but I don't know what condition is true when something is being removed.
Try a conditional ng-class:
<div ng-class="someCondition && 'fadeInDown' || 'fadeOutUp'">
UPDATE:
Use a variable class name in your markup:
<div ng-class="someClass">
and add a watch to the controller to apply the proper class name:
$scope.$watch('someCondition', function(newval, oldval){
if($scope.someCondition){
$scope.someClass = 'fadeInDown';
} else {
$scope.someClass = 'fadeOutUp';
}
});
In the following fiddle I added a setInterval to simulate the condition change:
http://jsfiddle.net/F52y5/59/