angularjs ngClass指令允许您通过数据绑定表示要添加的所有类的表达式来动态地在HTML元素上设置CSS类。
在某些情况下,我使用 ng-class 将禁用的类添加到 CTA,但在应用之前有一个瞬间的延迟,这意味着如果用户足够快,他们可以单击 CTA。参见
ng-class 不会使用 tailwindcss 样式更新变量更改
我使用 Angular 18 和 TailwindCSS。我想创建一个很酷的打字动画,每个单词都有不同的颜色。然而,当 currentColor 更新到下一个顺风颜色时,它没有显示正确的
当通过 ngClass 指令添加类时,Angular 指令 css 类选择器不起作用
当通过 ngClass 指令添加类时,Angular 指令 css 类选择器不起作用。 这是我的代码示例,我还将在链接中添加游乐场 @指示({ 选择器:'.test', 站立...
我得到了这个代码: ng-class =“{selectedHeader:键== selectedCol}” 它有效,但我也想将“键”值添加为一个类,我已经尝试过: ng-class="[{selectedHeader: key == selectedCol}, ke...
我想使用一个变量作为将添加到类列表中的 ngClass 的值。我的用例是我有一个图像精灵的集合,有基本精灵,然后是一个活动状态......
我的 Angular 应用程序遇到问题,在提交表单后,我动态更改表单中选择字段的必需属性。 评估.component.html <...
<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 文件的背景信息,也许我们可以解决这个问题。
如何将我的 [ngClass] 条件转移到一个单独的 ts 文件中作为所有组件的可重用代码,而不是在每个 html 文件中重复它?
目前我的代码正在运行。但是,我的 [ngClass] 条件非常庞大。在 html 的许多组件中重复它使得在需要任何更改时难以维护并使...
提醒:这个帖子是为旧的 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> 在表达式成立时应用多个类: <!-- notice expression1 used twice --> <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' ]]"
我目前在三元运算符上遇到了一个问题,所以我有这段代码: [ngClass]="am.hasAssignmentRequiredData(bal) && am.isDirty(bal) ? '':'禁用'" 那我这是做什么的...
无法使用 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"> <!-- Image --> <div *ngIf="cell.isImage" class="cell" style="display: flex; align-items: center; padding: 3px;"> <img [src]="cell.data"> </div> <!-- Data --> <div *ngIf="!cell.isImage" class="cell"> {{cell.data}} </div> </div> </ng-container> <!-- Column Actions --> <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 Material Theme - BODY标签上的选择器
我有一个用Angular开发的应用程序,使用Material组件。我正在使用Material Theme来为我的应用程序设置几个不同的主题(Dark, Light, Colorful)。我的主组件--app.component html ...
我放在特定的上下文中,这是我的html [[[[]
在我的有角度的应用程序中,我正在遍历以下对象的数组,以在屏幕上显示我的元素[{“名称”:“设备”,“ functional_id”:“家具”,“产品”:[{.. 。
是否有可能将2个对象添加到ngclass函数,如 ,但收到Json错误。语法错误:JSON ....