Angular/Javascript - ng-repeatのデータをリロードした後にクラスを変更します

Question

私はcordovaでangularJsを使用しています。

私は各項目にng-repeatを持っています。これは、各項目の値を配列に入れるng-clickを持っています。さらに、クリックすると、divに新しいクラスを追加して追加します（ng-repeatの$ indexを使用）。チェックリストのように。

実際に、ng-repeatをリロードしたとき、クリックしたときに追加したクラスが失われました。 ng-repeatで示された項目をリロードする関数を呼び出すと、（変更されていない配列で）クラスを再追加しようとしました。しかし、それはクラスを追加しません：/

ここに私のコードされています

<div id="ami" class="list-group"> 
      <div href="#" class="list-group-item" ng-repeat="ami in listeAmis"> {{ami.pseudo}}<i id="checkAmi{{$index}}" class="fa fa-circle-o pull-right" ng-click="mapCtrl.checkAmi(ami.pseudo, $index);"></i><i class="fa fa-user pull-left" ></i></div> 
</div> 

Javascriptを

は

var amisNotifies = []; 

       mapCtrl.checkAmi = checkAmi; 
       function checkAmi(pseudo, id) { 
        var info = ({ 
         pseudo: pseudo, 
         id: id 
        }); 
        var getIndexOf = function (psdu) { 
         for (var i = 0; i < amisNotifies.length; i++) { 
          if (amisNotifies[i].pseudo === psdu) { 
           return i; 
          } 
         } 

         return -1; 
        }; 

        if (amisNotifies.length > 0) { 
         var index = getIndexOf(pseudo); 
         if (index > -1) { 
          //so already exists. now remove it. 
          Array.prototype.splice.call(amisNotifies, index, 1); 
          $("#checkAmi" + id).addClass("fa-circle-o"); 
          $("#checkAmi" + id).removeClass("fa-check-circle-o"); 
         } 
         else { 
          //does not exist, now add it 
          amisNotifies.push(info); 
          $("#checkAmi" + id).removeClass("fa-circle-o"); 
          $("#checkAmi" + id).addClass("fa-check-circle-o"); 
         } 

        } else { 
         amisNotifies.push(info); 
         $("#checkAmi" + id).removeClass("fa-circle-o"); 
         $("#checkAmi" + id).addClass("fa-check-circle-o"); 
        } 
        console.log(amisNotifies); 
       } 

だから、私は私が試したNG-繰り返しによって示されたデータを再ロードするときそれを入れてもクラスを変更することはありません...

if (amisNotifies.length > 0) { 
      for (var i = 0; i < amisNotifies.length; i++) { 
      console.log(amisNotifies[i].id); 
      $("#checkAmi" + amisNotifies[i].id).removeClass("fa-circle-o"); 
      $("#checkAmi" + amisNotifies[i].id).addClass("fa-check-circle-o"); 
      } 
} 

Answer 1

インデックスに沿って配列されたダイナミックなngクラスのHTML ：

<div id="ami" class="list-group"> 
     <div href="#" class="list-group-item" ng-repeat="ami in listeAmis"> {{ami.pseudo}} 
       <i id="checkAmi{{$index}}" ng-class="isChecked[{{$index}}]" ng-click="mapCtrl.checkAmi(ami.pseudo, $index);"></i> 
     </div> 
</div> 

はNGリピートのサイズに依存変数の数を宣言します。

if ($scope.listeAmis.length > 0) { 
     for (var j = 0; j < $scope.listeAmis.length; j++) { 
       $scope.isChecked[j] = "fa fa-circle-o pull-right"; 
     } 
} 

は（あなただけクリックした行を確認して、NG-クラスを変更、さらに私は行のインデックスをストック$ scope.isChecked [j]をクリックしたときと違って宣言するためにちょうどクリックされました...

mapCtrl.checkAmi = checkAmi; 
       function checkAmi(pseudo, id) { 
        var info = ({ 
         pseudo: pseudo, 
         id: id 
        }); 
        var getIndexOf = function (psdu) { 
         for (var i = 0; i < amisNotifies.length; i++) { 
          if (amisNotifies[i].pseudo === psdu) { 
           return i; 
          } 
         } 

         return -1; 
        }; 

        if (amisNotifies.length > 0) { 
         var index = getIndexOf(pseudo); 
         if (index > -1) { 
          //so already exists. now remove it. 
          Array.prototype.splice.call(amisNotifies, index, 1); 
          $scope.isChecked[id] = "fa fa-circle-o pull-right"; 
         } else { 
          //does not exist, now add it 
          amisNotifies.push(info); 
          $scope.isChecked[id] = "fa fa-check-circle-o pull-right"; 
         } 

        } else { 
         amisNotifies.push(info); 
         $scope.isChecked[id] = "fa fa-check-circle-o pull-right"; 
        } 
        console.log(amisNotifies); 
       }