點擊更改CSS類的屬性

我已經閱讀了一點點，並開始了我最終想要的東西。 This是有幫助的，以及另一篇文章，我忘了鏈接。不過，我讀過的所有東西都是一個CSS類或屬性。我想要CHANGE現有CSS類的屬性，但我不知道如何定位它。點擊更改CSS類的屬性

我想，我想用ng-class在從角文檔採取這些用例之一：

如果表達式計算爲一個字符串，字符串應該是一個或多個空格分隔類名。
如果表達式求值爲一個對象，那麼對於具有真值的對象的每個鍵值對，相應的鍵被用作類名稱。

我現有的代碼使用ng-class以及一些控制器邏輯。

HTML

<div ng-controller="ngToggle"> 
    <div ng-class="{'inset-gray-border' : style}"> 
     <div class="subcontainer" ng-click="toggleStyle()">{{item.name}}</div> 
    </div> 
</div>

目前這增加了inset-gray-border類嵌套div，但我只是想更改subcontainer類border屬性。

控制器

angular.module('app').controller('ngToggle', ['$scope', function($scope) { 
    $scope.style = false; 
    $scope.toggleStyle = function() { 
     $scope.style = $scope.style === false ? true: false; 
    }; 
}]);

我認爲用一個指令，但我相信這將是矯枉過正。我認爲這可以在控制器中實現。

編輯：經過進一步的研究，我認爲jQLite可以做到這一點，但這可能需要一個指令。

來源

2015-08-13 UltraSonja

什麼是具體問題？你使用'ng-class'看起來非常合理。甚至可以在沒有控制器功能的情況下在'ng-click'內切換變量，但任何一種方式都應該正常工作......備用：'ng-click =「style =！style」' – charlietfl

不要害怕指令。他們是你的朋友。當你開始使用它時，它會使角度變得更加有趣。 – BobDoleForPresident

更改現有的CSS類的屬性

添加一個css規則，使用你使用ng-cl添加的新類來做到這一點屁股。特異性將超過原規

.subcontainer{ 
    color : blue 
} 
.inset-gray-border .subcontainer{ 
    color:red 
}

來源

2015-08-13 13:54:47 charlietfl

如此簡單而優雅。 – UltraSonja

它真的只是一個基本的CSS方法。 – charlietfl

而不是一個大的toggleStyle函數，你可以只在UI側寫這些東西。 Here是小提琴。當你想改變的.subcontainer border屬性，加入.insert-gray-border

<div ng-controller="ngToggle"> 
    <div > 
     <div ng-class="{'subcontainer':true,'inset-gray-border' : style}" ng-click="style=!style">{{item.name}}</div> 
    </div> 
</div>

覆蓋該屬性這樣做的benifit是，它使用本地範圍，而不是控制範圍。

來源

2015-08-13 13:50:53

我認爲更少的代碼是不錯的。 – UltraSonja

最好的辦法是定義兩個CSS類，一個用於基礎（非格式化）的情況，另一個用於在屬性切換時需要的所有屬性。

在這種情況下，你可能想是這樣的：

.container .subcontainer {} 
.container .subcontainer-bordered { border: solid 1px #123456}

那麼你的HTML代碼進行更新，以反映這種結構

<div ng-controller="ngToggle"> 
    <div class="container"> 
     <div class="subcontainer" ng-class="{'subcontainer-bordered': style}" ng-click="style = !style">{{item.name}}</div> 
    </div> 
</div>

來源

2015-08-13 13:53:55

點擊更改CSS類的屬性

回答

相關問題