3

AngularJS で開発している会社のサイトがあり、いくつか問題があります。ng-class

ここに私のHTMLがあります:

<a href="timeEntry.php" ng-class="{{(userRole.admin) ? '' : 'inactive'}}">
    LINK
</a>

CSS:

.inactive {
    pointer-events : none;
    cursor         : default;
}

Chrome 検査要素:

<a href="timeEntry.php" ng-class="inactive">
    LINK
</a>

明らかに私はテストclass="inactive"しましたが、正常に動作しています.Chromeのビューソースは、動作するはずのものを表示しているように見えますが、適用されていません.

4

3 に答える 3

5

userRole.admin がブール値であると仮定すると、これは機能するはずです

<a href="timeEntry.php" ng-class="{ inactive: !userRole.admin }">
    LINK
</a>
于 2013-08-19T20:06:47.133 に答える
1

ng-class は式を想定しているため、元のコードでは {{}} 内の部分が評価され、angular はその結果を再度評価し、「非アクティブ」を変数名として解釈しようとします。三項を使用する場合は、元のコードから {{}} を省略してください

<a href="timeEntry.php" ng-class="userRole.admin ? '' : 'inactive'">
LINK

ただし、この特定の例では、オブジェクト形式を使用して他の人が提供するソリューションが優先されます。

于 2016-07-26T14:49:40.940 に答える
1

私はこれがうまくいくと思います：

<a href="timeEntry.php" ng-class="{inactive:userRole.admin}">Link</a>

オブジェクトに複数の条件を含めることもできます。それらの間にコンマを挿入するだけです。フォーマットはcssClass:<boolean expression>

于 2013-08-19T20:06:29.600 に答える