2017-02-26 6 views
0

への変更を保持しないので、私はIAMのはそうのようなオーバー繰り返し配列リストを持っている:角度フィルタリングはオーケークラス

<div class="row"> 
      <input type="text" data-ng-model="name" 
       class="resource-search" placeholder="Insert a resource name"> 
     </div> 
     <div class="row"> 
      <div 
       data-ng-repeat="resource in allResources | resourceFilter:name" 
       data-ng-click="addResourceToProject(resource, $event)" 
       class="col-md-2"> 
       <resource profile="resource"></resource> 
      </div> 

そして、私はそれを使用しているカスタムフィルタ:

app.filter('resourceFilter', function() { 
return function(input, text){ 
     input = input || []; 
     var out = []; 

     input.forEach(function(res) { 
      if(res.name.toUpperCase().startsWith(text.toUpperCase())) { 
       out.push(res); 
      } 
     }); 
     return out; 
    }; 
}); 

そして、コントローラでクリックされたすべてのリソースを調整しようとします:

$scope.addResourceToProject = function(resource, event) { 

    var elementIsImage = event.target.tagName.toLowerCase() === 'img'; 
    if(index >= 0) { 
     resources = $scope.projectList[index].resources; 
    } else { 
     resources = shareService.getResourcesToNewProject(); 
    } 

    if(elementIsImage) { 
     var target = $(event.target); 
     if(target.hasClass('picked')) { 
      var elementIndex; 
      resources.forEach(function(res) { 
       if(res.id === resource.id) { 
        elementIndex = resources.indexOf(res); 
       } 
      }); 
      resources.splice(elementIndex, 1); 
      target.removeClass('picked'); 
     } else { 
      target.addClass('picked'); 
      resources.push(resource); 
     } 
    } 
}; 

sを使用しないとすべて動作しますearch bar、検索バーを使用すると、クラスの以前の変更が破棄されます。つまり、検索バーを使用してリソースを見つけてクリックします。クラスの変更が適用され、すべてが問題ありません。クラスでは破棄されますが、新しいクラスが適用されます。配列への追加は意図どおりに機能しています。

ありがとうございます。

答えて

0

DOMに直接ng-classのクラスを追加すると、トリックが発生しました。フィルタ処理されたオブジェクトはすべて、一定のレベルで一時的なものであると仮定しています。これは、コントローラからの変更を意味します。したがって、変更は最初の検索でのみ解決されます。

<img data-ng-src="{{ profileimg }}" data-ng-class="{'picked': profile.picked}"></img> 
関連する問題