ng-class 相关问题

angularjs ngClass指令允许您通过数据绑定表示要添加的所有类的表达式来动态地在HTML元素上设置CSS类。

Angular 2 如何使用变量作为 ngClass 的值

我想使用一个变量作为将添加到类列表中的 ngClass 的值。我的用例是我有一个图像精灵的集合，有基本精灵，然后是一个活动状态......

angular ng-class

回答 3 投票 0

在 Angular 中动态更改选择字段的验证

我的 Angular 应用程序遇到问题，在提交表单后，我动态更改表单中选择字段的必需属性。评估.component.html <...

angular forms validation required ng-class

回答 1 投票 0

ngClass 在组件中使用对象时不会切换值

当我使用以下代码切换类时，一切正常在职的关于更改

css angular ng-class angular-ng-class

回答 1 投票 0

ngClass 在组件类中使用对象时不会切换值

当我使用以下代码来切换类时，一切正常在职的改变

angular ng-class angular-ng-class

回答 1 投票 0

我的 NgClass 未应用于该元素

<mat-dialog-content class="mat-typography"> <div *ngFor="let form of addEmpForm; let i = index" class="example-container" [ngClass]="{ 'example-container': true, 'formValidationError': validationFormErrors[i] == true }"> 当我添加此 NgClass 时，我的表单丢失并且 CSS 看起来不正确。（见图）如果我删除 ngClass，它看起来不错。如果表单中存在错误，我需要使用此类，以便我可以应用边框并将边框设置为红色。 SCSS 文件 .example-container mat-form-field + mat-form-field { margin-left: 8px; } .example-container mat-form-field { width: 500px; } .example-container form { margin-bottom: 20px; } .example-container form > * { margin: 12px 0; } .example-container .mat-radio-button { margin: 0 12px; } .example-form-fields { display: flex; justify-content: space-between; align-items: baseline; } mat-label.field-label { color: #000000; } .example-form-fields-last { display: flex; justify-content: space-between; } .cancel-btn, button.add-more-btn, button.submit-btn { background-color: #1e2b54 !important; color: white !important; } .cancel-btn:hover, button.add-more-btn:hover, button.submit-btn:hover { background-color: yellow; color: red !important; } .formValidationError { border: 2px solid red; padding: 10px; border-radius: 20px; background-color: lightcoral; } 我们设置数组的 TypeScript this.validationFormErrors = empData.map((it: any) => it.isValidationError); （50 次之前无法添加评论）您尝试设置“example-container”两次，因为它在您的类中进行了硬编码，并且在 ngClass 中设置为 true。除此之外，它看起来执行正确。如果您可以提供更多有关 TS 和 CSS 文件的背景信息，也许我们可以解决这个问题。

css angular ng-class

回答 1 投票 0

如何将我的 [ngClass] 条件转移到一个单独的 ts 文件中作为所有组件的可重用代码，而不是在每个 html 文件中重复它？

目前我的代码正在运行。但是，我的 [ngClass] 条件非常庞大。在 html 的许多组件中重复它使得在需要任何更改时难以维护并使...

angular typescript service ng-class simplify

回答 1 投票 0

使用 ng-class 添加多个类

提醒：这个帖子是为旧的 AngularJS 准备的！我们可以有多个表达式来添加多个 ng-class 吗？例如。 &... 警告：这个帖子是为旧的 AngularJS 准备的！我们可以有多个表达式来添加多个 ng-class 吗？例如 <div ng-class="{class1: expressionData1, class2: expressionData2}"></div> 如果是，任何人都可以举出这样做的例子。 . 当不同的表达式计算为true时应用不同的类： <div ng-class="{class1 : expression1, class2 : expression2}"> Hello World! </div> 在表达式成立时应用多个类：  <div ng-class="{class1 : expression1, class2 : expression1}"> Hello World! </div> 或者很简单： <div ng-class="{'class1 class2' : expression1}"> Hello World! </div> 注意 css 类周围的单引号。对于三元运算符表示法： <div ng-class="expression1? 'class1 class2' : 'class3 class4'"> 一个非常强大的替代这里的其他答案： ng-class="[ { key: resulting-class-expression }[ key-matching-expression ], .. ]" 一些例子： 1。只需将 'class1 class2 class3' 添加到 div: <div ng-class="[{true: 'class1'}[true], {true: 'class2 class3'}[true]]"></div> 2。根据 $index: 添加“奇数”或“偶数”类到 div <div ng-class="[{0:'even', 1:'odd'}[ $index % 2]]"></div> 3。根据 $index 为每个 div 动态创建一个类 <div ng-class="[{true:'index'+$index}[true]]"></div> 如果$index=5这将导致： <div class="index5"></div> 这是您可以运行的代码示例： var app = angular.module('app', []); app.controller('MyCtrl', function($scope){ $scope.items = 'abcdefg'.split(''); }); .odd { background-color: #eee; } .even { background-color: #fff; } .index5 {background-color: #0095ff; color: white; font-weight: bold; } * { font-family: "Courier New", Courier, monospace; } <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> <div ng-app="app" ng-controller="MyCtrl"> <div ng-repeat="item in items" ng-class="[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]"> index {{$index}} = "{{item}}" ng-class="{{[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]].join(' ')}}" </div> </div> 是的，您可以使用多个表达式在 ng-class 中添加多个类。例如： <div ng-class="{class1:Result.length==2,class2:Result.length==3}"> Dummy Data </div> 在控制器上使用$scope 方法，您可以计算在视图中输出哪些类。如果你有一个复杂的计算类名的逻辑，这将特别方便，它将通过将它移动到控制器来减少视图中的逻辑量： app.controller('myController', function($scope) { $scope.className = function() { var className = 'initClass'; if (condition1()) className += ' class1'; if (condition2()) className += ' class2'; return className; }; }); 在视图中，只需： <div ng-class="className()"></div> 您的示例适用于有条件的课程（如果expressionDataX为真，课程名称将显示）： <div ng-class="{class1: expressionData1, class2: expressionData2}"></div> 您还可以添加多个类，由元素的用户提供： <div ng-class="[class1, class2]"></div> 用法： <div class="foo bar" class1="foo" class2="bar"></div> 这里是一个使用 OR || 比较多个 angular-ui-router 状态的例子接线员： <li ng-class=" { warning: $state.includes('out.pay.code.wrong') || $state.includes('out.pay.failed') , active: $state.includes('out.pay') } "> 根据是否满足条件，它会给 li 类警告和/或活动。 active和activemenu下面是类，itemCount和ShowCart是表达式/布尔值。 ng-class="{'active' : itemCount, 'activemenu' : showCart}" 具有多个条件 <div ng-class="{'class1' : con1 || can2, 'class2' : con3 && con4}"> Hello World! </div> 感谢 Scotch.io 找到了另一种方式 <div ng-repeat="step in steps" class="step-container step" ng-class="[step.status, step.type]" ng-click="onClick(step.type)"> 这是我的参考资料。PATH 其他方式我们可以创建一个函数来控制“使用多个类” CSS <style> .Red { color: Red; } .Yellow { color: Yellow; } .Blue { color: Blue; } .Green { color: Green; } .Gray { color: Gray; } .b { font-weight: bold; } </style> 剧本 <script> angular.module('myapp', []) .controller('ExampleController', ['$scope', function ($scope) { $scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray']; $scope.getClass = function (strValue) { if (strValue == ("It is Red")) return "Red"; else if (strValue == ("It is Yellow")) return "Yellow"; else if (strValue == ("It is Blue")) return "Blue"; else if (strValue == ("It is Green")) return "Green"; else if (strValue == ("It is Gray")) return "Gray"; } }]); </script> 使用它 <body ng-app="myapp" ng-controller="ExampleController"> <h2>AngularJS ng-class if example</h2> <ul > <li ng-repeat="icolor in MyColors" > <p ng-class="[getClass(icolor), 'b']">{{icolor}}</p> </li> </ul> 如果示例，您可以参考ng-class的完整代码页我用这个： [ngClass]="[{ 'basic':'mat-basic-button', 'raised':'mat-raised-button', 'stroked':'mat-stroked-button' }[ button.style ?? 'raised' ]]"

angularjs ng-class

回答 12 投票 0

Angular 10 PrimeNG ngClass

我目前在三元运算符上遇到了一个问题，所以我有这段代码： [ngClass]="am.hasAssignmentRequiredData(bal) && am.isDirty(bal) ? '':'禁用'" 那我这是做什么的...

angular primeng ng-class

回答 1 投票 0

无法使用 ngClass 和 ng-container 构建表，Angular

我有一个通用表组件，我想通过使用 ngClass 将类绑定到 ng 容器来使该行可悬停。但是我出错了。代码：我有一个通用表格组件，我想通过使用 ngClass 将类绑定到 ng-container 来使该行可悬停。但是我出错了。代码： <ng-container *ngFor="let row of manager.rows" [ngClass]="manager.config.onRowSelect ? 'row-selectable' : ''"> <ng-container *ngFor="let cell of row.displayData"> <div (click)="row.onClick(row.item)" class="cell-divider">  <div *ngIf="cell.isImage" class="cell" style="display: flex; align-items: center; padding: 3px;"> <img [src]="cell.data"> </div>  <div *ngIf="!cell.isImage" class="cell"> {{cell.data}} </div> </div> </ng-container>  <div *ngIf="manager.config.rowActions && manager.config.rowActions.length > 0" style="display: flex; gap: 2px; align-items: center;" class="cell-divider"> <div *ngFor="let action of row.actions" > <ng-container> <app-ui-icon-button (clicked)="action.action(row.item)" [iconSize]="20" [tooltip]="action.tooltip" [backgroundTransparent]="true" [iconColor]="action.color" [icon]="action.icon"></app-ui-icon-button> </ng-container> </div> </div> </ng-container> 我得到的错误：如果我从第一个 ng-container 中删除 ngClass 部分，那么我就不会收到错误。不起作用的解决方案：用div替换ng-container，因为在ng-container上面是一个表格布局，它会破坏布局。在第一个 ng-container 和第一个 div 之间添加一个 div，因为这也会破坏布局。为什么我不能将 ngClass 绑定到 ngContainer，我该如何解决我的问题？

angular ng-class ng-container

回答 0 投票 0

如何在Angular中切换黑暗模式？

我试图在用户切换开关时切换黑暗模式，这是在头组件中。请看下面的图片。

javascript css angular toggle ng-class

回答 1 投票 0

如何在ng类中与字符串进行比较？

这一行对我来说似乎不起作用。排序方式按字母顺序排列我必须在......中转义'标题'吗？

angularjs ng-class

回答 6 投票 5

Angular Material Theme - BODY标签上的选择器

我有一个用Angular开发的应用程序，使用Material组件。我正在使用Material Theme来为我的应用程序设置几个不同的主题（Dark, Light, Colorful）。我的主组件--app.component html ...