The following code is adopted from a working sample for angular 1.1.4, only using the new GreenSock api for ng-animate. toggle functionality works, as ng-show behaves as expected, however The AppAnimation functions 'list-in' and 'list-out' are not being called on ng-show.
<!DOCTYPE html>
<head>
<style>
.box { color: white; text-align: center; height: 100px; font-size: 86px; }
.on { background-color: green; }
.off { background-color: red; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.7/TweenMax.min.js"></script>
<script>
angular.module('AppAnimations', [])
.animation('list-out', ['$window',function($window) {
return {
start : function(element, done) {
console.log('list-out')
TweenMax.set(element, {position:'relative'});
var duration = 1;
//we can use onComplete:done with TweenMax, but lets use
//a delay value for testing purposes
TweenMax.to(element, 1, {opacity:0, width:0});
$window.setTimeout(done, duration * 1000);
}
}
}])
.animation('list-in', ['$window',function($window) {
return {
setup: function(element) {
TweenMax.set(element, {opacity:0, width:0});
},
start : function(element, done) {
console.log('list-in')
var duration = 1;
//we can use onComplete:done with TweenMax, but lets use
//a delay value for testing purposes
TweenMax.to(element, duration, {opacity:1, width:210});
$window.setTimeout(done, duration * 1000);
}
}
}])
angular.module('myApp', ['AppAnimations'])
.controller('MainController', ['$scope', function($scope) {
$scope.toggle = true;
}])
</script>
</head>
<body ng-app="myApp" ng-controller="MainController">
<button ng-click="toggle = !toggle">Toggle!</button>
<div class="box on" ng-show="toggle" ng-animate="{leave:'list-out', enter:'list-in'}">On</div>
<div class="box off" ng-hide="toggle" ng-animate="{leave:'list-out', enter:'list-in'}">Off</div>
</body>
</html>
<div class="box on" ng-show="toggle" ng-animate="{show: 'list-in', hide: 'list-out'}">On</div>
<div class="box off" ng-hide="toggle" ng-animate="{show: 'list-in', hide: 'list-out'}">Off</div>
So I finally solved it.. you are using leave/enter and should be using show/hide. I updated the names to be more PC correct.
<div class="box on" ng-show="toggle" ng-animate="{hide:'list-hide', show:'list-show'}">On</div>
<div class="box off" ng-hide="toggle" ng-animate="{hide:'list-hide', show:'list-show'}">Off</div>
angular.module('AppAnimations', [])
.animation('list-hide', ['$window',function($window) {
...
).animation('list-show', ['$window',function($window) {
Working fiddle: http://jsfiddle.net/ncapito/CTfL8/
Related
I am using ng map and geting ui for half of the screen but not geting it in full div
var app = angular.module('app', ['ngMap']);
app.controller('ctrl', ['$scope', 'ngMap','$timeout', function($scope, ngMap,$timeout) {
NgMap.getMap().then(function(map) {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
$timeout(function() {
NgMap.getMap().then(function(map) {
google.maps.event.trigger(map, 'resize');
});
}, 500);
}]);
#ng-map {
width: 100% !important;
height: 100% !important;
position: absolute !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div map-lazy-load="https://maps.google.com/maps/api/js" id="ng-map" map-lazy-load-params="https://maps.google.com/maps/api/js?key=AIzaSyB4qnR0XX1tetbLUxSSLVWKi_E4WzGi1tk">
<ng-map zoom="4">
</ng-map>
</div>
</div>
i dont know why i am geting this error .Please help me
First thing is I believe you are setting it on wrong element you need to set it up on element inside your #ng-map div try changing you CSS to (also try not to use !importants):
#ng-map ng-map{
width: 100%;
height: 100%;
position: absolute;
}
After that, you can try setting up:
default-style="false"
on your ng-map directive, also try with inline styles, here's example:
<ng-map zoom="4" default-style="false">
</ng-map>
And plunker:
http://plnkr.co/edit/Qh2O0W?p=preview
This is not working working<div id = "number_1" class="number" ng-click="selected='1'" ng-class="{active: selected=='1',firstactive: firstnumber=='1'}"><div class="number-text">1</div></div>but if I apply ng-class with child div it works fine.
Works for me. Can you check this
var demo = angular.module('demo', []);
demo.controller('DemoCtrl', function($scope) {
$scope.firstnumber = 1;
});
.active {
color: green;
}
.firstactive {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="demo">
<div ng-controller="DemoCtrl">
<div id="number_1" class="number" ng-class="{active: selected=='1',firstactive: firstnumber=='1'}" ng-click="selected='1'">
<div class="number-text">1</div>
</div>
</div>
</body>
I am using ui-grid in angular, I want to have a "click me" button that when clicked, alerts or logs the contents of the specific row data or index that is associated. How do I get to that? Right now I can trigger an alert box, but not get the actual contents of the row (or even for example, a specific key).
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angularjs Show No Records Found in UI Grid</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<script type="text/javascript">
var myApp = angular.module('sampleapp', ['ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);
myApp.controller("appcontroller", function ($scope, $http) {
$scope.gridOptions = {
data: 'sampledata',
columnDefs: [
{ field: 'name' },
{ field: 'gender' },
{ field: 'company' },
{ field: 'click', cellTemplate: '<button class="btn primary" ng-click="grid.appScope.sampledetails()">Click Me</button>' }
]
};
$scope.sampledata = { "data": [] };
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function (data) {
$scope.sampledata = data;
});
$scope.sampledetails = function () {
alert('Hi Click is working');
return false;
};
});
</script>
<style type="text/css">
.grid {
width: 500px;
height: 400px;
}
.nodatatxt {
position: absolute;
top : 80px;
opacity: 0.25;
font-size: 1.5em;
width: 100%;
text-align: center;
z-index: 1000;
}
</style>
</head>
<body>
<form id="form1">
<div ng-app="sampleapp" ng-controller="appcontroller">
<br /><br />
<div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid">
<div class="nodatatxt" ng-if="sampledata.data.length==0">No Records Found</div>
</div>
</div>
</form>
</body>
</html>
At first, your code is unreadable. Use embedded code snippets, jsfiddle, codepen or plunkr
Secondly, if you will take a look at template of your ui-grid, you will see that it just uses ng-repeat. Something like this:
ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"
So you can override cell template:
var actionCellTemplate = '<div class="ui-grid-cell-contents"' +
'ng-model="row.entity.username"' +
'ng-click="clickMe(row)">....</div>'
$scope.gridOptions = {
columnDefs: [
....
{
name: 'action',
cellTemplate: actionCellTemplate
}
]
};
I'm having truble setting the data-background attribute. Any idea why this is not working?
angular.module('app',[]).controller('SlidesController',['$scope','$timeout', function($scope,$timeout){
$scope.slides = [
{ title:"I'm white - but should have some color", background:"#22BB44"},
{ title:"...no color here? Why??", background:"#99BB44"} ];
$timeout(function(){
Reveal.initialize({
autoSlide: 1500,
loop:true
});
}, 1000);
}]);
.slides section {
font-size: 50px;
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://rawgit.com/hakimel/reveal.js/master/js/reveal.js"></script>
<link rel="stylesheet" href="https://rawgit.com/hakimel/reveal.js/master/css/reveal.css"></style>
<body ng-app="app" ng-controller="SlidesController">
<div class="reveal">
<div class="slides">
<!-- this works -->
<section data-background="#0000aa">
I'm blue
</section>
<!-- this works, except for the background -->
<section data-background="{s.background}" ng-repeat="s in slides">{{s.title}}</section>
</div>
</div>
</body>
Simple fix, just needed to create a directive for the attribute
.directive('slidebackground', function(){
return {
link: function(scope, element, attrs) {
attrs.$set('data-background', attrs.slidebackground);
}
});
I have an angular ngSwitch animation applied in 2 different ways, one within a directive, and one on the html page. The animation within the directive fires on page load. Why is this occurring and how to fix?
plunker: http://plnkr.co/edit/japvWhohw8JaDWkDBUAf?p=preview
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//code.angularjs.org/1.2.20/angular.js"></script>
<script src="//code.angularjs.org/1.2.20/angular-animate.js"></script>
<script src="script.js"></script>
</head>
<body id="ng-app" ng-app="myApp" ng-controller="myAppCtrl">
Change value
<br><br>
<span><strong>Through directive</strong><small> - animation fires on page load</small></span>
<div value-rotate="myVal" style=""></div>
<br>
<span><strong>Not through directive</strong><small> - animation does no fire on page load</small></span><br>
<span class="value-rotate" ng-switch on="myVal">
<div class="value-rotate__value" ng-switch-when="true">value is {{ myVal }}</div>
<div class="value-rotate__value" ng-switch-when="false">value is {{ myVal }}</div>
</span>
</body>
</html>
script.js
'use strict';
angular.module('myApp', ['valueRotate'])
.controller('myAppCtrl', function($scope) {
$scope.myVal = true;
});
angular.module('valueRotate', ['ngAnimate'])
.directive('valueRotate', function() {
return {
scope: {
value: '=valueRotate'
},
templateUrl: 'value-rotate.html',
link: function (scope, element) {
element.css({ position: 'relative', overflow: 'hidden' });
}
};
});
style.css
.value-rotate {
position: relative;
display: inline-block;
}
.value-rotate__value {
padding: 10px;
}
.value-rotate__value.ng-animate {
-webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.value-rotate__value.ng-leave.ng-leave-active,
.value-rotate__value.ng-enter {
top: -50px;
}
.value-rotate__value.ng-leave,
.value-rotate__value.ng-enter.ng-enter-active {
top: 0;
}
value-rotate.html (directive template)
<span class="value-rotate" ng-switch on="value">
<div class="value-rotate__value" ng-switch-when="true">value is {{ value }}</div>
<div class="value-rotate__value" ng-switch-when="false">value is {{ value }}</div>
</span>