代码之家 › 专栏 › 技术社区 › Jack Roscoe

通过表达式应用ng类时,如何正确组合字符串和变量?

ng-class angularjs

Jack Roscoe · 技术社区 · 10 年前

当我的应用程序初始化时 ng-class 按预期工作,并且正确应用了类名。但是,当 person.status 在运行时更改,类保持不变。

这是我的代码:

ng-class="{ 'avatar--{{ person.status }}' : myBool }"

如何更改格式,以便当 个人状态 改变了,我的班级也改变了吗?

示例:如果 个人状态 设置为 online 当应用程序初始化时,应用的类是 avatar--online 。但是,如果其状态更改为 offline 在当前会话中,该类保持不变 化身--在线 .

2 回复 | 直到 10 年前

fikkatra 10 年前

如果您能找到使用“mybool”的方法,请尝试以下操作:

ng-class="'avatar--' + person.status"

工作代码段:

var app = angular.module('myapp', []);
app.controller('mycontroller', function($scope) {
  $scope.colors = ['blue', 'green'];
  $scope.color = $scope.colors[0];


});

.mydiv {
  width: 200px;
  height: 50px;
  background-color: grey;
}
.prefix--blue {
  background-color: blue;
}
.prefix--green {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="mycontroller">
  <select ng-model="color" ng-options="c for c in colors"></select>
  <div class="mydiv" ng-class="'prefix--'+color"></div>
</div>

Dev_Corps 10 年前

我没有尝试在ng类的类名部分使用角度表达式。但是您可以通过这个实现实现您想要的

ng-class="{'avatar--online': person.status == 'online',
           'avatar--offline': person.status == 'offline'}"

基本上,您可以在ng类实现中设置两个条件。

希望这有帮助。

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

4 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

4 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

4 年前

jieunbi · 按日期排序数组(最新优先)

4 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

4 年前

Stradosphere · 如何防止ng bind html添加结束标记?

8 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

8 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

8 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

8 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

8 年前