ngのクラス複数の条件

は、ここに私のコードである10000と言う：ngのクラス複数の条件

<tr ng-repeat="u in user.tables.tbl1" ng-init="u.DateAdded = JSONtoDATE(u.DateAdded)" ng-class='{lastRow : $last}' ng-model="myIndex = $index"> 
    <td>{{u.ID}}</td> 
    <td>{{u.Name}}</td> 
    <td>{{u.Email}}</td> 
    <td>{{u.DateAdded}}</td> 
    <td ng-class='{selectedRow : u.Credit >= creditValue}'>{{u.Credit}}</td> 
</tr>

...私はこのような何かを試してみましたが、それはうまくいきませんでした：

<td ng-class='{selectedRow : ((u.Credit >= creditValue) && (u.Credit < 10000))}'>{{u.Credit}}</td>

出典

2017-04-25 cembo

をお試しください'& & 'とは異なりますか？ ng-classは、私が知る限り、htmlまたはxmlの属性文字列として引き続き解析されます。 –

あなたのコントローラの関数呼び出しでそれを置き換えることができます。

<td ng-class='getClassForCurrentRow(u)'>{{u.Credit}}</td>

creditValueがどこにあるのかわからないのですが、コントローラからのものであれば新しいパラメータは必要ありません。それ以外の場合はgetClassForCurrentRow(u, creditValue)という関数に追加してください。

そして、あなたのコントローラでは、クラスを定義します。角度は何かが変更さかどうかを判断するために、サイクルごとにそれを実行するため

{...} 
$scope.getClassForCurrentRow = function(record) { 
    if (record.Credit >= $scope.creditValue) { 
     return "selectedRow"; 
    } 
    return ""; 
}

は、できるだけ簡単なこの機能を残すように注意してください。

出典

2017-04-25 05:50:53

<a href="" ng-click="addFavorite(myfav.id);favorite=!favorite"> 
<i class="fa orange" ng-class="{'fa-star': favorite || fav==myfav.id, 'fa-star-o': !favorite}"></i>

出典

2017-04-25 06:01:07 Ananya

私はみんなを謝罪、私は（私はJSの初心者です）テストコードで小さなミスをした目的の機能に負の影響を持っていたし、それを修正した後、私は私がnot-」と主張しているという表現を言って持っています実際に働いています：

selectedRow : (u.Credit >= creditValue && u.Credit < 10000)

しかし、あなたの答えは私が学習しているように私にとって非常に貴重です。ありがとう。

出典

2017-04-25 06:22:10 cembo

ng-classの複数の条件では、ng-classのselectedRowsに対してtrueまたはfalseを返すコントローラで関数を作成する方が適しています。

{...} 
$scope.getSelectedRow = function(record, creditValue) { 
    if (record.Credit >= creditValue && record.Credit < 10000) { 
     return true; 
    } 
    return false; 
}

コールこのような：以下のように

<td ng-class='getSelectedRow(u,creditValue)'>{{u.Credit}}</td>

出典

2017-04-25 06:38:46

問題が `&&`の使用に関連している可能性が...以下のように

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> 
 
<style> 
 
.selectedRow{ 
 
color:#987789; 
 
font-size:30px; 
 
} 
 
.unSelectedRow{ 
 
color:#234567; 
 
font-size:30px; 
 
} 
 
</style> 
 
<body ng-app="" ng-init="Credit = 10;creditValue=9;"> 
 
<p ng-class="{true: 'selectedRow', false: 'inactive'}[Credit >= creditValue]">Value : {{Credit}}</p> 
 
<p ng-class="{false: 'unSelectedRow'}[Credit < creditValue]">Value : {{Credit}}</p> 
 

 
</body>

出典

2017-04-25 06:49:12

答えて

関連する問題