I want to show a div only when the function happens.
Here is the HTML, but it is always showing, I want it to show only when the function is true
<div ng-controller="controller">
<div ng-show="data.show"> Successfully triggered </div>
<div ng-hide="!(data.hide)"> Error in triggering</div>
</div>
In the controller I have:
if(results.data=='success') {
$scope.data = {
show: false,
hide: true
};
//Here I should display the success message
} else {
//Here I should display the error message
}
So, How can I show the success div in if condition and error div in the else condition.
Note : If possible if the div is shown in slow motion it will be very helpful for me. Like the fade timing in jQuery.
You should only maintain only one flag data.show that is more than sufficient to show hide div.
<div ng-controller="controller">
<div ng-show="data.show"> Successfully triggered </div>
<div ng-hide="data.show"> Error in triggering</div>
</div>
Controller
app.controller('myCtrl', function(){
///other stuff here ..
$scope.myFunction = function(){
if(results.data=='success') {
$scope.data.show = true; //success
} else {
$scope.data.show = false; //error
}
}
//init code here
$scope.data = { show: false }; //this should be outside your show/hide function
})
I would use one div something like the following
<div ng-controller="controller">
<div ng-show="data.show">{{data.message}}</div>
</div>
Get rid of your hide property on data it isn't needed and set your text in the controller on another data property. The bottom line is data.show has to be "truthy" for the div to show up. Honestly, if you are always going to show a div I would get rid of ng-show and just dynamically set the div content in the controller.
here is my example: Example for show div on jsfiddle
<div ng-app>
<div ng-controller="showCtrl">
<div>Show Div:
<button ng-click="set()"></button>
<div ng-show="showDiv"> Successfully triggered </div>
<div ng-hide="showDiv"> Error in triggering</div>
</div>
</div>
</div>
If you want to add fade in and fade out timing, I suggest you to look up angular animate. Documentation and example for angular animate.
wow, there are already so many answers, and they are all correct. Everybody also rightly pointed out that to have a little animation, you can use ngAnimate.
My little jsFiddle is here, just as a fun little exercise.
var app = angular.module('app', ['ngAnimate']);
app.controller('testCtrl', function ($scope) {
$scope.data = {
show:true,
hide: false
};
$scope.go = function(checked) {
$scope.data = {
show:!checked,
hide: checked
};
}
});
https://jsfiddle.net/dshun/j8wgnnm5/13/
Related
I have the following code.
html:
<div ng-controller="Test">
<div ng-click="first()" ng-hide="seconddiv">First
<div ng-click="second()" ng-show="seconddiv">Second</div>
</div>
</div>
js:
var app = angular.module('app',[]);
app.controller('Test',function($scope){
$scope.first = function(){
alert("first clicked");
}
$scope.second = function(){
alert("second clicked");
}
});
On executing the above code:
a). I should see only First by default(I can see one now: First) - it is fine now
b). then, if I click on First, then it should execute it's first() method, then First should be replaced with Second(on UI) - it's not coming
c). then, if I click on Second, then it should execute it's second() method only, (it should not execute any other methods like first() except second() method) - it's not coming
I request you to please help me regarding this that how can we do this? Thanks in advance!
Please note that Html <div> structure should not change, so it should be same.
Created Fiddle .
Go the Angular Way.
You will have just one function, toggle. Which will toggle the value of variable first from true to false and vice versa.
Depending on value of first you will show either div with content as First or that with content as Second.
You will also refactor your HTML a bit as follows
<div ng-controller="Test">
<div ng-if="first" ng-click="toggle()">First</div>
<div ng-if="!first"ng-click="toggle()">Second</div>
</div>
And in your JS you will do
var app = angular.module('app',[]);
app.controller('Test',function($scope){
$scope.first = true;
$scope.toggle = function(){
$scope.first = !$scope.first;
}
});
====
EDIT:
Alternatively, you don't even need the toggle function. Just use ng-click expression.
<div ng-controller="Test">
<div ng-if="first" ng-click="first=!first">First</div>
<div ng-if="!first"ng-click="first=!first">Second</div>
</div>
And in JS
app.controller('Test',function($scope){
$scope.first = true;
});
Can I use ng-class to display text in addition to a temporary class on my div?
Here's my code.
HTML:
<button ng-click="setBulkMode()"
<div class="filter-nav-bar" ng-class="{'filter-nav-bar-bulk-mode': bulkMode}">
JS:
$scope.setBulkMode = function() {
if(!$scope.bulkMode) {
$scope.bulkMode = true;
} else {
$scope.bulkMode = false;
}
};
Whenever I'm setting bulkMode to true, on my ng-class I'd like to display some text as well. So something like...
<div class="filter-nav-bar" ng-class="{'filter-nav-bar-bulk-mode': bulkMode 'Bulk Mode On'">
But I'm not quite sure how to do that. Any ideas?
Try the following:
<div class="filter-nav-bar" ng-class="{'filter-nav-bar-bulk-mode': bulkMode">
<span ng-show="bulkMode">Bulk Mode On</span>
And you dont need that function to set, you can do this easily in the view:
<button ng-click="bulkMode = !bulkMode">
Separate it. Create a new div with the ng-if directive to show it conditionally:
<div ng-if="bulkMode">Bulk Mode On</div>
And also, you can better write your function (personally I would rename it to toggleBulkMode):
$scope.setBulkMode = function() {
$scope.bulkMode = !$scope.bulkMode;
};
I'm not really satisfied with what I can find. I just want a simple example of a menu system in Angularjs with hover effect and selection effect.
I understand that 'hover' effects can be done in CSS, but this is more of an exercise for me to understand angularjs better.
What I am trying to do is pretty basic stuff.
Basically I have some HTML which has some DIVs (or menu items) :
<div NavCtrl id="header">
<div class="item" ng-click="click(1)" ng-mouseenter="hoverIn()" ng-mouseleave="hoverOut()">
1
</div>
<div class="item" ng-click="click(2)" ng-mouseenter="hoverIn()" ng-mouseleave="hoverOut()">
2
</div>
<div class="item" ng-click="click(3)" ng-mouseenter="hoverIn()" ng-mouseleave="hoverOut()">
3
</div>
</div>
I want to do two things.
listen on click
listen on mouseIn and mouseOut
I understand..
It is probably nicer to do the hover effect in CSS
It is possible to do some inline logic in the HTML with angularjs
...because I want to have flow on effects from these events. A hover event needs to pull information out related to that menu item, and a click event should also be able to perform some action related to that menu item. Cheap CSS tricks are not going to solve this!
For my hover logic, I thought this would do the trick :
$scope.hoverIn = function($event){
angular.element($event.srcElement).addClass('hover')
};
$scope.hoverOut = function($event){
angular.element($event.srcElement).removeClass('hover')
};
However $event is undefined :( . How do I get to the element object from a mouseover event?
My click logic looks like this :
$scope.click = function(position, $event) {
elem = angular.element($event.srcElement);
if (elem.hasClass("clicked")) {
elem.removeClass("clicked")
}else {
elem.addClass("clicked")
}
// if (position == 1) //do something etc...
};
Same problem : $event is undefined. I also want to pass in the index, so that I can do something special for certain menu items.
My Fiddle is here :
https://jsfiddle.net/zxjg3tpo/5/
ng-mouseenter="hoverIn($event)"
How it works: ng-mouseenter is kinda clever and it has $event in its scope in addition to what you have (i.e. you have hoverIn). So when it parse provided expression, it launches hoverIn with event.
All work with elements, like addClass should be done in directives where you have direct access to html element. Sometimes you may need angular.element(...) but in most cases you are happy with current element. (In directive link : function(scope, element, attrs))
In angularjs you can get the event by using $event in your html code
<div class="item" ng-click="click(1,$event)" ng-mouseenter="hoverIn($event)" ng-mouseleave="hoverOut($event)">
Hover Logic
$scope.hoverIn = function($event){
angular.element($event.target).addClass('hover')
};
$scope.hoverOut = function($event){
angular.element($event.target).removeClass('hover')
};
Click logic
$scope.click = function(position, $event) {
elem = angular.element($event.target);
if (elem.hasClass("clicked")) {
elem.removeClass("clicked")
}else {
elem.addClass("clicked")
}
// if (position == 1) //do something etc...
};
Updated Fiddle : https://jsfiddle.net/zxjg3tpo/6/
Here is another updated Fiddle where the siblings have their class removed (to make the click work correct)
https://jsfiddle.net/zxjg3tpo/9/
You missed to pass $event from html and the srcElement was wrong.
Please try the following:
HTML
<body ng-app="navTest" ng-controller="NavTestCtrl">
<div id="header">
<div class="item" ng-click="click(1, $event)" ng-mouseenter="hoverIn($event)" ng-mouseleave="hoverOut($event)">
1
</div>
<div class="item" ng-click="click(2, $event)" ng-mouseenter="hoverIn($event)" ng-mouseleave="hoverOut($event)">
2
</div>
<div class="item" ng-click="click(3, $event)" ng-mouseenter="hoverIn($event)" ng-mouseleave="hoverOut($event)">
3
</div>
</div>
</body>
JS Code:
var app = angular.module('navTest', [
]);
app.controller('NavTestCtrl', function ($scope, $location, $http) {
$scope.click = function(position, $event) {
elem = angular.element($event.target);
if (elem.hasClass("clicked")) {
elem.removeClass("clicked")
}else {
elem.addClass("clicked")
}
// if (position == 1) //do something etc...
};
$scope.hoverIn = function($event){
angular.element($event.target).addClass('hover')
};
$scope.hoverOut = function($event){
angular.element($event.target).removeClass('hover')
};
});
My hmtl code from my view looks like this:
<div ng-show="show_alert_message" ng-bind-html="alert_message"
class="alert-message-container"
ng-click="show_alert_message=!show_alert_message"></div>
I show the div initially by doing this in the view's controller:
$scope.show_alert_message = true;
The user clicks on the div to close it causing the ng-click to make show_message_alert false. This works great, hiding the div. But if I try to show the div again by running the command again in the controller it doesn't show:
$scope.show_alert_message = true;
It seems as if the ng-click had stopped it being possible to show the div again.
Am I doing something wrong? The scope for the controller $scope.show_alert_message = true; should be identical to the scope of the ng-click="show_alert_message=false" so I can't see why the second $scope.show_alert_message = true; doesn't work whereas the first one does.
I made a snipet and it is working as you wish. Look at your scope to see which scope are you using when you run $scope.show_alert_message = true;. I think this is the place to be fixed.
var $scope = {};
var myApp = angular.module('myApp', []);
myApp.controller('ngShowCtrl', ['$scope', function($scope){
$scope.show_alert_message = true;
$scope.alert_message = "I'm an alert message!"
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ngShowCtrl">
<div
ng-show="show_alert_message"
ng-bind="alert_message"
class="alert-message-container"
ng-click="show_alert_message=!show_alert_message"
></div>
<button type="button" ng-click="show_alert_message=!show_alert_message">Show/Hide</button>
</div>
use ng-if="show_alert_message" and ng-click="toggle()"
and
$scope.toggle=function(){
setTimeout(function(){
$scope.show_alert_message=! $scope.show_alert_message;
//$scope.$apply();
},0);
}
I've this very simplified html:
<div ng-controller="Ctrl">
<div ng-include="template"></div>
</div>
My template1.html only contains:
<div id="i1" ng-click="clickFunction()">Content of template1.html</div>
The template2.html:
<div id="i2"> Content of template2.html </div>
And the following JS :
function Ctrl($scope) {
$scope.template = 'template1.html';
$scope.clickFunction = function () {
$scope.template = 'template2.html';
}
}
When I click on my included template my second template is loaded in place of the first one.
What is the clean Angular method to replace back the template2 with the template 1 when I click everywhere else on my page (but not in my ng-include div)?
Here a basic fiddle if it can help.
Edit :
I've tested to add the following code into my controller but the template view isn't updated (but the console.log yes, very strange behaviour...):
jQuery('html').click(function() {
console.log('Click on HTML')
$scope.template = 'template1.html';
});
jQuery('#i2').click(function(event){
event.stopPropagation();
});
If you are modifying the model outside angular environment, you have to use apply() method of scope to update.
$scope.template = 'template1.html';
$scope.$apply();
Also I updated the fiddle such that it meets your requirement.
Fiddle