Javascript 基于从控制器返回的值的Ng类

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

控制器代码

$scope.class=“收藏的边框”；
$scope.changeClass=函数（）{
如果（$scope.class==“最喜爱的边框”）
$scope.class=“收藏夹”；
其他的
$scope.class=“最喜爱的边框”；
log（$scope.class）；
}

查看代码

{{class}

CSS样式

.favorite_border{color:gray}；。最喜欢的{颜色：红色}；

只需将其更改为

ng-class="class == 'favorite_border' ? 'favorite_border' : 'favorite'"

甚至

ng-class="class"

只需记住使用所需的适当初始类初始化

$scope.class='…'

考试：

ng类

中的表达式将作为JS中或多或少的表达式进行计算-变量前缀为

$scope

。因此，如果我们看看你的表情：

'{{class}}'== favorite_border ? 'favorite_border' : 'favorite'

它将被解释为：

'{{$scope.class}}'== $scope.favorite_border ? 'favorite_border' : 'favorite'

这反过来将被推断为：

''== $scope.favorite_border ? 'favorite_border' : 'favorite'

最初，直到切换该类，然后

'favorite_border'== $scope.favorite_border ? 'favorite_border' : 'favorite'

---

它们在上下文中都没有意义（第一个和第二个将是false？'favorite_border'：'favorite'=>

'favorite'

），并且不会计算为预期的类名。

如下设置视图：

<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>

{{class}

或基于上述控制器代码：

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

{{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>

{{class}}
var-app=angular.module（'app'，[]）；
应用程序控制器（“ctrl”，函数（$scope）{
$scope.class=“最喜爱的边框”；
$scope.changeClass=函数（）{
如果（$scope.class==“最喜爱的边框”）
$scope.class=“收藏夹”；
其他的
$scope.class=“最喜爱的边框”；
log（$scope.class）；
}
});

问题解决了，但这又给我带来了另一个挑战，标签实际上在一个基本上在里面的图标中，当我单击一个图标时，视图中的所有图标都被触发和更改，我如何解决它。再次感谢大家。您可能需要生成一个#名称并使用动态生成的名称orry应用该类，如果可能的话，你能解释更多吗？我想我需要在第一次加载ng repeat时给每个人一个id，然后单击时我必须传递这个id。我成功地将标记更改为

{{class}

，在控制器中我收到了索引并将其返回到视图，我现在唯一的问题是，我无法保持以前点击过的图标状态，这些图标失去了它们的类别，@st2rseker，@samarrizvi