angularjs - 最好的方法应用一个类?

  显示原文与译文双语对照的内容

假设你拥有一个在 ul 中呈现的数组,其中每个元素都有一个 li,控制器上有一个名为 selectedIndex的属性。 在在与该索引 selectedIndexli angularjs,将是最好的方式将类添加到什么?

我目前正在复制( 用手) li 代码,并将该类添加到 li 标记中,并使用 ng-showng-hide 显示每个索引的一个 li

时间:

如果你不想将CSS类名放入控制器中,我将在pre-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类保留在控制器代码之外。

ng-class 支持必须计算为

  1. space-delimited类名称的字符串,或者
  2. 类名称的数组,或者
  3. 类名称的映射/对象到布尔值。

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


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

参见如何在AngularJS中有条件地应用CSS样式? 用于更广泛答案的。


更新: Angular 1.1.5增加了对三元运算符的支持,因此如果你对该构造更熟悉:


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

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


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

注意:Angular 灵活,你使用的是旧版本,则应使用这里相反,


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

下面是一个简单的解决方案:


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>

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


 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 -element数组或者字符串,它被转换成一个数组,该数组作为第二个元素附加空字符串:


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

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


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>

1.1.5, 三元运算符刚被添加到 Angular parser.

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


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

我最近做的是这样做的:


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

isShowing 值是一个位于我的控制器上的值,它可以通过单击按钮来切换,而单个括号之间的部分是我在css文件中创建的类。

编辑:我还想添加一个免费课程,它是由google在AngularJS上赞助的,它涵盖了所有这些内容,然后。 没有必要支付任何费用,只要注册一个帐户,然后进入 ! 祝你好运 !

...