标签: ng-class

我们可以有多个表达式来添加多个ng-class吗？

例如.

<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>

如果是的话,任何人都可以提出这样做​​的例子.

.

我正在以下列方式使用angularjs ng-class:

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/>

我想知道我是否可以使用if-else表达式,我可以做类似的事情:

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', else:'classC'}[call.State]"/>

意思是call.State不同于first或second使用,classC而不是指定每个值.

谢谢!

我正在尝试如何使用ngClick添加类.我已将我的代码上传到plunker上点击此处.看一下角度文档,我无法弄清楚它应该完成的确切方式.下面是我的代码片段.有人能引导我朝着正确的方向前进

 <div ng-show="isVisible" ng-class="{'selected': $index==selectedIndex}" class="block"></div>

调节器

var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){

        $scope.toggle = function (){
            $scope.isVisible = ! $scope.isVisible;
        };

        $scope.isVisible = false;
    });

我有组件,并在设置css类时遇到问题.我希望它总是有一个"box"类,然后有指令"class"参数和一个条件类"mini"指定的其他类.

从概念上讲,我想要实现的是这样的:

<div class="box {{class}}" data-ng-class="{mini: !isMaximized}">
...
</div>

问题是当我设置类html属性时,省略了ng-class属性.如何在不更改控制器的情况下使我的示例工作？它是否可能,或者我应该在控制器中设置类(我希望避免)？

我有一个Person对象数组

var persons = [
{Name:'John',Eligible:true},
{Name:'Mark',Eligible:true},
{Name:'Sam',Eligible:false},
{Name:'Edward',Eligible:false},
{Name:'Michael',Eligible:true}
];

我正在使用选择这样的ng-options:

<select ng-model="Blah" ng-options="person.Name for person in persons"></select>

我想显示与记录符合条件的:假的红颜色.所以问题是如何使用ng-classin select来实现这一目标？因为我们没有使用任何option标签,如果我只需添加它不会工作ng-class在select元素本身.

我想知道如何制作错误的课程.

如果页面被选中,则page.isSelected(1)为TRUE,否则为FALSE

<div id="homePage" ng-class="{ center: page.isSelected(1) }">

因此,如果:

isSelected为TRUE:center

isSelected为FALSE:left

我试过了:

<div id="homePage" ng-class="{ page.isSelected(1) 'center : 'left' }">

但它不起作用.

我不知道我做错了什么.你能帮我吗？

我有一个非常奇怪的问题.我必须active在适当的<li>时候设置一个类$scope.selectedCat == cat.id.该列表使用ng-repeat生成.如果selectedCat为false,则"浏览所有类别"列表项(在ng-repeat之外)将设置为活动状态.setCat()设置$scope.selectedCat变量的值:

<div id="cat-list" ng-controller="CatController">
    <li ng-class="{'active': {{selectedCat == false}}}">
        <a>
            <div class="name" ng-click="setCat(false)" >Browse All Categories</div>
        </a>
    </li>
    <li class="has-subcat" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': {{selectedCat == cat.id}}}">
        <a>
            <div cat class="name" ng-click="setCat({{cat.id}})" ng-bind-html="cat.name | highlight:catsearch"></div>
        </a>
    </li>
</div>

当页面加载时,一切正常(来自FireBug的快照):

<li ng-class="{'active': true}" class="ng-scope active">
<!-- ngRepeat: cat in cats | filter:catsearch -->
<li class="has-subcat ng-isolate-scope" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': false}">

但是,当我将$ scope.selectedClass设置为某个cat.id值时,ng-class中的条件会被正确计算,但ng-class不会相应地更新类: …

我有以下模板:

<p [ngClass]="{checked: condition, unchecked: !condition}">

虽然这是有效的,但我发现它有点难看,因为我必须重复两次条件.有没有办法像:( [ngClass]={condition ? checked : unchecked}这是行不通的)

谢谢

我有一个textarea包含要发布的消息和一个仍然可用的字符数的跨度.

<textarea name="" cols="" rows="" maxLength="{{maxMessageLength}}" ng-model="messageText"/>
<div id="chatmessage-buttons">              
    <a ng-click="sendMessage()"><span>Invia</span></a>
<span ng-class="{message-length-alert: (messageText.length > messageLengthAlertTreshold), message-length: true}">{{maxMessageLength - messageText.length}}</span>
</div>          

messageText,maxMessageLength并且messageLengthAlertTreshold都在$scope,并且当我在textarea中插入文本时更改值的范围内,并且跨度内的计数器正确更新messageText.length.

然而,无论是CSS类message-length也message-length-alert都曾经申请过我的跨度,无论包含在价值的messageText.

我也尝试删除检查以message-length-alert保留ng-class属性{message-length: true},但是它仍然没有被应用.

我错过了什么？

您可以将ng-animate与ng-class一起使用添加和删除动画.我想在CSS3中制作一个动画但是没有找到ng-class online的好例子.所以我想知道人们是否有他们想要分享的好例子.

我不确定我的最终动画会是什么样子,但是为了这个例子的目的,让我说我只想在添加类时使div的高度逐渐增加myclass.

 <div ng-class="{{myclass:scopeVar}}" ng-animate="?????"></div>

**CSS**

.myclass.ng-add{??}
.myclass.ng-add-active{??}
.myclass.ng-remove{??}
.myclass.ng-remove-active{??}