How to toggle between elements in angularJS - javascript

I have two elements, only one of them is supposed to show up at a time while the other element stays hidden until the visible element is made to disappear (button click), here an example of the last logic I have tried to use.
.......
<div ng-show='show'>
Visible element
<button ng-click='toggle()'> Toggle </button>
</div>
<div ng-hide='show'>
Hidden Element
</div>
.......
And I have something like this in my controller
........
$scope.show = true;
$scope.toggle = function(){
$scope.show =!$scope.show;
}
.........
Now, anytime I click the button, the first element will disappear but the second element will not show. Please I really need help.

You have to put your button out of the ng-show div like this
<div ng-show='show'>
<div>Visible element</div>
</div>
<div ng-hide='show'>
<div>Hidden Element</div>
</div>
<button ng-click='toggle()'> Toggle </button>
then its work fine. Hope this help...

Here is the solution
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.show = true;
$scope.toggle = function(){
$scope.show =!$scope.show;
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-show='show'>
Visible element
</div>
<div ng-hide='show'>
Hidden Element
</div>
<button ng-click='toggle()'> Toggle </button>
</body>
</html>

Related

Angular close on outside click - closes also on inside click

I am trying to implement close on out side click, the element is closing on outside click, but it closes also on an inside click, it should work like in the example : http://plnkr.co/edit/ybYmHtFavHnN1oD8vsuw?p=preview
I dont understand, why the element.find cant find the target, when it is his child.
HTML Directive
<div class='multiDate'>
<div class="dropdown">
<button data-ng-click="show = !show" class="dropbtn">Press</button>
<div id="myDropdown" ng-show="show" class="dropdown-content">
<multiple-date-picker></multiple-date-picker>
</div>
</div>
</div>
HTML Main
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script data-require="angularjs#1.6.2" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
<script data-require="moment.js#*" data-semver="2.14.1" src="https://npmcdn.com/moment#2.14.1"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://arca-computing.github.io/MultipleDatePicker/stylesheets/multipleDatePicker.css" />
<script src="https://arca-computing.github.io/MultipleDatePicker/javascripts/multipleDatePicker.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="cntrl">
<multi-date></multi-date>
</body>
</html>
JS
var app = angular.module("app", ['multipleDatePicker']);
app.controller("cntrl", function($scope) {
});
app.directive('multiDate', function($document) {
return {
templateUrl: 'multi.html',
replace: true,
link: function(scope, element) {
$document.bind('click', function(event) {
var isClickedElementChildOfPopup = element
.find(event.target)
.length > 0;
if (isClickedElementChildOfPopup)
return;
scope.show = false;
scope.$apply();
});
}
}
});
PLNKR
The directive seems to be fine.
You just need to add $event.stopPropagation to stop outer event.
<multiple-date-picker ng-click="$event.stopPropagation(); dateClickedModelChanged()" day-click="dateClicked" ng-model="dateTimeModel"></multiple-date-picker>
Here is your modified plunker

How to hide angular element on click event

I have a situation somewhat like this below code. I have a delete button on view cart page when it is pressed an API is called to delete the product and I just hide the product div tag to avoid page reload initially. How to hide multiple products one by one
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.hide = function(){
//WHAT SHOULD GO HERE
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<h5 ng-click="hide()" ng-repeat="x in [0,1,2,3,4,5,6]">{{x}}<!-- HOW TO USE ng-hide HERE --></h5>
</div>
</body>
</html>
You can have following in your HTML:
<h5 ng-hide="hide{{$index}}" ng-click="hide($index)"
ng-repeat="x in [0,1,2,3,4,5,6]">{{x}}</h5>
Now, your hide() function would look like this,
$scope.hide = function(index){
$scope['hide'+index] = true
}
That should hide numbers on click.
Here's working example!
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.hide = function(index){
$scope['hide'+index] = true
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<h5 ng-hide="hide{{$index}}" ng-click="hide($index)" ng-repeat="x in [0,1,2,3,4,5,6]">{{x}}<!-- HOW TO USE ng-hide HERE --></h5>
</div>
</body>
</html>
if you want to hide the product div tag to avoid page reload initially
just get type button without type="submit" ( inside <form></form> )
<button type="submit" > to >>> <button ng-click="hide()">
Update your COntroller like that :
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.list=[0,1,2,3,4,5,6]
$scope.hide = function(x){
//WHAT SHOULD GO HERE
$scope.list.splice(x, 1);
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<h5 ng-click="hide($index)" ng-repeat="x in list">{{x}}</h5>
</div>
</body>
</html>
ng-hide is just css(display:none) way hide element. ng-if is add/remove DOM element. (we can see if u hide element, ng-if we can't see).
You try remove. Just see the example.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data = [0,1,2,3,4,5,6];
$scope.hide = function(index){
// in api call success function
$scope.data.splice(index, 1);
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<h5 ng-click="hide($index)" ng-repeat="x in data">{{x}}<!-- HOW TO USE ng-hide HERE --></h5>
</div>
</body>
</html>

RouteChangeStart event fired on initial index.html page load

The route change event is fired on the initial page load itself, ideally i want to fire when the user go to the next page from the initial page not on the initial page load.
Here I have bound the directive "meeee" to the elements and in the link function of the directive I put the callback for routeChangeStart
event.
In which I want to fire the callback to remove the elements from the current page with directive "meeee" when user goes to the next page.
But "routeChangeStart" event is fired for the current page itself, removing all the "meeee" elements at the initial load itself ,
please see this plunkr code http://plnkr.co/edit/h7nLME7YW7dI8qaBk1in?p=preview
Index.html
<!DOCTYPE html>
<html id="ng-app" ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src=" https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="parentCtrl" class="">
<div ng-view>
</div>
</div>
<div id="d1-Me1" class="meeee">
Meee1
</div>
<div id="d1-Me2" class="meeee">
Meee2
</div>
<div id="d1-Me3" class="meeee">
Meee3
</div>
</body>
</html>
App.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('parentCtrl',['$scope','$window','$location',function ($scope,$window,$location) {
}]);
myApp.config(function($locationProvider,$routeProvider) {
$routeProvider
.when('/p1', {
templateUrl:'page1.html',
})
.when('/p2', {
templateUrl:'page2.html',
})
.when('/p3', {
templateUrl:'partials/page3.html',
})
.when('/default', {
templateUrl:'default.html',
})
.otherwise({
redirectTo:'/default'
});
});
myApp.directive("meeee",['$rootScope','$location', function ($rootScope, $location){
return {
restrict: 'C',
link: function(scope, elm, attr) {
$rootScope.$on('$routeChangeStart', function() {
console.log('attr["id"]: '+attr["id"]);
elm.remove();
});
elm.detach();
angular.element("body").append(elm);
}
};
}]);
default.html
<a href="#/p1">
Page1
</a>
<br>
<br>
<a href="#/p2">
Page2
</a>
<br>
<br>
<a href="#/p3">
Page3
</a>
Page1.html
In Page One
<div id="p1-Me1" class="meeee">
Page 1 Meee1
</div>
<div id="p1-Me2" class="meeee">
Page 1 Meee2
</div>
<div id="p1-Me3" class="meeee">
Page 1 Meee3
</div>
page2.html
<p>In Page Two</p>
page3.html
<p>In Page Three</p>
Thanks in advance for any help.
Add a counter so that if it this the first pageload, it doesn't apply?

Angular JS ngShow and ngHide

I can't figure out why the ngShow and ngHide directives aren't working. Here is a simplified version of the problem.
<div id="callFunction" ng-click="myFunction()">content here</div>
<div id="contactInfo" ng-show="showContent">content here</div>
In controller
$scope.showContent = false;
$scope.myFunction = function() {
$scope.showContent = true;
}
The "contactInfo" div never shows when I click the "callFunction" div.
Your problem is known in the javascript world as "the dot." The idea is that in javascript, native values are passed by value whereas object values are passed by reference. Try changing your view to this:
<div id="callFunction" ng-click="myFunction()">...</div>
<div id="contactInfo" ng-show="content.Show">...</div>
and change your controller to:
$scope.content.Show = false;
$scope.myFunction = function() {
$scope.content.Show = true;
}
The reason this would work is because you're now passing an object around and manipulating an object instead of just manipulating a value. Essentially, think of it as a "sub-scope" problem, where your "div" is spawning its own scope under the view so that variable you're referencing is a native type, it passes by value. Therefore the function updates the parent value but not the child value.
For more information: http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html
http://jsfiddle.net/aesmzz6q
HTML:
<div ng-controller="theCtrl">
<div id="callFunction" ng-click="myFunction()">content here</div>
<div id="contactInfo" ng-show="showContent">content here</div>
</div>
JavaScript:
angular.module('appName', [])
.controller('theCtrl', ['$scope', function ($scope) {
$scope.showContent = false;
$scope.myFunction = function() {
$scope.showContent = !$scope.showContent;
}
}]);
angular.element(document).ready(function() {
angular.bootstrap(document, ['appName']);
});
There doesn't seem to be anything wrong with what you have. Here's a link to a working example.aesmzz6q
This works for me. I think your problem might be elsewhere.
HTML:
<div ng-controller="MyCtrl">
<div id="callFunction" ng-click="myFunction()">content here</div>
<div id="contactInfo" ng-show="showContent">content here</div>
</div>
JavaScript:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.showContent = false;
$scope.myFunction = function() {
$scope.showContent = true;
}
}
I have to include code to allow the JSFiddle link.
This works fine:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.11/angular.js" data-semver="1.3.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="callFunction" ng-click="myFunction()">content here</div>
<div id="contactInfo" ng-show="showContent">content here</div>
</body>
</html>
I've added a fiddle: http://plnkr.co/edit/S06ufeHI2j5lKs5LxbRT?p=preview
I have also fixed your fiddle there were a number of things wrong http://jsfiddle.net/97nkv1v1/4/

Apply in progress in Angular.JS

I have angularjs application and <span> in it. I try to hide it with ng-hide directive, but:
<span ng-hide="hideSpan">
And
// controller code here
....
$scope.hideSpan = true;
....
Doesn't work, it's ignoring. And if i make:
// controller code here
....
$scope.$apply(function(){$scope.hideSpan = true});
....
I get error: $apply already in progress.
How can i correctly use ng-hide/ng-show in this way?
Thank you.
You should be able to directly control the hide/show functions from your controller just as you show. The following is working example using a button to trigger toggling of hide show.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<span ng-hide="hideSpan">Some Content to hide</span>
<button ng-click="toggleHide()"/>Toggle Hide</button>
</body>
</html>
And the script.
angular.module('myapp', []).controller('mycontroller', function($scope){
$scope.hideSpan = true;
$scope.toggleHide = function(){
if($scope.hideSpan === true){
$scope.hideSpan = false;
}
else{
$scope.hideSpan = true;
}
}
});
I've created a simple plunker to show this in action at http://plnkr.co/edit/50SYs0Nys7TWmJS2hUBt?p=preview.
As far as why the $apply is causing an error, this is to be expected as direct scope (provided by the $scopeProvider) variable operations are already watching for change and wrapped into a default apply of sorts in core angular so any change will be automatically applied to the other bindings of that variable.
you can just change the hideSpan value in ng-click, save few lines. cheers
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<span ng-hide="hideSpan">Some Content to hide</span>
<button ng-click="hideSpan=!hideSpan"/>Toggle Hide</button>
</body>

Categories