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

1 === collectionStatusは と等しくないため、単に ortrue === collectionStatusを使用する必要があります1 == collectionStatuscollectionStatus

$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 に答える
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>

デモ:プランカー

ng クラスの使用

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

デモ:プランカー

于 2015-03-26T03:19:38.203 に答える