Q1。メインの「削除」ボタンが押される前に、ユーザーが削除のマークを付けた各「項目」の外観を変更したいとします。 (この即座の視覚的フィードバックは、「確かですか?」ということわざのダイアログボックスの必要性を排除するはずである。)ユーザは、どの項目を削除すべきかを示すためにチェックボックスをチェックする。チェックボックスがオフの場合、その項目は通常の外観に戻ります。
CSSスタイルを適用または削除するための最良の方法は何ですか?
Q2。各ユーザーが自分のサイトの表示方法をパーソナライズできるようにしたいとします。たとえば、フォントサイズの固定セットから選択し、ユーザー定義可能な前景色や背景色などを許可します。
ユーザーが選択/入力したCSSスタイルを適用するための最良の方法は何ですか?
1つのクラスが既にテーブル全体に適用されている場合(たとえば、奇数行に適用される色)に、table要素内にクラスを適用すると問題が見つかりました<myClass tbody tr:nth-child(even) td>
)。 Developer Toolsで要素を検査すると、element.style
にはスタイルが割り当てられていないようです。したがって、ng-class
を使用する代わりに、ng-style
を使用しようとしましたが、この場合、新しいCSS属性はelement.style
内に表示されます。このコードは私に最適です:
<tr ng-repeat="element in collection">
[...amazing code...]
<td ng-style="myvar === 0 && {'background-color': 'red'} ||
myvar === 1 && {'background-color': 'green'} ||
myvar === 2 && {'background-color': 'yellow'}">{{ myvar }}</td>
[...more amazing code...]
</tr>
Myvarは私が評価しているものであり、それぞれの場合に、それぞれの<td>
にスタイルを適用しますmyvar値。CSSクラスによってテーブル全体に適用される現在のスタイルを上書きします。
UPDATE
たとえば、ページにアクセスするときなど、テーブルにクラスを適用する場合は、次の構造を使用できます。
<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">
基本的に、ng-classをアクティブにするために必要なのは、適用するクラスとtrueまたはfalseステートメントです。 Trueはクラスを適用し、falseは適用しません。したがって、ここではページのルートの2つのチェックと、それらの間のまたはがあるため、/route_a
またはroute_b
にいる場合、activeクラスは適用されます。
これは、trueまたはfalseを返す論理関数を右側に持つだけで機能します。
したがって、最初の例では、ng-styleは3つのステートメントによって条件付けられます。すべてがfalseの場合、スタイルは適用されませんが、ロジックに従って、少なくとも1つが適用されます。そのため、論理式はどの変数比較がtrueであるかをチェックし、空でない配列は常にtrueであるため、戻り値として配列を残し、1つのtrueのみで、応答全体にまたはを使用していることを考慮して、残りのスタイルが適用されます。
ところで、関数isActive()を提供するのを忘れました:
$rootScope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
新しい更新
ここに、私が本当に役に立つと思うものがあります。 div
の内容に応じたアイコンなど、変数の値に応じてクラスを適用する必要がある場合、次のコードを使用できます(ng-repeat
で非常に便利です)。
<i class="fa" ng-class="{ 'fa-github' : type === 0,
'fa-linkedin' : type === 1,
'fa-skype' : type === 2,
'fa-google' : type === 3 }"></i>
Font Awesome のアイコン
これは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);
}
この解決策は私のためにトリックをしました
<a ng-style="{true: {paddingLeft: '25px'}, false: {}}[deleteTriggered]">...</a>
1つか2つのプロパティの単純なCSSスタイルが必要な場合のもう1つのオプション:
見る:
<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';
}
};
三元表現を使うことができます。これを行うには2つの方法があります。
<div ng-style="myVariable > 100 ? {'color': 'red'} : {'color': 'blue'}"></div>
または...
<div ng-style="{'color': (myVariable > 100) ? 'red' : 'blue' }"></div>
次の例を見てください
<!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以降、ng-class
およびng-attr-class
でさえSVG要素で失敗します(それらは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 ...
}
よく私はあなたが true または false を返す関数であなたのコントローラの状態をチェックすることをお勧めします。
<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>
そしてあなたのコントローラーで状態をチェックしてください
$scope.getTodayForHighLight = function(today, date){
return (today == date);
}
スタイルを条件付きで適用するもう1つの(将来の)方法は、スコープ付きスタイルを条件付きで作成することです。
<style scoped type="text/css" ng-if="...">
</style>
しかし、今日ではFireFoxだけがスコープ付きスタイルをサポートしています。
Style要素内のCSSルールを変更できるため、ng-style、ng-classなどの角度ディレクティブを繰り返し使用する必要がなくなるため、最近見つけたもう1つのオプションがあります。 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つは、CSSスタイルにダッシュがある場合は、それらを削除する必要があることです。 background-color
を設定したいのであれば、正しい方法は次のとおりです。
ng-style="{backgroundColor:myColor}"
無効化されたボタンにグレーのテキストスタイルを条件付きで適用する方法は次のとおりです。
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
styleUrls: [ './app.component.css' ],
template: `
<button
(click)='buttonClick1()'
[disabled] = "btnDisabled"
[ngStyle]="{'color': (btnDisabled)? 'gray': 'black'}">
{{btnText}}
</button>`
})
export class AppComponent {
name = 'Angular';
btnText = 'Click me';
btnDisabled = false;
buttonClick1() {
this.btnDisabled = true;
this.btnText = 'you clicked me';
setTimeout(() => {
this.btnText = 'click me again';
this.btnDisabled = false
}, 5000);
}
}
これが実用的な例です。
https://stackblitz.com/edit/example-conditional-disable-button?file=src%2Fapp%2Fapp.component.html