javascript - 基于 Controller 返回值的 Ng 类

Question

我尝试根据从 Controller 返回的值设置图标样式，控制台日志显示正确触发的值，但似乎我对 Ng 类表达式有疑问。非常感谢对此的任何帮助。提前致谢 。

Controller 代码

$scope.class = "favorite_border";
    $scope.changeClass = function(){
    if ($scope.class === "favorite_border")
        $scope.class = "favorite";
     else
        $scope.class = "favorite_border";
      console.log($scope.class);
    }

查看代码

<i ion-ripple ion-ripple-color="#ff0000"class="material-icons" style="font-size: 32px" ng-click="changeClass()" ng-class="'{{class}}'== favorite_border ? 'favorite_border' : 'favorite'"> {{class}}</i>

CSS 样式

.favorite_border{ color:gray};.favorite{color:red};

Answer 1

像这样设置你的 View :

<i ion-ripple ion-ripple-color="#ff0000"class="material-icons" style="font-size: 32px" ng-click="changeClass()" ng-class="class === 'favorite_border' ? 'favorite_border' : 'favorite'"> {{class}}</i>

或基于您上面的 Controller 代码:

<i ion-ripple ion-ripple-color="#ff0000"class="material-icons" style="font-size: 32px" ng-click="changeClass()" ng-class="class"> {{class}}</i>