Q1. メインの「削除」ボタンが押される前に、ユーザーが削除のマークを付けた各「アイテム」の外観を変更したいとします。(この即時の視覚的フィードバックにより、ことわざの「よろしいですか?」ダイアログ ボックスが不要になります。) ユーザーはチェックボックスをオンにして、削除する必要がある項目を示します。チェックボックスがオフの場合、そのアイテムは通常の外観に戻ります。
CSS スタイルを適用または削除する最良の方法は何ですか?
Q2. 各ユーザーが自分のサイトの表示方法をパーソナライズできるようにしたいとします。たとえば、フォント サイズの固定セットから選択したり、ユーザー定義の前景色と背景色を許可したりします。
ユーザーが選択/入力する CSS スタイルを適用する最良の方法は何ですか?
Angular には、条件付き/動的に CSS スタイルを操作するための組み込みディレクティブが多数用意されています。
通常の「Angular の方法」では、モデル/スコープ プロパティをユーザー入力/操作を受け入れる (つまり、ng-model を使用する) UI 要素に結び付け、そのモデル プロパティを上記の組み込みディレクティブの 1 つに関連付けます。
ユーザーが UI を変更すると、Angular はページ上の関連する要素を自動的に更新します。
ng-classは、次のいずれかに評価される必要がある「式」を受け入れます。
pending-deleteいくつかの配列モデルで ng-repeat を使用してアイテムが表示され、アイテムのチェックボックスがチェックされているときにクラスを適用したいと仮定します。
<div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
... HTML to display the item ...
<input type="checkbox" ng-model="item.checked">
</div>
上記では、ng-class 式タイプ #3 - クラス名からブール値へのマップ/オブジェクトを使用しました。
ng-styleは、次のように評価する必要がある「式」を受け入れます。
人為的な例として、ユーザーが背景色の texbox に色の名前を入力できるとします (jQuery カラー ピッカーの方がはるかに優れています)。
<div class="main-body" ng-style="{color: myColor}">
...
<input type="text" ng-model="myColor" placeholder="enter a color name">
フィドルにはng-showとng-hideの例も含まれています。チェックボックスをオンにすると、背景色がピンク色に変わるだけでなく、テキストが表示されます。テキストボックスに「red」と入力すると、div が非表示になります。
これは、ng-class を使用できない場合 (たとえば、SVG をスタイリングする場合) にうまく機能します。
ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"
（ng-attr-を使用するには、最新の不安定なAngularが必要だと思います。現在、1.1.4を使用しています）
AngularJS+SVG の操作に関する記事を公開しました。この問題と他の多くの問題について話します。http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS
span class="circle circle-{{selectcss(document.Extension)}}">
とコード
$scope.selectcss = function (data) {
if (data == '.pdf')
return 'circle circle-pdf';
else
return 'circle circle-small';
};
CSS
.circle-pdf {
width: 24px;
height: 24px;
font-size: 16px;
font-weight: 700;
padding-top: 3px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
background-image: url(images/pdf_icon32.png);
}
三項式を使用できます。これを行うには、次の 2 つの方法があります。
<div ng-style="myVariable > 100 ? {'color': 'red'} : {'color': 'blue'}"></div>
また...
<div ng-style="{'color': (myVariable > 100) ? 'red' : 'blue' }"></div>
1 つまたは 2 つのプロパティの単純な CSS スタイルが必要な場合の別のオプション:
意見：
<tr ng-repeat="element in collection">
[...amazing code...]
<td ng-style="{'background-color': getTrColor(element.myvar)}">
{{ element.myvar }}
</td>
[...more amazing code...]
</tr>
コントローラ：
$scope.getTrColor = function (colorIndex) {
switch(colorIndex){
case 0: return 'red';
case 1: return 'green';
default: return 'yellow';
}
};
次の例を参照してください
<!DOCTYPE html>
<html ng-app>
<head>
<title>Demo Changing CSS Classes Conditionally with Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="res/js/controllers.js"></script>
<style>
.checkboxList {
border:1px solid #000;
background-color:#fff;
color:#000;
width:300px;
height: 100px;
overflow-y: scroll;
}
.uncheckedClass {
background-color:#eeeeee;
color:black;
}
.checkedClass {
background-color:#3ab44a;
color:white;
}
</style>
</head>
<body ng-controller="TeamListCtrl">
<b>Teams</b>
<div id="teamCheckboxList" class="checkboxList">
<div class="uncheckedClass" ng-repeat="team in teams" ng-class="{'checkedClass': team.isChecked, 'uncheckedClass': !team.isChecked}">
<label>
<input type="checkbox" ng-model="team.isChecked" />
<span>{{team.name}}</span>
</label>
</div>
</div>
</body>
</html>
AngularJS v1.2.0rc の時点で、 SVG 要素で失敗することng-classさえありng-attr-classます (class 属性内の通常のバインディングでも、以前は機能していました)。
具体的には、これらのいずれも現在機能していません。
ng-class="current==this_element?'active':' ' "
ng-attr-class="{{current==this_element?'active':' '}}"
class="class1 class2 .... {{current==this_element?'active':''}}"
回避策として、使用する必要があります
ng-attr-otherAttr="{{current==this_element?'active':''}}"
を使用してスタイルを設定します
[otherAttr='active'] {
... styles ...
}
スタイル要素内の CSS ルールを変更できるため、ng-style、ng-class、 ng-show、ng-hide、ng-animate など。
このオプションは、コントローラーによって設定され、「カスタムスタイル」と呼ばれる属性ディレクティブによって監視されるサービス変数を持つサービスを利用します。この戦略はさまざまな方法で使用できます。このfiddleで一般的なガイダンスを提供しようとしました。
var app = angular.module('myApp', ['ui.bootstrap']);
app.service('MainService', function(){
var vm = this;
});
app.controller('MainCtrl', function(MainService){
var vm = this;
vm.ms = MainService;
});
app.directive('customStyle', function(MainService){
return {
restrict : 'A',
link : function(scope, element, attr){
var style = angular.element('<style></style>');
element.append(style);
scope.$watch(function(){ return MainService.theme; },
function(){
var css = '';
angular.forEach(MainService.theme, function(selector, key){
angular.forEach(MainService.theme[key], function(val, k){
css += key + ' { '+k+' : '+val+'} ';
});
});
style.html(css);
}, true);
}
};
});
条件付きでスタイルを適用するもう 1 つの (将来の) 方法は、スコープ付きスタイルを条件付きで作成することです。
<style scoped type="text/css" ng-if="...">
</style>
しかし、現在では FireFox だけが範囲指定されたスタイルをサポートしています。
trueまたはfalseを返す関数を使用して、コントローラーの状態を確認することをお勧めします。
<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>
コントローラーで状態を確認します
$scope.getTodayForHighLight = function(today, date){
return (today == date);
}