如何修改 ng-repeat 模块中的类属性？答案

【问题标题】：How to modify the class attribute in ng-repeat module?如何修改 ng-repeat 模块中的类属性？
【发布时间】：2015-03-26 03:13:58
【问题描述】：

这是我的笨蛋。enter link description here 我是 AngularJS 的新手，我想修改星星的类样式以显示它是否被标记。

<div class="col-sm-6 col-md-4 col-lg-4 cell-project" ng-repeat="project in projects">
              <div class="panel panel-primary panel-project">
                  <div class="panel-heading" ng-switch="project.PermissionStatus">
                      <span ng-bind="project.ProjectName"></span>
                      <i class="fa fa-gear i-setup" ng-switch-when="1"></i>
                      <div ng-switch-when="0" ng-switch="project.CollectionStatus">
                          <i class="fa fa-star i-setup" ng-switch-when="1" ng-click="updateCol(0)"></i>
                          <i class="fa fa-star-o i-setup" ng-switch-when="0" ng-click="updateCol(1)"></i>
                      </div>
                  </div>
              </div>
            </div>

这里是 updateCol 函数：

$scope.updateCol = function(collectionStatus){
if (1 === collectionStatus) {
    console.log("marked");
    //$(this).removeClass("fa fa-star-o i-setup ng-scope");
    //$(this).addClass("fa fa-star i-setup ng-scope");
    //do something to change its class from "fa-star-o" to "fa-star"
 }
else if (0 === collectionStatus) {
    console.log("unmarked");
    //do something to change its class from "fa-star" to "fa-star-o"
}};

如何解决这个问题？当我使用 id 选择器时，所有类都被更改，而不是我要修改的类。请帮帮我。

【问题讨论】：

标签： javascript angularjs ng-repeat ng-switch

【解决方案1】：

在点击处理程序中只更新CollectionStatus的值

<i class="fa fa-star i-setup" ng-switch-when="1" ng-click="project.CollectionStatus = 0"></i>
<i class="fa fa-star-o i-setup" ng-switch-when="0" ng-click="project.CollectionStatus = 1"></i>

演示：Plunker

使用 ng-class

<div class="panel-heading" ng-switch="project.PermissionStatus">
    <span ng-bind="project.ProjectName"></span>
    <i class="fa fa-gear i-setup" ng-switch-when="1"></i>
    <i class="fa i-setup" ng-class="{'fa-star': project.CollectionStatus == 1,  'fa-star-o': project.CollectionStatus == 0 }" ng-click="updateStatus(project)"></i>
</div>

然后

  $scope.updateStatus = function(project){
    project.CollectionStatus = project.CollectionStatus == 0 ? 1 : 0;
    //do your ajax here
    if (1 === project.CollectionStatus) {
        console.log("marked");
        //$(this).removeClass("fa fa-star-o i-setup ng-scope");
        //$(this).addClass("fa fa-star i-setup ng-scope");
        //do something to change its class from "fa-star-o" to "fa-star"
     }
    else if (0 === project.CollectionStatus) {
        console.log("unmarked");
        //do something to change its class from "fa-star" to "fa-star-o"
    }
  };

演示：Plunker

【讨论】：

非常感谢！当点击这个时，我还想发送一个ajax告诉服务器CollectingStatus发生了变化以及它的类发生了变化，所以我在这里添加了一个函数。你能告诉我如何在函数中解决这个问题吗？
与我希望的结果略有不同：当 PermissionStatus = 1 时，我只想要 fa-gear 类；当 Permission Status = 0 时，显示 fa-star 类。这就是我使用第二个 ng-switch 的原因。

【解决方案2】：

1 === collectionStatus不等于true === collectionStatus，所以你应该使用1 == collectionStatus或者干脆collectionStatus

$scope.updateCol = function(collectionStatus){
if (collectionStatus) {
    console.log("marked");
    //$(this).removeClass("fa fa-star-o i-setup ng-scope");
    //$(this).addClass("fa fa-star i-setup ng-scope");
    //do something to change its class from "fa-star-o" to "fa-star"
 }
else{
    console.log("unmarked");
    //do something to change its class from "fa-star" to "fa-star-o"
}};

【讨论】：