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");
}
}
Related
In AngularJS, is there any way to make an ng-click dependent upon a boolean?
For example, I'd like the following text ("Click") to be clickable, but only when some scope property (e.g., $rootScope.enableClick) is true.
<div ng-click="count = count + 1" ng-init="count=0">Click</div>
Preferably, is there a straightforward way to do this without creating a custom directive?
Use the strange and wonderfull && logical operator in the ng-click expression:
<div ng-click="!stop && (count = count + 1)">Click me</div>
The DEMO
.clickable {
cursor: pointer;
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app ng-init="count=0">
<div ng-click="!stop && (count = count + 1)" class="clickable" >Click Me</div>
<div>Count={{count}}</div>
<input type="checkbox" ng-model="stop">Stop counting<br>
</body>
Update
Or use a button with the ng-disabled directive:
<button ng-click="count = count + 1" ng-disabled="stop" >Click Me</button>
The ng-disabled directive does not work with <div> elements. The disabled property is not a global attribute. The ng-disabled directive only works with <input>, <button>, <textarea>, and <select> elements as those elements support the disabled property.
The DEMO
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app ng-init="count=0">
<button ng-click="count = count + 1" ng-disabled="stop" >Click Me</button>
<div>Count={{count}}</div>
<input type="checkbox" ng-model="stop">Stop counting<br>
</body>
Check this out, I have used the same method as #georgeawg used. The difference is that I have made it as a button format and used pointer-events: none so that no click event will be triggered from the .clickable
.clickable {
cursor: pointer;
display: inline-block;
width: 200px;
text-align: center;
padding: 10px;
background-color: #eee;
transition: all 0.3s ease;
margin: 10px 0;
}
.clickable:hover {
background-color: #ddd;
}
.test {
color: grey;
pointer-events: none;
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app ng-init="count=0">
<div>Count={{count}}</div>
<div ng-click="count = count + 1" ng-class="{'test': stop}" class="clickable">Click Me</div>
<div>
<input type="checkbox" ng-model="stop">Stop counting
</div>
</body>
Try
<div ng-click="count = count + 1" ng-init="count=0" ng-disabled="!enableClick">Click</div>
The ng-disabled directive sets the disabled attribute of a form field
(input, select, or textarea).
My html
<div id="deviceInputContainer">
<div class="row noMarg">
<div class="form col-xs-12" style='padding-left:0px;margin-right:15px;'>
<div class="form col-xs-12 noPad left">
<h2 class="page-title">Certification Projects
<span class='icon-settings-big' style='cursor:pointer;float:right;margin-top:-10px;' title='settings' uib-popover-template="dynamicPopoverPageSettings.templateUrl"
popover-placement="bottom-right" popover-trigger="click outsideClick" popover-class="settingsClass" ></span>
</h2>
</div>
<div class="helpMessage" style="margin-left:-15px;margin-right:-15px;" ng-show="dashboardData.userPreferences.showHelpTextEnabled">
<p class="help-text-content col-sm-12 helpText-color helpText-size" style='margin-bottom:15px;'>Your open projects are listed below- but you can search for other projects if you want. Just
set the search criteria below.</p>
</div>
</div>
</div>
</div>
My controller code to toggle popover and on window resize close popover.
But popover hide is not working on window rezise, can somebody please help me where am i doing wrong
$scope.dynamicPopoverPageSettings = {
templateUrl: 'myPopoverTemplatePageSetting.html',
title: 'Page Settings',
isPopOpen: false,
setIsPopOpen: function() {
$scope.dynamicPopoverPageSettings.isPopOpen = !$scope.dynamicPopoverPageSettings.isPopOpen;
console.log("$scope.dynamicPopoverPageSettings.isPopOpen == " + $scope.dynamicPopoverPageSettings.isPopOpen);
},
setIsPopFalse: function() {
$scope.dynamicPopoverPageSettings.isPopOpen = false;
console.log("$scope.dynamicPopoverPageSettings.isPopOpen == " + $scope.dynamicPopoverPageSettings.isPopOpen);
}
};
var w = angular.element($window);
w.bind('resize', function () {
$('.settingsClass ').popover('hide');
});
When using angular if not using it already id recommend using Angular-Bootstrap-native AngularJS directives based on Bootstrap's markup and CSS. I've included this link to their site, it's the 0.14.3 docs. Also including this Codepen with an example of what I think you're trying to accomplish. Hope it helps, I can always help and modify it further.
function exampleController($scope, $window) {
$scope.popoverVisible = false;
function onResize() {
$scope.popoverVisible = false;
// manuall $digest required as resize event
// is outside of angular
$scope.$digest();
}
function cleanUp() {
angular.element($window).off("resize", onResize);
}
angular.element($window).on("resize", onResize);
$scope.$on("$destroy", cleanUp);
}
angular
.module("example", ["ui.bootstrap"])
.controller("exampleController", exampleController);
html,
.container,
.container-fluid {
width: 100%;
height: 100%;
background-color: #333;
color: #fff;
text-align: center;
button {
margin-top: 10%;
font-weight: bold;
}
button:focus {
outline: 0;
}
.popover {
.popover-title,
.popover-content {
color: #333;
}
}
}
<div class="container-fluid" ng-app="example">
<div class="container" ng-controller="exampleController">
<button uib-popover="I have a title!" popover-title="The title." popover-placement="bottom-right" popover-is-open="popoverVisible" type="button" class="btn btn-primary">
CLICK ME
</button>
</div>
</div>
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 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.
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