Question

我有这段代码：

控制器：

var ratingTotal = 5;
$scope.count = 0;
$scope.getRepeater = function() {
       return new Array(ratingTotal);
};

HTML：

<div>
    <span ng-repeat="r in getRepeater() track by $index" ng-mouseover="count = count + 1" ng-mouseleave="count =count-1" ng-class="{'icon-star-full': ($index + 1) <= count, 'icon-star-empty': ($index + 1) >= count}"></span>
</div>

我试图通过将鼠标移到图标上来显示图标开始 - 并且在离开div时消失但是它没有工作

PD：class icon-start-full和icon-start-empty是icomoon类

Answer 1

很明显，通过使用此代码几分钟，count，ng-mouseover和ng-mouseleave中引用的ng-class变量不是同一个变量。 Angular有时会使用像这样的变量作用域来做一些时髦的事情，所以这是为什么你应该总是在AngularJS中使用controller as语法的一个完美的例子。有关如何以及为何使用它的文档Here, by Todd Motto已有详细记录。

以下是如何修改代码以使其与controller as一起使用，这样您就不会遇到正在遇到的范围问题。

＆＃13;

var app = angular.module("myApp", [])
.controller("myCtrl", function (){
  var $this = this;
  var ratingTotal = 5;
  $this.count = 0;
  $this.getRepeater = function() {
    return new Array(ratingTotal);
  };
});

＆＃13;

.icon-star-full, .icon-star-empty {
  padding: 10px;
}
.icon-star-full {
  background: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as Main">
  <div>
    <span ng-repeat="r in Main.getRepeater() track by $index" ng-mouseover="Main.count = $index + 1" ng-mouseleave="Main.count = 0" ng-class="{'icon-star-full': ($index + 1) <= Main.count, 'icon-star-empty': ($index + 1) >= Main.count}">{{$index + 1}}</span>
  </div>
</div>

＆＃13;

尝试使用ng-mouseover和ng-mouseleave更改ng-class

1 个答案: