如何修改 ng-repeat 模块中的 class 属性？

Question

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

<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 选择器时，所有 classes 都被更改，而不是我要修改的那个。请帮助我。

Answer 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

Answer 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"
}};

如何修改 ng-repeat 模块中的 class 属性？

How to modify the class attribute in ng-repeat module?

javascript

angularjs

ng-switch

ng-repeat