語法條件

你好我試圖使其應用於存儲在$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

回答

相關問題