AngularJSでng-repeatを使用する動的クラス

Question

これは重複していません。

もう1つの投稿では、3者操作を行っているだけです。 ng-repeat内でクラスを変更したい

私は小さなバグでこのコードを持っています。

HTML：

<div id="server-id-list-container" class="panel-body col-md-12 scrollbar"> 
    <div class="server-id-list-element" ng-class="serverIdLength > 12 ? 'col-md-3' : 'col-md-2'" ng-repeat="server in selection.serverIds"> 
     <p class="alert alert-info">{{server.serverId}}<span ng-click="removeServerId($index)" class="glyphicon glyphicon-remove"></span></p> 
    </div> 
</div> 

コントローラー：

_.forEach($scope.selection.serverIds, function(a) { 
    $scope.serverIdLength = a.serverId.length; 
}); 

スコープオブジェクト：

​​

私が入ります"loma1pwipdb2002"の場合、クラスはcol-md-3になり、ng-repeatを使用しているのですべての要素に適用されます。クラスをserverIdLength> 12にのみ適用し、12未満の場合はcol-md-2を適用する必要があります。

アドバイスをしてください。

Answer 1

selection.serverIdsの各要素のクラスをserverId文字列の長さに基づいて個別に切り替えるのは正しいですか？ selection.serverIdsを知る必要があります。それはあなたの「スコープオブジェクト」ですか？ yesの場合、私はちょうど

<div 
    class="server-id-list-element" 
    ng-repeat="server in selection.serverIds" 
    ng-class="server.serverId.length > 12 ? 'col-md-3' : 'col-md-2'"> ... </div> 

問題は、あなたの$scope.serverIdLengthは、すべてのリストについては、一度計算されていることがあるだろう。あなたは各項目固有のプロパティに基づいて動的なクラスを持っている間、

私が問題とエントリー条件を理解できなかった場合は、引き続き議論を進めてください。

Answer 2

はそれを試してみてください。

_.forEach($scope.selection.serverIds, function(a) { 
    $scope.serverIdLength = a.serverId.length; 
}); 

を問わず、常に最後SERVERIDの長さに設定されるもの$scope.serverIdLength：

ng-class="{'col-md-3':server.serverId.length > 12, 'col-md-2':server.serverId.length <= 12}" 

Answer 3

問題はここにあるんようです。それはグローバル変数であり、そのインスタンスが1つしかないからです。これがすべてのクラスが一致する理由です。それらはすべて同じ変数を参照します。

代わり@dhilt提案溝コントローラコード等

とDOMの長acccess：この[質問]の

ng-class="server.serverId.length > 12 ? 'col-md-3' : 'col-md-2'"