I have a collection of items that I utilize to construct an unordered list using ng-repeat. When a new item is added, I want it to stand out by blinking or having some kind of effect to grab the user's attention. While it would be easy with jQuery, I am determined to achieve this using AngularJS alone.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div ng-controller="MainCtrl">
<input type="text" ng-model="formData.itemText" />
<button ng-click="addItem()">Add</button>
<ul>
<li ng-repeat="item in items">{{item.itemText}}</li>
</ul>
</div>
</body>
</html>
script.js
app = angular.module("app", ["ngAnimate"])
app.controller("MainCtrl", function($scope){
$scope.items = []
$scope.formData = {}
$scope.addItem = function(){
$scope.items.push($scope.formData)
$scope.formData = {}
}
})
plnkr