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.
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 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.
i'm getting stuck for change div style when I click another div. I just want to change listAnswer class text-decoration become underline when I click one of ng-repeat div1. I hope someone can help me :( thanks
<style>
.object_screen {
width: 800px;
height: 500px;
}
.div1 {
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
}
</style>
<div class="object_screen">
<div class="div1" ng-repeat="object in objectList" ng-click="checking(object.name);" ng-style="{'background-image':'url(./img/level/{{ object.image }})}"></div>
</div>
<div class="listAnswer">
<li ng-repeat="object in objectList">{{ object.name }}</li>
</div>
this my angular script
var App = angular.module('App', ['ngRoute']);
App.controller('playController', ['$scope', '$http', function($scope, $http) {
$scope.objectList = [];
$scope.objectList.push({name:'tony', image:'image1.png'});
$scope.objectList.push({name:'Jay', image:'image2.png'});
$scope.objectList.push({name:'Michael', image:'image3.png'});
$scope.checking= function(nameObject){
// change text-decoration to underline for class listAnswer
}
}]);
You may declare a variable in your scope to have a Boolean false initially and change it to true in $scope.checking and have the ng-class as in the succeeding line
div class="listAnswer" ng-class="{ 'your text decoration css class' : watch variable set in the $scope.checking}" your text decoration class will be applied when the variable is set to true
I am developing an ionic mobile application; when i click on a word, its description pops up beneath it, as shown here.
What I want to do is close the pop up whenever I slide the text or click anywhere on the page.
Is this doable in AngularJs? if yes, What should I use?
Thank you.
Have a invisible full screen layer behind the popup, on clicking which you can hide both description as well as invisible layer and show rest.
Check out this codepen : https://codepen.io/anon/pen/yOpXQw
HTML
<html>
<body ng-app>
<div id="main" ng-app ng-controller="appController">
<input type="button" ng-value="value1" />
<div id="invisible" ng-click="click()" ng-hide="hide"> </div>
<input type="button" ng-value="value" ng-hide="hide" />
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
</body>
</html>
CSS
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
text-align:center;
}
#main{
height:1000px;
position:relative;
padding-top: 0px;
}
input
{
margin-top:100px;
padding-top: 50px;
position:absolute;
}
#invisible
{
height:100%;
width:100%;
position:absolute;
}
JS
function appController($scope){
$scope.value = 'Some Value from Scope';
$scope.value1 = 'another Value from Scope';
$scope.click = function()
{
$scope.hide=true;
alert("outside was clicked");
}
}
I have created a reusable directive and using it in two different forms but unable to able/disable the button in form which changes according to the check-box state in directive. I want disable the button until checkbox is not checked and disable it whenever check-box get unchecked.
My Fiddle
HTML
<div ng-app='demo'>
<form name="verification" ng-controller="myCtrl1">
<terms-conditions conditions="conditions"></terms-conditions>
<br>
<button class="btn-primary" ng-disabled="!checked" >Submit</button>
<hr>
</form>
<form name="bankinfo" ng-controller="myCtrl2">
<terms-conditions conditions="conditions"></terms-conditions>
<br>
<button class="btn-primary">Submit</button>
<hr>
</form>
</div>
JS
var demo = angular.module('demo', []);
demo.directive("termsConditions",function(){
return {
restrict:"E",
scope:{
conditions:'='
},
template:
"<div class='terms row'><span class='col-md-12'>{{conditions}}</span></div><br><input type='checkbox'><span>Yes, I agree to the terms and condtions</span>"
}
});
demo.controller("myCtrl1",function($scope){
$scope.conditions= " Payment terms" ;
})
demo.controller("myCtrl2",function($scope){
$scope.conditions= "Bank Terms" ;
});
CSS
span {
font-weight:bold;
}
.terms{font-weight: normal;
width: 500px;
height: 50px;
overflow-y: scroll;
padding: 5px 5px 5px 5px;
border-style: solid;
border-color: #666666;
border-width: 1px;
}
You almost got it right, you need to pass checked attribute value as the 2 way binding property and use ng-disabled.
<terms-conditions conditions="conditions" checked="checked"></terms-conditions> <br>
<button class="btn-primary" ng-disabled="!checked" >Submit</button>
Fiddle