我正在创建使用 REST 和 angular.js 的简单前端 Web 应用程序。我有 Angular Controller 提供的五个元素的集合，以及根据消息重新加载集合的 WebSocket。
我的 Controller .js
var myApp = angular.module('myApp', []);
var protocol = 'some protocol';
var address = 'some address';
var callsAddress = 'some other address';
var socket = new WebSocket(address, protocol);
myApp.controller('MyController', function($scope, $http) {
$scope.init = function() {
$scope.loadData();
socket.open();
console.log('initialized');
}
socket.onmessage = function (event) {
$scope.loadData();
};
$scope.loadData = function() {
$http.get(callsAddress).success(function(data) {
$scope.calls = data;
});
};
$scope.init();
});
这是 index.html:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="jquery.2.2.3.min.js"></script>
<script src="angular.min.js"></script>
<script src="mycontroller.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body ng-controller="MyController">
<div class="text-center bg-primary" ng-repeat="call in calls">
<h1>{{call.number}}</h1>
</div>
</body>
</html>
每次更改集合中的数据时(即加载数据时)，我想为集合的第一个元素设置动画，例如逐渐将 div 元素的背景颜色从红色变为蓝色。我怎样才能实现这种行为？
我尝试用 ng-if 做一些事情，但我唯一能做到的就是从集合中删除第一个元素，所以我不确定 ng-if 是否就是我要找的东西。
最佳答案
有两个问题。让我们将它们分开以阐明解决方案:
- 仅更改 ng-repeat 中第一个元素的样式
- 改变风格(即动画)
广告 1:AngularJS - Conditionally apply style using ng-style to first element in ng-repeat
广告 2:参见 https://plnkr.co/edit/mZI9Iv6ZR4Wvg8cHEst1 .您可以在此处添加 changeColor():
$scope.loadData = function() {
$http.get(callsAddress).success(function(data) {
$scope.calls = data;
changeColor();
});
};
只需组合 1 和 2。
关于javascript - 在数据变化时使用 Angular 动画集合的第一个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37318495/