Menu
I am using ng-repeat with some style and I am going to add new items to the array. This is what I did:
// Code goes here
var _app = angular.module("userApp", [])
_app.controller("usrController", function($scope) {
$scope.usrList = [];
$scope.adduser = function() {
console.log($scope.newUsr)
$scope.usrList.push({
name: $scope.newUsr
})
}
})/* Styles go here */
.listItem {
border: 1px solid #F00;
background-color: lightgray;
padding: 3px;
border-radius: 5px;
margin: 2px;
width: 100px;
}<!DOCTYPE html>
<html ng-app="userApp">
<head>
<script data-require="[email protected]" data-semver="1.4.0-rc.2" src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="usrController">
<input ng-model="newUsr">
<button ng-click="adduser()">Adduser</button>
<ul>
<li class="listItem" ng-repeat="usr in usrList">{{usr.name}}</li>
</ul>
</div>
</body>
</html>And I am going to add stackoverflow effect for new elements added. When I add new element, it should fade or any other animation effect like background-color change.
How can I do this?
I do this with css3 only?
Is there any way to add same effect if the already rendered element is changed?
242
$first and $last It's common when using ng-repeat to add specific behavior to the first or last element of the loop, e.g. special styling around the edges. Instead, ng-repeat already supplies you with two ready boolean properties. $first is true for the first element, and $last is true for the last element.
You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.
Definition and Usage The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
You need to use use ngAnimate module and set up classes for ngRepeat.
First, include the module in the project (remember to include corresponding script tag also):
angular.module("userApp", ['ngAnimate'])
Then define desired transitions/animations. For example:
.listItem.ng-enter {
opacity: 0;
transition: all .5s ease;
}
.listItem.ng-enter-active {
opacity: 1;
}
Demo: http://plnkr.co/edit/2QuyxMt4kiYkKeCoMGCL?p=preview
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
