ng-style 的坑 - 对性能的影响

本文地址：http://www.cnblogs.com/jying/p/5633203.html

熟悉 angular 的前端对ng-style 一定不陌生，这个家伙可以绑定一个函数，使得我们可以在函数中根据不同的参数返回不同的样式，如下是一个简单的实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body onselectstart='return false'>
    <div ng-app="myApp" ng-controller="myCtrl" style="overflow-wrap:break-word;">
        <span ng-repeat="idx in data" ng-style="setStyle(idx)">
            {{idx+','}}
        </span>
    </div>

    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.data = [];
            for(var i=1;i<=10000;i++){
                $scope.data.push(i);
            }

            $scope.setStyle = function(idx){
                switch(idx%4){
                    case 1:return {"color":"red"};
                    case 2: return {"color":"chartreuse"};
                    case 3:return {"color":"yellow"};
                    case 0:return {"color":"blue"};
                    default : return {};
                }
            }

        });
    </script>
</body>
</html>

ng-style 绑定文字颜色