0

这是我的笨蛋。在此处输入链接描述 我是 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 选择器时，所有类都被更改，而不是我要修改的类。请帮我。

4

2 回答 2

0

在点击处理程序中只需更新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

于 2015-03-26T03:19:38.203 回答
0

1 === collectionStatus不等于true === collectionStatus，所以你应该使用1 == collectionStatusor 简单地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"
}};
于 2015-03-26T03:20:48.120 回答