题 有条件地申请课程的最佳方式是什么?


假设你有一个以a渲染的数组 ul 与 li 为每个元素和控制器上的属性调用 selectedIndex。将类添加到的最佳方法是什么? li 与索引 selectedIndex 在AngularJS?

我目前正在复制(手工) li 代码并将类添加到其中一个 li 标签和使用 ng-show 和 ng-hide 只显示一个 li 每个指数。


1132
2017-10-17 10:49


起源


这个问题的答案显示,模板比{{varname}}更多。我在哪里可以找到有关模板的更多文档,例如三种不同形式的三元运算符? docs.angularjs.org/guide/templates 除了{{varname.fieldname}}之外,似乎没有解释条件等方面的模板提供。 - JonathanHayward
这对我来说非常有用,希望它对你有用 tech-blog.maddyzone.com/javascript/... - Rituraj ratan


答案:


如果您不想像我一样将CSS类名称放入Controller中,这是我从v1之前开始使用的一个老技巧。我们可以编写一个直接计算类名的表达式 ,不需要自定义指令:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

请注意带冒号的旧语法。 

还有一种新的更好的有条件地应用类的方法,例如:

ng-class="{selected: $index==selectedIndex}"

Angular现在支持返回对象的表达式。此对象的每个属性(名称)现在都被视为类名,并根据其值应用。

然而,这些方式在功能上并不相同。这是一个例子:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

因此,我们可以通过基本上将模型属性映射到类名来重用现有的CSS类,同时将CSS类保留在Controller代码之外。


1367
2017-11-29 11:17



OP,这可能是表达我见过的三元运算符的更糟糕方式。你有没有考虑过 ($index==selectedIndex) ? 'selected' : '' ? - Malvolio
@Malvolio AFAIR,三元运算符在v0.9.x中的角度表达式中不起作用。这或多或少都是一个开关。 - orcun
ng-class(截至2012年1月19日)现在支持一个表达式,该表达式必须求值为1)空格分隔的类名字符串,或2)类名称数组,或3)类的映射/对象名称为布尔值。所以,使用3):ng-class =“{selected:$ index == selectedIndex}” - Mark Rajcok
谢谢@Mark,BTW现在我已经检查过我可以说这个方法在v1中工作了。在某些情况下它仍然有用。请注意,对象属性名称(键)不一定是true或false,它可以是您可能想要映射到类名的任何内容。 - orcun
我只是想补充一下,我遇到了一个问题,因为我使用的是语法 {classname: '$index === selectedIndex'}      它没有用。当我把所有东西都推到一起并使用==而不是===时它就起作用了。 {classname: '$index==selectedIndex'} - Lucas


纳克级 支持必须求值的表达式

  1. 一串以空格分隔的类名,或
  2. 一个类名称数组,或
  3. 类名的映射/对象为布尔值。

所以,使用表格3)我们可以简单地写

ng-class="{'selected': $index==selectedIndex}"

也可以看看 如何在AngularJS中有条件地应用CSS样式? 为了更广泛的答案。


更新:Angular 1.1.5增加了对a的支持 三元运算符,所以如果你更熟悉这个结构:

ng-class="($index==selectedIndex) ? 'selected' : ''"

432
2017-08-28 01:13



三元运算符的+1(我现在需要一个)但1.1。*是一个'不稳定的版本',其中API可能会更改,恕不另行通知 - 截至打字时。 1.0。*是稳定的,所以我更愿意接受下周推出6个月的项目。 - Dave Everitt
ng-class="{'selected': $index==selectedIndex}" 适合我 - Ivana Holm


我最喜欢的方法是使用三元表达式。

ng-class="condition ? 'trueClass' : 'falseClass'"

注意: 如果你使用的是旧版Angular,你应该使用它,

ng-class="condition && 'trueClass' || 'falseClass'"

155
2017-09-27 13:39



这帮我写了这个表达式: ng-class="property.name=='timestamp' ? 'property-timestamp' : 'property-'+{{$index}}"。无法想出任何其他方式。 - dduft
我真的不知道为什么我的scoped boolean modalFlag没有更新 - ng-class =“{'closed':modalFlag,'open':!modalFlag}”我试图添加关闭或打开,具体取决于作用域变量/布尔值 - 如果有人可以提供帮助,我会非常感激 - 谢谢。 - landed
这是作为1.5版本引入的。 github.com/angular/angular.js/commit/... - Mubashir Koul


我会补充一点,因为其中一些答案似乎过时了。我是这样做的:

<class="ng-class:isSelected">

其中'isSelected'是在范围角度控制器中定义的javascript变量。


为了更具体地解决您的问题,您可以通过以下方式生成列表:

HTML 

<div ng-controller="ListCtrl">  
    <li class="ng-class:item.isSelected" ng-repeat="item in list">   
       {{item.name}}
    </li>  
</div>


JS 

function ListCtrl($scope) {    
    $scope.list = [  
        {"name": "Item 1", "isSelected": "active"},  
        {"name": "Item 2", "isSelected": ""}
    ]
}


看到: http://jsfiddle.net/tTfWM/

看到: http://docs.angularjs.org/api/ng.directive:ngClass


53
2017-09-27 02:01



class =“ng-class:item.isSelected”和ng-class =“item.isSelected”之间有什么区别 - zloctb
好奇的使用 ng-class:className vs只是使用 class="{{className}}" ? - Roi


这是一个更简单的解决方案:

function MyControl($scope){
    $scope.values = ["a","b","c","d","e","f"];
    $scope.selectedIndex = -1;
    
    $scope.toggleSelect = function(ind){
        if( ind === $scope.selectedIndex ){
            $scope.selectedIndex = -1;
        } else{
            $scope.selectedIndex = ind;
        }
    }
    
    $scope.getClass = function(ind){
        if( ind === $scope.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }
       
    $scope.getButtonLabel = function(ind){
        if( ind === $scope.selectedIndex ){
            return "Deselect";
        } else{
            return "Select";
        }
    }
}
.selected {
    color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="MyControl">
    <ul>
        <li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
    </ul>
    <p>Selected: {{selectedIndex}}</p>
</div>


46
2017-10-17 13:55



我强烈建议让你的控制器清除CSS的东西。这是一条你不想低头的道路。 - leviathan
类名属于模板 - Casey
在某些时候,jsfiddle可能会错过支付账单,或者选择转移到另一个域,或者负责人员被公共汽车杀死(参见公交因素)。所以我可以请你解释那个小提琴的作用, 中 你的答案?这也是堆栈溢出的规范。 - Sebastian Mach


我最近遇到了类似的问题,并决定只创建一个条件过滤器:

  angular.module('myFilters', []).
    /**
     * "if" filter
     * Simple filter useful for conditionally applying CSS classes and decouple
     * view from controller 
     */
    filter('if', function() {
      return function(input, value) {
        if (typeof(input) === 'string') {
          input = [input, ''];
        }
        return value? input[0] : input[1];
      };
    });

它需要一个参数,它可以是一个2元素的数组或一个字符串,它将变成一个附加空字符串作为第二个元素的数组:

<li ng-repeat="item in products | filter:search | orderBy:orderProp |
  page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">
  ...
</li>

26
2017-07-26 07:53



我刚刚创建的例子是yesNo()过滤器,根据布尔值1 0 0返回类'yes'或'no': filter('yesNo', function() { return function(input) { // info('yesNo('+ input +')'); switch(input){ case '1': return ' yes '; break; default: return ' no '; break; } } }); - svassr
ng-class可以将类名的映射/对象处理为布尔值,因此您可以简单地编写以下内容:ng-class =“{yes:some_boolean_expression,no:some_other_boolean_expression}”例如,ng-class =“{yes:input ,不:!输入}“ - Mark Rajcok


如果您想超越二进制评估并将CSS保留在控制器之外,您可以实现一个简单的过滤器,根据地图对象评估输入:

angular.module('myApp.filters, [])
  .filter('switch', function () { 
      return function (input, map) {
          return map[input] || '';
      }; 
  });

这允许您像这样编写标记:

<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">
    ...
</div>

21
2017-09-04 14:35



嗨@Joe,任何想法如何处理空值?如果我在输入中传入null,它将不会映射其类... - user1191559
@ user1191559 - 您可以将“默认”项目添加到地图中,然后在“input”为空时返回该值。 - Joe Steele


三元运算符 刚刚过去了 添加到角度解析器中 1.1.5

所以现在最简单的方法是:

ng:class="($index==selectedIndex)? 'selected' : ''"

15
2018-05-23 08:32



也: class="otherClass ng-class:($index==selectedIndex)? 'selected' : '';"。 - peter


我最近这样做是为了这样做:

<input type="password"  placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">

isShowing value是一个位于我的控制器上的值,只需单击一个按钮即可切换,单个括号之间的部分是我在css文件中创建的类。

编辑:我还想补充一点,codeschool.com有一个免费的课程,由谷歌在AngularJS上赞助,其中包括所有这些东西,然后是一些。没有必要支付任何费用,只需注册一个帐户即可开始! 祝大家好运!


15
2018-05-27 20:07



你能在这里提供小提琴或更多代码吗?是 isShowing 然后在控制器中的数组? - Kyle Pennell
我猜是一个布尔值 - Mirko


我们可以 发挥作用 用条件管理退货类

enter image description here

<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) {
                    switch(strValue) {
                        case "It is Red":return "Red";break;
                        case "It is Yellow":return "Yellow";break;
                        case "It is Blue":return "Blue";break;
                        case "It is Green":return "Green";break;
                        case "It is Gray":return "Gray";break;
                    }
                }
        }]);
</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>
<hr/>
<p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>
<ul>
    <li ng-repeat="icolor in MyColors">
        <p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>
    </li>
</ul>

您可以参考完整的代码页 例如ng-class


11
2017-11-04 08:55