我有一个ngAnimate依赖注入问题。我不知道为什么,但每当我有ngAnimate我的js代码里面依赖它不工作... 这不是剧本......我似乎无法运行ngAnimate?
我有这样的HTML代码:
<!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>
和这个js代码:
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="";
};
});
任何解决办法将是更受欢迎。这是我第一次使用ngAnimate,所以我猜这可能是愚蠢的。
我不在这里看到任何问题http://plnkr.co/edit/c0JhEjQUro41eiaOP2Nu?p=preview ..你能不能在这里重现它 –