javascript - AngularJS 中的动画(改变颜色)

Question

我使用 CSS 创建了某种 list 。我想，如果我点击一个圆圈，它会改变颜色。

到目前为止我做了什么:

HTML

<div class="steps">
    <i class="my-icon">
      <i class="circle1" ng-click="style={'background-color':'blue'}">1</i>
      <i class="circle2" nng-click="style={'background-color':'blue'}">2</i>
      <i class="circle3" ng-click="style={'background-color':'blue'}">3</i>
      <i class="circle4" ng-click="style={'background-color':'blue'}">4</i>
      <i class="circle5" ng-click="style={'background-color':'blue'}">7</i>
      <i class="circle6" ng-click="style={'background-color':'blue'}">6</i>
      <i class="circle7" ng-click="style={'background-color':'blue'}">5</i>
    </i>
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
    <div class="line4"></div>
    <div class="line5"></div>
    <div class="line6"></div>
    <div class="arc"> </div>
    </div>

CSS

.my-icon {
position: relative;
text-align: center;
}
.my-icon > i {
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 0.15789473684210525em solid #259B24;
    border-radius: 25em;
    left: 50px;
    top: 30px;
}
.my-icon > i+i {
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 0.15789473684210525em solid #259B24;
    border-radius: 25em;
    left: 150px;
    top: 30px;
}

...

在 Controller 方面，我做的不多。我也想在离开应用程序后保存更改，但我不知道从哪里开始。

JS

.controller('rencontreController', function ($scope){

    });

任何帮助将不胜感激。谢谢。

Answer 1

你可以像下面那样做
使用 ngClass 动态设置类。
使用 https://github.com/grevory/angular-local-storage坚持你的对象。

在你的 HTML 中

<i class="circle1" ng-click="storedObj.one=true;save()" ng-class="{greenColor:storedObj.one}" >1</i>
<i class="circle2" ng-click="storedObj.two=true;save()" ng-class="{greenColor:storedObj.two}" >1</i>

在你的 JS 中

angular.module('myApp', ['LocalStorageModule']);

在你的 Controller 中你可以做这样的事情

.controller('rencontreController', function ($scope,localStorageService){

if(localStorageService.get("storedObj").length>0){
 // If the local/session storage already has the object.
    $scope.storedObj=localStorageService.get("storedObj");          
}
else{    
// Initially, store the object in local/session Storage. 
  var obj = { 
             "one":false,
             "two":false
             //and many more
            }

  localStorageService.set("storedObj",obj);
  $scope.storedObj=localStorageService.get("storedObj");
}

$scope.save=function(){

    localStorageService.set("storedObj",$scope.storedObj); // This will make the selections persists even when the application closes

}
});

在你的CSS中

.greenColor{
  background:green; // Or anything that you want to make your circle appear green
}