I am using angular for rendering view like this:
var app = angular.module("demo", []);
app.controller('demoCtrl', ["$scope",function ($scope) {
$scope.current_step = 1;
$scope.step_two = function(){
$scope.current_step = 2;
};
$scope.step_one = function(){
$scope.current_step = 1;
};
}]);
.button {
background: #fb6648;
color: #fff;
display: inline-block;
padding: 18px 0px;
max-width: 150px;
width: 100%;
text-align: center;
border-radius: 3px;
font-size: 18px;
transition: all 0.5s;
outline: none;
border: none;
-webkit-appearance: none!important;
}
.area {
width: 100px;
height: 100px;
display: block;
border: 1px solid;
text-align: center;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="demo">
<div ng-controller="demoCtrl" id="demoCtrl">
<div ng-if="current_step==1">
<span class="area" >Step One</span>
<a class="button" ng-click="step_two()" >go to Step Two</a>
</div>
<div ng-if="current_step==2">
<span class="area">Step Two</span>
<a class="button" ng-click="step_one()" >Back to Step One</a>
</div>
</div>
</body>
i want this button to work when browser back and froward button are pressed.
i tried changing hash but it didn't worked.
It seems that you need to store the value of scope as cookie.
That can be done as shown below.
Case-1: Cookies More $cookies
Provides read/write access to browser's cookies.
angular.module('cookieStoreExample', ['ngCookies'])
.controller('ExampleController', ['$cookieStore', function($cookieStore) {
// Put cookie
$cookieStore.put('myFavorite','oatmeal');
// Get cookie
var favoriteCookie = $cookieStore.get('myFavorite');
// Removing a cookie
$cookieStore.remove('myFavorite');
}]);
Case-2: ngStorage More ngStorage
An AngularJS module that makes Web Storage working in the Angular Way.
var app = angular.module('MyApp', ["ngStorage"])
app.controller('MyController', function ($scope, $localStorage, $sessionStorage, $window) {
$scope.Save = function () {
$localStorage.LocalMessage = "LocalStorage: My name is XXX.";
$sessionStorage.SessionMessage = "SessionStorage: My name is XXX.";
}
$scope.Get = function () {
$window.alert($localStorage.LocalMessage + "\n" + $sessionStorage.SessionMessage);
}
});
More help
how-to-use-ngstorage-in-angularjs
Use $localStorage,
angular.module('myApp')
.controller('MyCtrl',function($scope,$localStorage){
window.onhashchange = function() {
console.log("triggered");
if($localStorage.user != null){
//get value from $localStorage and set it to scope variable
$scope.user = JSON.parse($localStorage.user);
}
}
});
In someother controller you need to set $localStorage.user value as
$localStorage.user = JSON.stringify({'name':'Geo','age':22});
If it is not null you can reassign it to the $scope.user variable.
Related
I have the above page structure . i want to check a conditon to apply style in div with id if the buttonlayout has a class proceed.
<div>
<div id="main">
</div>
<div id='buttonlayout" class="proceed">
</div>
I am displaying the <div id='buttonlayout" class="proceed"></div> based on some conditions. so if the div doesnt exist I dont want to apply sty;e. How can I check this in angular js?
So the logic I am looking for is
if (.div-proceed) exist add an extra style to div (with id main). Is it possible to check in my html page itself (ng-class)?
You can set conditions in ng-class, as sample $scope.proceed default is false our condition is when $scope.proceed is true add class proceed to the element.
This mean if $scope.proceed = false the class not exist, and if it true class is exist.
var app = angular.module("app", []);
app.controller("ctrl", ["$scope", "$filter", function($scope, $filter) {
$scope.change = function() {
$scope.proceed = !$scope.proceed;
}
}]);
body {
padding-top: 50px;
}
a{cursor: pointer}
#buttonlayout {
width: 100px;
height: 100px;
transition: all 0.5s;
background-color: #ccc;
}
#buttonlayout.proceed {
width: 200px;
height: 200px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<a ng-click="change()">click to remove/add 'proceed' class</a>
<div id="buttonlayout" ng-class="{'proceed': proceed}"></div>
</div>
I have written a simple Angular JS code. I'm a beginner. However, one of my expressions is not getting evaluated. Need help. Please check the code below -
var myAppModule = angular.module('myAppModule', []);
myAppModule.controller('myController', function($scope){
// Hide colors by default
$scope.isHidden = true;
// a function, placed into the scope, which
// can toggle the value of the isHidden variable
$scope.showHideColors = function () {
$scope.isHidden = !$scope.isHidden;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myAppModule">
<head>
<title>Angular JS</title>
<script src="js/angular.min.js"></script>
<script src="js/myAppModule.js"></script>
<style>
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
}
div {
margin: 20px;
padding: 20px;
font-size: 16px;
color:#ffffff;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
#purple {
background-color: purple;
}
#gray {
background-color: gray;
}
#olive {
background-color: olive;
}
</style>
</head>
<body ng-controller="myController">
<h2>AngularJS Socks</h2>
<p>Keep warm this winter with our 100% wool, 100% cool, AngularJS socks!</p>
<button ng-click="showHideColors()" type="button">
{{isHidden ? 'Show Available Colors' : 'Hide Available Colors'}}
</button>
<div id="red" ng-hide="isHidden">Red</div>
<div id="green" ng-hide="isHidden">Green</div>
<div id="blue" ng-hide="isHidden">Blue</div>
<div id="purple" ng-hide="isHidden">Purple</div>
<div id="gray" ng-hide="isHidden">Dark Slate Gray</div>
<div id="olive" ng-hide="isHidden">Olive</div>
</body>
</html>
The expression - {{isHidden ? 'Show Available Colors' : 'Hide Available Colors'}} is not getting evaluated but displaying as is on the button. No clue as to what i missed. Thanks in advance.
The code is missing closing bracket. You can see the working demo here - http://jsfiddle.net/me8j3zyc/
var app = angular.module('myAppModule', []);
app.controller('myController', function($scope) {
$scope.isHidden = true;
// a function, placed into the scope, which
// can toggle the value of the isHidden variable
$scope.showHideColors = function() {
$scope.isHidden = !$scope.isHidden;
} // <- This is missing.
});
This is because you havent closed your function
myAppModule.controller('myController', function($scope){
// Hide colors by default
$scope.isHidden = true;
// a function, placed into the scope, which
// can toggle the value of the isHidden variable
$scope.showHideColors = function() {
$scope.isHidden = !$scope.isHidden;
}})
Your expression is fine, but you have a typo error in your JS file:
var myAppModule = angular.module('myAppModule', []);
myAppModule.controller('myController', function($scope) {
// Hide colors by default
$scope.isHidden = true;
// a function, placed into the scope, which
// can toggle the value of the isHidden variable
$scope.showHideColors = function() {
$scope.isHidden = !$scope.isHidden;
} //MISSING
});
You can try this:
<button ng-if="isHidden" ng-click="showHideColors()" type="button">Show Available Colors</button>
<button ng-if="!isHidden" ng-click="showHideColors()" type="button">Hide Available Colors</button>
I'm trying to learn Angular and modals just aren't working. The modal will show up, but the modal-content div isn't growing to contain all of the content. Instead, the content just runs out of the bottom of a very short modal. See picture below for what it is doing:
The three mini-paragraphs and the links below are supposed to be inside the modal.
Here is the controller for the "login" page:
MyApp.controller('loginController', ['$scope', '$location', '$translate', '$http', 'browserCheckService', 'modalService', function ($scope, $location, $translate, $http, browserCheckService, modalService) {
'use strict';
$scope.checkBrowser = function() {
if (browserCheckService.browserCheck() === false) {
try {
var settings = {
title: 'Incompatible Browser Warning',
size: 'lg',
templateUrl: 'Pages/browserReject.html',
controller: 'browserRejectController'
}
modalService.DisplayModal(settings);
} catch (err) {
alert(err.message);
}
}
};
$scope.checkBrowser();
}]);
Here is the controller for the browserReject:
MyApp.controller('browserRejectController', ['$scope', '$uibModalInstance', function($scope, $uibModalInstance) {
'use strict';
$scope.close = function () {
$uibModalInstance.dismiss();
}
}]);
Here is the modalService:
angular.module('MyApp').service('modalService', ['$uibModal', function ($uibModal) {
'use strict';
this.DisplayModal = function (settings) {
if (settings === undefined) {
throw "Settings must be supplied for modal";
} else {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: settings.templateUrl,
controller: settings.controller,
size: settings.size
});
}
};
}]);
The browserCheckService is simply set to return to false so I could test the modal.
Here is the browserReject.html contents:
<div id="modalHeaderContainer">
<div id="title">Incompatible Browser Warning</div>
<div id="closeButton">
<button type="submit" class="close" ng-click="close()">X</button>
</div>
</div>
<hr />
<div id="jr_outer">
<div id=jr_inner">
<div id="jr_center">
<p translate={{'application__browser_reject_message'}}"></p>
<ul>
<li>
<a target="_blank" href="http://www.google.com/chrome/>Google Chrome</a>
</li>
<li>
<a target="_blank" href="https://www.mozilla.org/en-US/firefox/new/>Firefox</a>
</li>
<li>
<a target="_blank" href="http://www.apple.com/safari/>Safari</a>
</li>
<li>
<a target="_blank" href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>
</li>
</ul>
</div>
</div>
</div>
Here is my CSS as it currently stands for the modal:
/* CSS for modal settings */
.ng-modal-overlay {
/* A dark translucent div that covers the whole screen */
position:absolute;
z-index:9999;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000000;
opacity: 0.8;
}
.ng-modal-dialog {
/* A centered div above the overlay with a box shadow. */
z-index:10000;
position: absolute;
width: 50%; /* Default */
/* Center the dialog */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 4px 4px 80px #000;
}
.ng-modal-dialog-content {
padding:10px;
text-align: left;
}
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
padding: 5px;
cursor: pointer;
font-size: 120%;
display: inline-block;
font-weight: bold;
font-family: 'arial', 'sans-serif';
}
#modalHeaderContainer {
width:100%;
height: 1.5em;
}
#title {
float:left;
font-size:1.7em;
padding-left:.5em;
}
#closeButton {
float:right;
padding-top:.5em;
padding-right:.5em;
}
/* End CSS for modal settings */
I've read the posts here and here, as well as several others and nothing seems to quite fit. I feel as though I'm overlooking something exceedingly simple, but can't find it. I've tried setting max-height on modal-content to 100%, but that doesn't change the display, either.
you should override the default .modal-window by doing something like the following in your css:
.mynewModal-modal-window .modal-window {
width: 100%;
height: 100%;
}
and add its' class as a parameter to the open method of $uibModal:
this.DisplayModal = function (settings) {
if (settings === undefined) {
throw "Settings must be supplied for modal";
} else {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: settings.templateUrl,
controller: settings.controller,
windowClass: 'myNewModal-modal-window',
size: settings.size
});
}
};
I just haven't found a way to override the modal-content yet via the controller :( (would be nice to have something similar)
Not exactly a fit but people looking for answers to uibmodal css overflow questions will need this:
Believe it or not, if you do not set your overflow:hidden or overflow:scroll on anything dynamic that you set a height to, like a repeater in angular, or injected content in jquery the content will simply look as if the modal isn't stretching, when in fact it is doing exactly as intended.
Basically, i am using a service for to manage the popup-modal. some point i made the mistake or wrongly i have understand the way of using the service, i am not able to update the scope value here.
my service.js
"use strict";
angular.module("tcpApp").service("modalService", function () {
this.Name = "My Modal";
this.showModal = false; //default false.
});
controller.js:
$scope.modalService.Name = "Mo!" //changing the name works!
$scope.showModal = true; //changing the ng-show works!
here is my directive :
"use strict";
var modalPopup = function ( modalService ) {
return {
restrict : "E",
replace : true,
scope : {
showModal:"=" //getting value from controller.js
},
templateUrl : "views/tools/modalPopup.html",
link : function ( scope, element, attrs ) {
scope.Name = modalService.Name; //if i remove this Name not working!
scope.hideModal = function () {
alert("i am called");
scope.showModal = false; //it's not updating the value!
}
}
}
}
angular.module("tcpApp")
.directive("modalPopup", modalPopup);
here is my html in the index.html :
<modal-popup ng-show="showModal" showModal="showModal"></modal-popup>
here is my template in views/tools/modalPopup.html
<div class='ng-modal'>
<div class='ng-modal-overlay'></div>
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<div class='ng-modal-close' ng-click='hideModal()'>X</div>
<div class='ng-modal-dialog-content'>Please test me {{Name}}</div>
</div>
</div>
I am clicking on the hideModal(), But the showModal is not became false and the poup-up modal not closing.
where is the mistake here? and how the way i wrongly understand the service here? or what is the correct way to do this?
Thanks in advance.
You don't need to pass around anything in your view because you have a service setup to do this for you:
(function() {
"use strict";
var app = angular.module("tcpApp", []);
app.controller('someController', function($scope, modalService) {
$scope.modal = modalService;
$scope.modal.Name = "Mo!"
});
app.service("modalService", function() {
this.Name = "My Modal";
this.isOpen = false;
this.hide = function() {
this.isOpen = false;
};
this.show = function() {
this.isOpen = true;
};
});
})();
(function() {
"use strict";
angular.module("tcpApp").directive("modalPopup", function(modalService) {
return {
restrict: "E",
replace: true,
scope: {},
templateUrl: "modalPopup.html",
link: function(scope, element, attrs) {
scope.modal = modalService;
}
}
});
})();
.ng-modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ng-modal:after {
content: "";
display: block;
position: absolute;
height: 100%;
width: 100%;
z-index: 10;
background-color: rgba(0, 0, 0, 0.2);
}
.ng-modal-dialog {
width: 300px;
height: 150px;
position: absolute;
left: 50%;
top: 15px;
margin-left: -150px;
z-index: 100;
text-align: center;
background-color: white;
}
.ng-modal-close {
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 50%;
background-color: red;
margin: 5px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='tcpApp'>
<div ng-controller='someController'>
<input type="text" ng-model="modal.Name" />
<button ng-click='modal.show()'>show modal</button>
<modal-popup></modal-popup>
</div>
<script type="text/ng-template" id="modalPopup.html">
<div class='ng-modal' ng-if="modal.isOpen">
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<div class='ng-modal-close' ng-click='modal.hide()'>X</div>
<div class='ng-modal-dialog-content'>Please test me {{modal.Name}}</div>
<input type=text" ng-model="modal.Name"/>
</div>
</div>
</script>
</div>
Are you getting alert 'i am called'? If yes, try this
alert("i am called");
scope.showModal = false; //it's not updating the value!
scope.$apply(); // add this line it will update scope object value
try this
scope.$apply(function() {
scope.showModal = false;
});
I would like to show and hide div using Angularjs, but i am new in Angular so need some help Thanks in Advance.
I want to fire event on click of this a tag
<div style="width: 50px; height: 50px; background-color: red;">I want to show this element</div>
<div style="width: 50px; height: 50px; background-color: red;">I want to Hide this element</div>
controller.js:
app.controller('MainCtrl', function($scope) {
$scope.showDiv = '1';
$scope.toggleShow = function(){
$scope.showDiv = !$scope.showDiv;
}
});
HTML:
<body ng-controller="MainCtrl">
I want to fire event on click of this a tag
<div ng-show="showDiv" style="width: 50px; height: 50px; background-color: red;">Show this element</div><br>
<div ng-hide="showDiv" style="width: 50px; height: 50px; background-color: green;">Hide this element</div>
</body>
Here is the Plunker: http://plnkr.co/edit/DWobFzvas9x4lhaoNfTI.