I have a list of items (divs) and when I click on any of them I need them to move (with animation) to the top of the list.
However, move animation is not working for me.
HTML code:
<body ng-controller="myCtrl">
<div ng-init="items=[1,2,3,4,5,6,7,8,9]">
<div data-ng-repeat="item in items track by $index"
ng-click="move2Top($index)"
class="my-repeat-animation boxy">
{{item}}
</div>
</div>
</body>
Javascript controller (contains an Array prototype method for pushing array element to top of array)
var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.controller('myCtrl', function($scope){
$scope.move2Top = function (idx) {
console.log('moving element ' + idx);
if (idx > 0)
$scope.items.moveToTop(idx);
};
Array.prototype.moveToTop = function(from) {
this.splice(0, 0, this.splice(from, 1)[0]);
};
});
And the CSS:
.my-repeat-animation.ng-enter,
.my-repeat-animation.ng-leave,
.my-repeat-animation.ng-move {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
position:relative;
}
.my-repeat-animation.ng-enter {
left:-10px;
opacity:0;
}
.my-repeat-animation.ng-enter.ng-enter-active {
left:0;
opacity:1;
}
.my-repeat-animation.ng-leave {
left:0;
opacity:1;
}
.my-repeat-animation.ng-leave.ng-leave-active {
left:-10px;
opacity:0;
}
.my-repeat-animation.ng-move {
opacity:0.5;
}
.my-repeat-animation.ng-move.ng-move-active {
opacity:1;
}
.boxy {
border: solid 1px;
margin: 3px;
padding: 3px;
border-radius: 4px;
width: 30px;
text-align: center;
}
Please take a look at the example:
http://plnkr.co/edit/asHtC5WOt9qnePyzPqk5?p=preview
Animated move simply doesn't work.
Maybe you can refer to this question on stack. This is possibly similar what you are trying to achieve.
Animating ng-move in AngularJS ngRepeat is animating the wrong items
It is not complete but it might give you some idea or lead you in right direction.
I think that this has to do with your Array.prototype function.
If you do the splicing in $scope.move2Top it works, at least in my example.
var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.controller('myCtrl', function($scope){
$scope.move2Top = function (idx) {
console.log('moving element ' + idx);
if (idx > 0)
$scope.items.splice(0, 0, $scope.items.splice(idx, 1)[0]);
};
});
http://plnkr.co/edit/H5UpIZoqIMnJofz0mndL?p=preview
Related
i am using below code. But i am getting error Uncaught Error: [$injector:nomod]. The module name is same. Not sure why i am getting this error. Please help. i checked the syntax, names etc everywhere but could not find any issues. it seems like i missed something simple but not able to figure out where exactly i made a mistake.
angular.module("demo").controller("SimpleDemoController", function($scope) {
$scope.models = {
selected: null,
lists: {"A": [], "B": []}
};
// Generate initial model
for (var i = 1; i <= 3; ++i) {
$scope.models.lists.A.push({label: "Item A" + i});
$scope.models.lists.B.push({label: "Item B" + i});
}
// Model to JSON for demo purpose
$scope.$watch('models', function(model) {
$scope.modelAsJson = angular.toJson(model, true);
}, true);
});
/**
* The dnd-list should always have a min-height,
* otherwise you can't drop to it once it's empty
*/
.simpleDemo ul[dnd-list] {
min-height: 42px;
padding-left: 0px;
}
/**
* The dndDraggingSource class will be applied to
* the source element of a drag operation. It makes
* sense to hide it to give the user the feeling
* that he's actually moving it.
*/
.simpleDemo ul[dnd-list] .dndDraggingSource {
display: none;
}
/**
* An element with .dndPlaceholder class will be
* added to the dnd-list while the user is dragging
* over it.
*/
.simpleDemo ul[dnd-list] .dndPlaceholder {
background-color: #ddd;
display: block;
min-height: 42px;
}
.simpleDemo ul[dnd-list] li {
background-color: #fff;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
}
/**
* Show selected elements in green
*/
.simpleDemo ul[dnd-list] li.selected {
background-color: #dff0d8;
color: #3c763d;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<script src="./angular-drag-and-drop-lists.js"></script>
</head>
<body ng-app="demo">
<!-- The dnd-list directive allows to drop elements into it. The dropped data will be added to the referenced list -->
<ul dnd-list="list">
<!-- The dnd-draggable directive makes an element draggable and will transfer the object that was assigned to it. If an element was dragged away, you have to remove it from the original list yourself using the dnd-moved attribute -->
<li ng-repeat="item in list"
dnd-draggable="item"
dnd-moved="list.splice($index, 1)"
dnd-effect-allowed="move"
dnd-selected="models.selected = item"
ng-class="{'selected': models.selected === item}">
{{item.label}}
</li>
</ul>
</body>
</html>
Your module should have an empty dependencies injected
angular.module("demo",[]).controller("SimpleDemoController", function($scope) {
I'm looking to implement the following pieces of code into my angular boiler plate. I'm a bit new to the framework, so some patience is appreciated!
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="myApp">
<bars data="40,4,55,15,16,33,52,20"></bars>
</div>
.chart {
background: #eee;
padding: 3px;
}
.chart div {
width: 0;
transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 5px;
color: white;
box-shadow: 2px 2px 2px #666;
}
angular.module('myApp', []).
directive('bars', function ($parse) {
return {
restrict: 'E',
replace: true,
template: '<div id="chart"></div>',
link: function (scope, element, attrs) {
var data = attrs.data.split(','),
chart = d3.select('#chart')
.append("div").attr("class", "chart")
.selectAll('div')
.data(data).enter()
.append("div")
.transition().ease("elastic")
.style("width", function(d) { return d + "%"; })
.text(function(d) { return d + "%"; });
}
};
});
Which are the HTML, CSS and JS code excerpts for the graph only. I'm looking to implement this into my code, which is easy enough for the HTML/CSS (I've added a new div and style sheet in my header of my index.html).
I'm wondering how I would go about adding the JS bit of code to my app.js. My existing code already lists several modules, but no var app = angular.module('myApp', ['zingchart-angularjs']); type statement.
When I simply copy my code above in, I don't see any graph appear on my webpage.
Any help appreciated - thanks!
In this plunk I have a div that should move from left to right in a transition when the user clicks on the checkbox. Instead, the div just hides and shows in the new position. How to achieve the transition effect in Angular?
HTML:
Move <input type="checkbox" ng-model="checked" />
<div class="panel" ng-class="{ 'class1' : checked, 'class2' : !checked }"></div>
CSS:
.panel{
position: fixed;
background:orange;
width:100px;
height:30px;
top: 10px;
}
.class1{
left: 80px;
}
.class2{
left: 240px;
}
.class1.ng-show-add-active, .class1.ng-show-remove-active {
transition: all ease-in-out 2s;
}
.class2.ng-show-add-active, .class2.ng-show-remove-active {
transition: all ease-in-out 2s;
}
Javascript:
var app = angular.module("app", ['ngAnimate']);
app.controller('ctl', function($scope) {
$scope.checked = true;
});
This is the answer: you need to use -add and -remove after the class name.
PLUNK
Heyo, I am trying to make a div containing a google chart slide up and down when clicked. I can get the actual divs containing the chart to animate, but the chart itself won't respond. I have a suspicion it is because there is so much html that gets injected by the google charts object, but I'm not sure how to fix it. Apologies ahead of time if the question is poorly formatted, this is my first foray into Stack Overflow. Here is what my code looks like, the Google chart is getting injected into the elevation-chart div:
HTML:
<div class="leftContent" ng-controller="ElevationProfileController as Elevation" >
<div class="chart-slide" ng-click="Elevation.slide()" ng-show="Elevation.show">
<div id="elevation-chart" ng-show="Elevation.show" ></div>
</div>
JS:
angular.module('appName').controller('ElevationProfileController', function(){
this.show = true;
this.slide = function(){
this.show = !this.show;
}
})
CSS:
.chart-slide.ng-hide-add,
.chart-slide.ng-hide-remove {
display:block!important;
}
.chart-slide.ng-hide-remove.ng-hide-remove-active {
-webkit-animation:0.5s slide-up;
animation:0.5s slide-up;
transition: .3s linear all;
height: 15%;
}
.chart-slide.ng-hide-add.ng-hide-add-active {
-webkit-animation:0.5s slide-down;
animation:0.5s slide-down;
transition: .3s linear all;
height: 5%;
}
.chart-slide{
height: 15%;
width: 100%;
border: 5px solid black;
}
.chart-slide.ng-hide {
height:5%;
display:block!important;
}
#elevation-chart {
width: 90%;
height: 100%;
border: 2px solid orange;
}
#elevation-chart.ng-hide-add,
#elevation-chart.ng-hide-remove {
display:block!important;
}
#elevation-chart.ng-hide-remove.ng-hide-remove-active {
-webkit-animation:0.5s slide-up;
animation:0.5s slide-up;
transition: .3s linear all;
height: 100%;
}
#elevation-chart.ng-hide-add.ng-hide-add-active {
-webkit-animation:0.5s slide-down;
animation:0.5s slide-down;
transition: .3s linear all;
height: 0%;
}
I am not sure how this behaves in this case, but i am sure that you need use $scope.
You have to inject a scope in controller and you will can manage your view.
angular.module('appName').controller('ElevationProfileController', function($scope){
$scope.show = true;
$scope.slide = function(){
$scope.show = false;
}
})
Check the documentation here
I'm fairly new to angular and I'm having a hard time wrapping my head around where the items are being pushed to. I am not sure if I am correctly setting up the functions to be used with drag/drop and if its getting bound to an older scope object and the ng-repeat isn't being updated properly. I'm thinking there is some slight issue with the way I have this setup. Any pointers or help would be much appreciated.
What should happen is when you drag a color from the Draggable container into the Droppable container it should update the text which is linked to the scope object items. I am successfully pushing an item onto the scope object but ng-repeat isn't picking it up. I am not sure if I need a watch or what to do to get it to pay attention to the newly added items.
JS Fiddle Here: http://jsfiddle.net/RV23R/
HTML CODE:
<div ng-app="my-app" ng-controller="MainController">
<div class="container">
<header><h1>Draggables</h1></header>
<section>
<div draggable="true" ng-repeat="drag_type in drag_types">{{drag_type.name}}</div>
</section>
</div>
<div class="container">
<header><h1>Drop Schtuff Here</h1></header>
<section droppable="true">
<div><span>You dragged in: </span><span ng-repeat="items in items">{{item.name}},</span></div>
</section>
</div>
ANGULAR CODE:
var module = angular.module('my-app', []);
module.directive('draggable', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element[0].addEventListener('dragstart', scope.handleDragStart, false);
element[0].addEventListener('dragend', scope.handleDragEnd, false);
}
}
});
module.directive('droppable', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element[0].addEventListener('drop', scope.handleDrop, false);
element[0].addEventListener('dragover', scope.handleDragOver, false);
}
}
});
function MainController($scope)
{
$scope.drag_types = [
{name: "Blue"},
{name: "Red"},
{name: "Green"},
];
$scope.items = [];
$scope.handleDragStart = function(e){
this.style.opacity = '0.4';
e.dataTransfer.setData('text/plain', this.innerHTML);
};
$scope.handleDragEnd = function(e){
this.style.opacity = '1.0';
};
$scope.handleDrop = function(e){
e.preventDefault();
e.stopPropagation();
var dataText = e.dataTransfer.getData('text/plain');
$scope.items.push(dataText);
console.log($scope.items);
};
$scope.handleDragOver = function (e) {
e.preventDefault(); // Necessary. Allows us to drop.
e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
return false;
};
}
CSS (if anyone cares)
.container {
width: 600px;
border: 1px solid #CCC;
box-shadow: 0 1px 5px #CCC;
border-radius: 5px;
font-family: verdana;
margin: 25px auto;
}
.container header {
background: #f1f1f1;
background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
box-shadow: 0 1px 2px #888;
padding: 10px;
}
.container h1 {
padding: 0;
margin: 0;
font-size: 16px;
font-weight: normal;
text-shadow: 0 1px 2px white;
color: #888;
text-align: center;
}
.container section {
padding: 10px 30px;
font-size: 12px;
line-height: 175%;
color: #333;
}
There are a couple of typos in the fiddle, but the basic problem is that your drag events are outside an angular digest cycle. You should wrap your changes in $scope.$apply (code sample coming). This forked and bugfixed (FIDDLE) shows that when you click the button, angular shows the changes and refreshes the display with new values.
Fix: (FIDDLE)
$scope.$apply(function() {
$scope.items.push(dataText);
});
A bug you had is in this code:
<span ng-repeat="items in items">{{item.name}},</span>
This should probably be ng-repeat="item in items", also items only contains the dropped text so it is an array of strings and not the original item objects.