每次加载控制器时生成相同的随机数

Question

我有 Icon 和一个 scope.id ，我每次都使用 Icon 分配不同的颜色代码。 假设

angular.module('myAppp').controller('myCtrl',function(){
    scope.id=[0,1,2,3];
    //generate random number
    $scope.Icon=[];
    for(i=0;i<scope.id.length;i++) {
        var ran= Math.floor( Math.random()*255)+$scope.id[i];
        $scope.Icon.push(ran);
    }   
});

HTML

<div ng-repeat='id in id'>
    <span style="background-color:rgb({{$scope.Icon[$index]}},255,255)">{{id}}</span>
</div>

所以我希望当我再次重新加载页面时，它应该再次获得相同的颜色，但现在由于 Math.random() 而返回不同的颜色

请给我建议或指导，因为我是新手。

Answer 1

您可以使用cookies 来存储当前值。

每次加载页面检查是否有以前存储的 cookie，如果没有，则分配一个随机值并将其存储在 新 cookie 中。 p>

每次改变颜色，都必须给cookie赋值，所以每次用户加载或重新加载页面时，如果已经有值，就将颜色设置为cookie中的那个。

这是一个关于如何在 angularjs 中使用 cookie 的示例：
http://www.tutorialsavvy.com/2014/11/angularjs-cookie-example.html/

Answer 2

实现选择随机数生成算法的初始种子；用户不能选择或重置它

来自JavaScript reference。

使用预先生成的数字数组。

Answer 3

这是页面加载时动态颜色变化的示例：http://fiddle.jshell.net/xopddsxp/

HTML：

<div ng-app="myAppp" ng-controller="myCtrl">
    <div ng-repeat='id in id'>
        <span style="background-color:rgb({{Icon[$index]}},{{Icon[$index +1]}},{{Icon[$index + 2]}})">{{id}}</span>
    </div>
</div>

JS：

var app = angular.module("myAppp", []).controller('myCtrl',function($scope, $http){
     $scope.id = [0,1,2,3]; //generate random number
     $scope.Icon=[];
     for(i=0; i < $scope.id.length; i++){  
       var ran= Math.floor( Math.random()*255)+$scope.id[i];
       $scope.Icon.push(ran);
     }  
});