语法条件

你好我试图使其应用于存储在$root.buttonClass='btn-primary'（例如）CSS类语法条件

<li ng-controller="controllerCtrl"> 
    <a ng-class="{'$root.buttonClass':viewingContext=='{{entity}}'}" 
     ng-repeat="entity in entities" 
     ng-click="setContext(entity)" 
    type=""> 
    <span class="label bg-info pull-right" 
      ng-class="{hidden:viewingContext!='{{entity}}', show:viewingContext=='{{entity}}'}"> 
      viewing</span> 
      {{entity}}</a> 
</li>

控制器解决以下HTML是相当简单：

$scope.setContext = function (entity) { 
    console.log('set the context as: ' + entity); 
    if (entity == $scope.entities[0]) { 
     $scope.$root.buttonClass = 'btn-primary'; 
     $scope.viewingContext = entity; 
    } 
    if (entity == $scope.entities[1]) { 
     $scope.$root.buttonClass = 'btn-warning'; 
     $scope.viewingContext = entity; 
    } 
    if (entity == $scope.entities[2]) { 
     $scope.$root.buttonClass = 'btn-danger'; 
     $scope.viewingContext = entity; 
    } 
    };

标记中的行可能是问题！

<a ng-class="{'$root.buttonClass':viewingContext=='{{entity}}'}" 
    ng-repeat="entity in entities" 
    ng-click="setContext(entity)" 
    type="">

更新：

试图使一个js小提琴http://jsfiddle.net/gn6b4ng8/2

来源

2015-11-06 darkace

尝试将引号从$ root.buttonClass中删除 – carterw485

这似乎不起作用，但看起来似乎正确，但它不会加载类（可能现在是引导CSS问题？）' ' – darkace

当然，不能这么难！ – darkace

你不能在一个对象动态密钥名。从documentation看起来，您尝试使用第二种类型的表达式，一个对象，但违反了结构“如果表达式求值为一个对象，那么对于具有真值的对象的每个键值对，相应的键被用作类名称。“密钥将按照原样用作类名称。

它看起来像你想要使用ng类的第一种可能的表达式“如果表达式求值为一个字符串，该字符串应该是一个或多个空格分隔的类名称。”相反，如果你做一些像ng-class="$root.buttonClass"。这应该解决你的问题，然后解决你的类名，你存储在buttonClass。您可以在它使用的文档中看到一个示例<p ng-class="style">Using String Syntax</p>

来源

2015-11-06 19:44:02

如果您需要该类仅适用于某些实体，则可以将该变量的范围限定于该实体，并在您的setContext中相应地进行设置。如果您提供了一个jsfiddle或代码，可以帮助进行一些直接修改。 –

hmm using ng-class =“$ root.buttonClass”只是让我的ng-repeat中的所有元素都等于这个类。问题是我的ng-repeat与我的ng-class在同一个标记中？ – darkace

是的，这将修复条件名称，但不修复使用它的实体的次要条件。为此，你需要第二层，或者是你可以用setContext设置的每个实体中的变量，或者你必须返回带有字符串名称的对象方式（所以'btn-primary'等），但是复杂评估何时添加该类，并将该逻辑从函数中提取到ng-class表达式中。如果你能锻炼一个jsfiddle或plunkr，我可以更好地帮助你。 –

我不认为ngClass会以您想要的方式工作。

从技术上讲，只有在每次更改后重新编译元素，才能实现您的目标ngClass。这样，Angular会将ngClass的值中的更改应用于您的元素。

我不认为这是一个很好的方法来做到这一点。

幸运的是，这是Angular，您可以使用指令创建自己的功能。你可以创建一个指示，让我们把它dynamicClass，这将有类似的行为是的ngClass，但将在类名的变化做出反应：

myApp.directive('dynamicClass', function($compile) { 
    return { 
     restrict: 'A', 
     link: function($scope, element, attrs) { 
      $scope.$watch(function() { 
       return attrs.dynamicClass; 
      }, function(newVal, oldVal) { 
       var condition = newVal.match(/:(.*?)\}$/)[1]; 
       var cls = newVal.match(/^\{'?(.*?)'?:/)[1]; 
       var oldCls = oldVal.match(/^\{'?(.*?)'?:/)[1]; 
       element.removeClass(oldCls); 
       if ($scope.$eval(condition)) { 
        element.addClass(cls); 
       }  

      }); 
     } 
    }; 
});

用法：

<a dynamic-class="{'{{$root.buttonClass}}':viewingContext=='{{entity}}'}" 
    ng-repeat="entity in entities" 
    ng-click="setContext(entity)">

我分叉你的小提琴来测试它。 It works。

来源

2015-11-10 11:30:12 yarons

回答

相关问题