I am facing an issue with ngAnimate dependency injection. For some reason, whenever I add ngAnimate as a dependency in my JavaScript code, it does not seem to work. It's definitely not the script...
Here is the HTML code snippet:
<!doctype html>
<html ng-app="myApp">
<head>
<script src=" https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="codebuttonewb.js"></script>
<style>
.hidden{
display:none;
}
ul{
//display:flex;
margin-bottom:10px;
list-style-type: none;
}
li span{
display:inline-block;
line-height:50px;
}
li img{
margin-right:10px;
border-radius:50%;
width:50px;
height:50px;
}
</style>
</head>
<body ng-controller="myController">
<input type="text" ng-model="search" placeholder="search">
<ul ng-class="{'hidden' : !toggle}"><!-- if this value is false then show the class of hidden -->
<li ng-repeat="item in list | filter:search"
ng-class="item.age>29 ? 'over-thirty' : 'under-thirty'">
<img ng-src="{{item.img}}"/>
<span> {{item.name}} - <em>{{item.age}}</em></span>
</li>
</ul>
<button ng-show="!toggle" ng-click="toggle=true" >show names</button>
<button ng-show="toggle" ng-click="toggle=false">hide names</button>
<form ng-submit="addPerson()">
<input type="text" placeholder="name" ng-model="name"/>
<br/>
<input type="number" placeholder="age" ng-model="age"/>
<br/>
<input type="submit" value="submit" />
</form>
</body>
</html>
And here is the corresponding JavaScript code:
angular.module('myApp', ['ngAnimate'])
.controller("myController",function($scope){
$scope.toggle =true;
$scope.list=[
{name:'bla',age:28,img: 'https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg'},
{name:'blabla',age:38,img: 'https://s3.amazonaws.com/uifaces/faces/twitter/mlane/128.jpg'},
{name:'blaba',age:23, img:'https://s3.amazonaws.com/uifaces/faces/twitter/felipenogs/128.jpg'},
{name:'blablala',age:56, img:'https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg'}
];
$scope.addPerson= function(){
$scope.list.push({name:$scope.name,age:$scope.age});
$scope.name="";
$scope.age="";
};
});
If anyone has a solution for this problem, I would greatly appreciate it. This is my first time working with ngAnimate, so I assume it might be something simple that I'm missing.