Question

我正在使用angular.js创建使用REST的简单前端Web应用程序。我有角度控制器提供的五个元素的集合，以及在消息上重新加载集合的WebSocket。

mycontroller.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是我正在寻找的。

Answer 1

有两个问题。让我们将它们分开以澄清解决方案：

仅将样式更改为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＆amp; 2。

使用角度对数据更改动画集合的第一个元素

1 个答案: