ngのクラスは、私は、ユーザーが画像にタグを追加/削除できるようにする必要があるプロジェクトに取り組んでいます値の変更

Question

に正しく更新されません。

グリッドビュー、単一のビューおよび混合ビューがあります。 グリッドビューで画像のサムをグリッドに表示 シングルビューでは、画像が1つずつ表示されます。 と混在したビューには、グリッドがバックグラウンドで表示され、1つの画像が前面に表示されます（ズームイン機能）。

これらのビューには、画像に適用できるタグが含まれているフッターがあります。ただし、グリッドには独自のフッターがあり、単一のビューと複数のビューはそれらを共有します。ここで

は、それらのためのHTML側のコードです：

<section id="noRefContainer" class="photosWrapper photosWrapper-cq" style="display: block"> <!--ng-controller="gridController">--> 
     <div class="images-cq__wrapper" ng-show="displayStyle.style == 'grid' || displayStyle.style == 'both'"> 
      <div class="images-cq__item" ng-repeat="photo in displayedPhotos"> 
       <div ng-class="{active: photo.selected}"> 
        <label for="{{photo.uuid}}"> 
         <div class="img-cq"> 
          <img ng-src="{{photo.thumbPath100}}" alt="Alternate Text" ng-click="selectionEvent({value: photo.uuid, event: $event, index: $index})" /> 
          <a href="#" class="zoom-cq" title="zoom" ng-click="zoomOpen({value: $index})">zoom</a> 
         </div> 
         <p> 
          {{photo.title}} 
         </p> 
        </label> 
       </div> 
      </div> 
      <div class="images-cq__footer open"> 
       <p> 
        <span>Tagger les</span> 
        <strong>{{selectedPhotos.length}}</strong> 
        <span>éléments sélectionnés</span> 
       </p> 
       <div class="images-cq__dropdown top"> 
        <a href="#">...</a> 
        <ul> 
         <li><a href="#" ng-click="selectAll()">Sélectionner toutes les images</a></li> 
         <li><a href="#" ng-click="deselectAll()">Désélectionner toutes les images</a></li> 
        </ul> 
       </div> 
       <div class="images-cq__tags"> 
        <ul> 
         <li ng-repeat="tag in tags"> 
          <a href="#" ng-class="{'active': tag.status == 'active', 'selected': tag.status == 'selected'}" ng-click="tagSelectionEvent({value : tag.value})">{{tag.name}}</a> 
         </li> 
        </ul> 
       </div> 
       <small>Attention, ceci effacera les précédents tags.</small> 
      </div> 
     </div> 
     <div ng-class="{'images-cq__lightbox': displayStyle.style == 'both', 'images-cq__wrapper': displayStyle.style == 'single', single: displayStyle.style == 'single'}" ng-show="displayStyle.style == 'both' || displayStyle.style == 'single'"> 
      <div class="images-cq__carousel"> 
       <a href="" class="images-cq__carouselclose" ng-click="zoomClose()" ng-show="displayStyle.style == 'both'"> 
        Close 
       </a> 
       <div class="images-cq__carouselcontent" id="carousel"> 
       </div> 
       <div class="images-cq__carouselfooter"> 
        <div class="images-cq__tags"> 
         <ul> 
          <li ng-repeat="tag in tags"> 
           <a href="#" ng-class="{'active': tag.status == 'active', 'selected': tag.status == 'selected'}" ng-click="zoomTagSelectionEvent({value : tag.value})">{{tag.name}}</a> 
          </li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 

そしてapp.js側コード：

$scope.tags = []; 

$scope.tags = [{ name: 'CQ:OK', count: 0, status: '', value: 'CQ:OK' }, 
     { name: 'CQ:OK_NO_ZOOM', count: 0, status: '', value: 'CQ:OK_NO_ZOOM' }, 
     { name: 'CQ:KO', count: 0, status: '', value: 'CQ:KO' }, 
     { name: 'Chromie', count: 0, status: '', value: 'Chromie' }, 
     { name: 'Détourer', count: 0, status: '', value: 'Détourer' }, 
     { name: 'Nettoyer_redresser', count: 0, status: '', value: 'Nettoyer_redresser' }, 
     { name: 'Interne', count: 0, status: '', value: 'Interne' }, 
     { name: 'Otsc', count: 0, status: '', value: 'Otsc' }]; 

$scope.zoomTagSelectionEvent = function (tag) { 
     var photo = $scope.carousel.settings.images[$scope.carousel.settings.currentImage]; 
     if ($scope.hasTag(photo, tag.value)) { 
      $scope.removeTag(photo, tag.value); 
     } 
     else { 
      $scope.addTag(photo, tag.value); 
     } 
     $scope.updateTagStatus(tag.value); 
    } 

$scope.tagSelectionEvent = function (tag) { 
     if ($scope.allHaveTag($scope.selectedPhotos, tag.value)) { 
      $scope.allRemoveTag($scope.selectedPhotos, tag.value); 
     } 
     else { 
      $scope.allAddTag($scope.selectedPhotos, tag.value); 
     } 
     $scope.updateTagStatus(tag.value); 
    } 

$scope.updateAllTagStatus = function() { 
     angular.forEach($scope.tags, function (value, key) { 
      $scope.updateTagStatus(value.value); 
     }); 
    } 

     $scope.updateTagStatus = function (tag) { 
     var currentTag = $scope.getTag(tag); 

     if ($scope.displayStyle.style == 'grid') 
     { 
      var tagged = $scope.countTagged($scope.selectedPhotos, tag); 
      if (tagged == 0) { 
       currentTag.status = 'none'; 
      } 
      else if (tagged < $scope.selectedPhotos.length) { 
       currentTag.status = 'selected'; 
      } 
      else { 
       currentTag.status = 'active'; 
      } 
     } 
     else { 
      if ($scope.carousel.settings.currentImage !== false) 
      { 
       var photo = $scope.carousel.settings.images[$scope.carousel.settings.currentImage]; 
       var res = $scope.hasTag(photo, tag); 
       if (res) { 
        currentTag.status = 'active'; 
       } 
       else { 
        currentTag.status = 'none'; 
       } 
      } 
     } 
     console.log('tag ' + tag + ' status updated'); 
    } 

タグが画像に適用されるたびに、タグのステータスが更新されますng-classの式の結果を更新するはずです。正しく更新されるのはグリッドフッターのみです。これは、ビューが表示されている場合に限り、単一ビュー/混合ビュー間で共有されます。

私はこれを修正しようとしましたが、タグ更新の呼び出しごとに$ scope.apply（）を使用して試しましたが、updateTagStatus関数の最後に配置しようとしました。私は式（クラス名を引用符なし、クラスをタグ状態に設定するなど）を変更しようとしました。これらはすべてグリッドフッタのみで動作し、他のものは動作しませんでした。ステータスが正しく更新されていることを確認しましたが、唯一の問題はディスプレイの更新です。

助けてください。

更新：

私はこの問題を引き起こしたコードでも問題を除去する、それ以上であるので、ここで答えていないため、短時間でのプロジェクトのための進化の膨大なリストがありませんでした申し訳ありません全部。私はプロジェクトに取り組んで忙しく、これを更新するのを忘れていました。

ただし、ここに来て助けてくれてありがとう、ありがとう。

このような状況で何をすべきかわかりません。

Answer 1

初めてvar currentTag = $scope.getTag(tag);のように見えますが、この行が原因です。タグには適切なangular objectが返されていない可能性があります。

それとも、適切に機能を適用する$を使用して試すことができます。以下のようなすべての更新文の すなわちユーザー$apply：

$scope.$apply(function() { currentTag.status = 'selected'; }); 

$scope.$apply(function() { currentTag.status = 'none'; });