标签: ng-class

我目前正在为AngularJS 开发一个幻灯片菜单指令.javascript包含三种类型的指令:每种类型的滑动菜单的指令(为简洁起见,我只包括左侧滑动菜单),一个用于屏幕其余部分的包装指令,asmWrapper和一个控制按钮指令asmControl.目前,所有这些指令都使用服务asmService进行通信.

当用户单击asmControl时,该指令的控制器调用asmService上的方法,该方法确定触发了哪个菜单并在$ rootScope上发出'asmEvent'.asmSlidingMenu的控制器将捕获该事件并更新其范围内的活动变量,但DOM元素的CSS类保持不变.

我假设没有设置ng-class.我该如何解决？

我已经在下面包含了asmSlidingMenu指令的代码.要查看更完整的示例,请查看我制作的Plunker.

slideMenu.directive('asmSlideLeft', ['$rootScope', 'asmService', 
function($rootScope, asmService) {
  return {
      restrict: 'AEC'
    , scope: {}
    , controller: function($scope) {
        $rootScope.$on('asmEvent', function(event, prop) {
          console.log('Intercepted: ' + asmService.asmStates.slideLeft.active);
          $scope.active = asmService.asmStates.slideLeft.active;
        });
      }
    , compile: function(element, attrs) {
        attrs.$set('class', 'asm asm-horizontal asm-left');
        attrs.$set('data-ng-class', '{"asm-left-open: active"}');
        return {
            pre: function preLink(scope, iElement, iAttrs) {}
          , post: function postLink(scope, iElement, iAttrs) {}
        }
      }
  } …

我使用以下代码"ng-class":

 <i class="fa" ng-class="fa-sort-up:tableService.sortState.sortBy==id && tableService.sortState.sortMode=='asc',
                               fa-sort-down:tableService.sortState.sortBy==id && tableService.sortState.sortMode=='desc',
                               fa-sort:tableService.sortState.sortBy!=id"></i>

如何修复此错误:

Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 11 of the expression [fa-sort-up:tableService.sortState.sortBy==id && tableService.sortState.sortMode=='asc',
fa-sort-down:tableService.sortState.sortBy==id && tableService.sortState.sortMode=='desc',
fa-sort:tableService.sortState.sortBy!=id] starting at [:tableService.sortState.sortBy==id && tableService.sortState.sortMode=='asc',
fa-sort-down:tableService.sortState.sortBy==id && tableService.sortState.sortMode=='desc',
fa-sort:tableService.sortState.sortBy!=id]

<ul>
  <li data-ng-repeat="image in images" data-ng-click="toggle = !toggle" data-ng-init="toggle=false">
      <img data-ng-class="{'active' : toggle}" src="" />
  </li>
</ul>

'active'类的CSS来自bootstrap.

所以切换工作,这几乎是我想要的; 我希望它类似于导航链接中的活动状态,除了在我的示例中它处理图像所以需要担心url字符串等.

我试着模仿这个在这里找到的例子无效(我为图像尝试了相同的逻辑):ng-class突出显示基于ng-repeat的活动菜单项.AngularJS

如果有人能指出我正确的方向,我将非常感激.:d

可以说我在数组中有一些对象（我们称其为数组“ items”），{ title: "Title", value: true }并且我使用ngFor将它们显示为：

<h1 *ngFor="let item of items">{{ item.title }}</h1>

现在说我想根据item.value是true还是false在h1上显示一个类。我怎样才能做到这一点？

我无法添加[class.some-class]="{{ item.value }}"。基本上，如何将当前项目的true或false值转换为ngClass之类的值？我是否在Angular 2中缺少执行此操作的明显方法？

（顺便说一句，我知道我可以通过添加class="{{ item.value | pipe }}"到h1并传递值并基于值true和false返回正确的类来做到这一点，但是似乎应该有更好的方法。）

谢谢

我有一个按钮，改变了它的文本enable和disable上点击。

我怎样才能改变按钮颜色，

例如更改为绿色亮起enable和红色亮起disable

<button (click)="enableDisableRule()">{{status}}</button>

成分

toggle = true;
status = 'Enable'; 

enableDisableRule(job) {
    this.toggle = !this.toggle;
    this.status = this.toggle ? 'Enable' : 'Disable';
}

任何帮助表示赞赏。谢谢

尝试寻找答案,但没有成功.

在angularJS中使用ng-class时,有没有将属性的值作为类名？

我的意思的一个例子:

var things = [
        {
            a: "abc",
            aTrue: true
        }
];

然后在Angular中(在这个例子中使用ng-repeat)

<div ng-repeat="thing in things" ng-class="{thing.a: !!thing.aTrue}></div>

我正在寻找班级名称"abc"- 但这给了我一个班级名称"thing.a".这甚至可能,我哪里错了？

在此先感谢,感谢您的帮助.

我得到了这段代码:

ng-class="{selectedHeader: key == selectedCol}"

它有效,但我也希望将'key'值添加为类,我试过:

ng-class="[{selectedHeader: key == selectedCol}, key]"

但那不起作用,有谁知道如何解决这个问题？

我使用语义ui和angular(1.4)ui来构建应用程序.我遇到这样一种情况:通过角度动态添加类名导致错误的渲染,因为ng-class似乎随意重新排列类名.这是不合需要的,因为语义要求某些类名组合遵循自然/语义顺序.例:

<div class="ui two column grid">
   <div ng-class="wideVersion? 'sixteen wide column': 'fourteen wide column'"></div>
</div>

这个结果(当范围变量wideVersion改变时)在dom中:

<div class="ui two column grid">
   <div class="wide column fourteen"></div>
</div>

这不起作用,因为语义要求类名遵循此用例中的自然顺序.我尝试了多个ng级变体但结果是一样的.

谢谢

我正在开发一个项目,需要允许用户在图像上添加/删除标签.

有网格视图,单视图和混合视图.网格视图在网格中显示图像拇指,单个视图逐个显示图像,混合视图在背景中显示网格,在前面显示单个图像(放大功能).

所有这些视图都有一个页脚,其中包含可应用于图像的标记.然而,网格有自己的页脚,而单一和混合视图共享他们的页脚.

以下是这些的HTML端代码:

<section id="noRefContainer" class="photosWrapper photosWrapper-cq" style="display: block"> <!--ng-controller="gridController">-->
        <div class="images-cq__wrapper" ng-show="displayStyle.style == 'grid' || displayStyle.style == 'both'">
            <div class="images-cq__item" ng-repeat="photo in displayedPhotos">
                <div ng-class="{active: photo.selected}">
                    <label for="{{photo.uuid}}">
                        <div class="img-cq">
                            <img ng-src="{{photo.thumbPath100}}" alt="Alternate Text" ng-click="selectionEvent({value: photo.uuid, event: $event, index: $index})" />
                            <a href="#" class="zoom-cq" title="zoom" ng-click="zoomOpen({value: $index})">zoom</a>
                        </div>
                        <p>
                            {{photo.title}}
                        </p>
                    </label>
                </div>
            </div>
            <div class="images-cq__footer open">
                <p>
                    <span>Tagger les</span>
                    <strong>{{selectedPhotos.length}}</strong>
                    <span>éléments sélectionnés</span>
                </p>
                <div class="images-cq__dropdown top">
                    <a href="#">...</a>
                    <ul>
                        <li><a href="#" ng-click="selectAll()">Sélectionner toutes les images</a></li>
                        <li><a href="#" …

我想做的事情如下:

var list = [1,2,3,4,5]
if(2 in list){
  return true
}

从a ng-class,所以我试过:

ng-class="this.id in list ? 'class-1' : 'class-2' ">

但是不起作用,抛出一个错误

Syntax Error: Token 'in' is an unexpected token at ...