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

Animating first element of collection with angular on data change

本文关键字：集合 设置 第一个 动画 元素 数据      更新时间：2023-09-26

我正在创建一个简单的前端web应用程序，该应用程序使用angular.js消耗REST。我有angular控制器提供的五个元素的集合，以及在消息上重新加载集合的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是我想要的。

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

  1. 仅将样式更改为ng repeat中的第一个元素
  2. 更改时更改样式（即动画）

广告1:AngularJS-有条件地将使用ng样式的样式应用于ng重复中的第一个元素

广告2：请参阅https://plnkr.co/edit/mZI9Iv6ZR4Wvg8cHEst1.您可以在此处添加changeColor（）：

    $scope.loadData = function() {
    $http.get(callsAddress).success(function(data) {
        $scope.calls = data;
        changeColor();
    });
};

只需组合1&2.

相关文章：