for each 要素と というコントローラーのプロパティでulレンダリングされる配列があるとします。AngularJSでインデックスを使用してクラスを追加する最良の方法は何でしょうか?liselectedIndexliselectedIndex
現在、コードを (手作業で) 複製liし、クラスをliタグの 1 つに追加し、 and を使用ng-showしてインデックスごとng-hideに 1 つだけを表示しています。li
質問する
774588 次
23 に答える
1384
私のように CSS クラス名を Controller に入れたくない場合は、v1 以前から私が使用している古いトリックを次に示します。クラス名selectedに直接評価される式を書くことができます。カスタム ディレクティブは必要ありません。
ng:class="{true:'selected', false:''}[$index==selectedIndex]"
コロンを使用した古い構文に注意してください。
次のように、条件付きでクラスを適用する新しいより良い方法もあります。
ng-class="{selected: $index==selectedIndex}"
Angular は、オブジェクトを返す式をサポートするようになりました。このオブジェクトの各プロパティ (名前) はクラス名と見なされ、その値に応じて適用されます。
ただし、これらの方法は機能的に同等ではありません。次に例を示します。
ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"
したがって、基本的にモデル プロパティをクラス名にマッピングすることで既存の CSS クラスを再利用し、同時に CSS クラスをコントローラー コードから除外することができます。
于 2011-11-29T11:17:36.663 に答える
437
ng-classは、次のいずれかに評価する必要がある式をサポートしています
- スペースで区切られたクラス名の文字列、または
- クラス名の配列、または
- クラス名からブール値へのマップ/オブジェクト。
したがって、フォーム 3) を使用すると、簡単に書くことができます。
ng-class="{'selected': $index==selectedIndex}"
AngularJS で CSS スタイルを条件付きで適用するにはどうすればよいですか?も参照してください。より広い答えのために。
更新: Angular 1.1.5 は三項演算子のサポートを追加したため、その構造に慣れている場合:
ng-class="($index==selectedIndex) ? 'selected' : ''"
于 2012-08-28T01:13:15.100 に答える
159
私のお気に入りの方法は、三項式を使用することです。
ng-class="condition ? 'trueClass' : 'falseClass'"
注:古いバージョンの Angular を使用している場合は、代わりにこれを使用する必要があります。
ng-class="condition && 'trueClass' || 'falseClass'"
于 2013-09-27T13:39:22.070 に答える
53
これらの回答の一部は古くなっているように見えるため、これに追加します。これが私がそれを行う方法です：
<class="ng-class:isSelected">
「isSelected」は、スコープ付き角度コントローラー内で定義された JavaScript 変数です。
あなたの質問に具体的に対処するために、それを使ってリストを生成する方法は次のとおりです。
HTML
<div ng-controller="ListCtrl">
<li class="ng-class:item.isSelected" ng-repeat="item in list">
{{item.name}}
</li>
</div>
JS
function ListCtrl($scope) {
$scope.list = [
{"name": "Item 1", "isSelected": "active"},
{"name": "Item 2", "isSelected": ""}
]
}
于 2012-09-27T02:01:38.770 に答える
48
はるかに簡単な解決策を次に示します。
function MyControl($scope){
$scope.values = ["a","b","c","d","e","f"];
$scope.selectedIndex = -1;
$scope.toggleSelect = function(ind){
if( ind === $scope.selectedIndex ){
$scope.selectedIndex = -1;
} else{
$scope.selectedIndex = ind;
}
}
$scope.getClass = function(ind){
if( ind === $scope.selectedIndex ){
return "selected";
} else{
return "";
}
}
$scope.getButtonLabel = function(ind){
if( ind === $scope.selectedIndex ){
return "Deselect";
} else{
return "Select";
}
}
}.selected {
color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="MyControl">
<ul>
<li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
</ul>
<p>Selected: {{selectedIndex}}</p>
</div>于 2011-10-17T13:55:58.177 に答える
27
最近同様の問題に直面し、条件付きフィルターを作成することにしました。
angular.module('myFilters', []).
/**
* "if" filter
* Simple filter useful for conditionally applying CSS classes and decouple
* view from controller
*/
filter('if', function() {
return function(input, value) {
if (typeof(input) === 'string') {
input = [input, ''];
}
return value? input[0] : input[1];
};
});
2要素の配列または文字列のいずれかである単一の引数を取り、2番目の要素として空の文字列が追加された配列に変換されます。
<li ng-repeat="item in products | filter:search | orderBy:orderProp |
page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">
...
</li>
于 2012-07-26T07:53:47.287 に答える
21
バイナリ評価を超えて、CSS をコントローラーから除外したい場合は、マップ オブジェクトに対して入力を評価する単純なフィルターを実装できます。
angular.module('myApp.filters, [])
.filter('switch', function () {
return function (input, map) {
return map[input] || '';
};
});
これにより、次のようにマークアップを記述できます。
<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">
...
</div>
于 2012-09-04T14:35:11.070 に答える
17
私が最近やったのは、これをしていたことです：
<input type="password" placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">
値は、isShowingコントローラーにある値で、ボタンのクリックで切り替えられます。一重括弧の間の部分は、css ファイルで作成したクラスです。
編集: また、codeschool.com には、Google が後援する AngularJS に関する無料のコースがあり、このすべての内容といくつかの内容について説明していることも付け加えたいと思います。何も支払う必要はありません。アカウントにサインアップするだけで始められます! 皆さんの幸運を祈ります！
于 2014-05-27T20:07:21.307 に答える
15
1.1.5で三項演算子がangular パーサーに追加されました。
したがって、これを行う最も簡単な方法は次のとおりです。
ng:class="($index==selectedIndex)? 'selected' : ''"
于 2013-05-23T08:32:50.180 に答える
11
条件付きの戻りクラスを管理する関数を作成できます
<script>
angular.module('myapp', [])
.controller('ExampleController', ['$scope', function ($scope) {
$scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
$scope.getClass = function (strValue) {
switch(strValue) {
case "It is Red":return "Red";break;
case "It is Yellow":return "Yellow";break;
case "It is Blue":return "Blue";break;
case "It is Green":return "Green";break;
case "It is Gray":return "Gray";break;
}
}
}]);
</script>
その後
<body ng-app="myapp" ng-controller="ExampleController">
<h2>AngularJS ng-class if example</h2>
<ul >
<li ng-repeat="icolor in MyColors" >
<p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
</li>
</ul>
<hr/>
<p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>
<ul>
<li ng-repeat="icolor in MyColors">
<p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>
</li>
</ul>
例の場合、ng-classで完全なコード ページを参照できます。
于 2015-11-04T08:55:41.113 に答える
9
これは魅力のように機能します;）
<ul class="nav nav-pills" ng-init="selectedType = 'return'">
<li role="presentation" ng-class="{'active':selectedType === 'return'}"
ng-click="selectedType = 'return'"><a href="#return">return
</a></li>
<li role="presentation" ng-class="{'active':selectedType === 'oneway'}"
ng-click="selectedType = 'oneway'"><a href="#oneway">oneway
</a></li>
</ul>
于 2016-01-14T22:30:37.600 に答える
9
私はAngularを初めて使用しますが、これで問題を解決できることがわかりました:
<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>
これにより、変数に基づいて条件付きでクラスが適用されます。デフォルトとしてicon-downloadから始まり、ng-class を使用して、showDetailsifのステータスを確認し、class icon-uploadtrue/falseを適用します。その素晴らしい作品。
それが役に立てば幸い。
于 2013-07-24T14:57:33.520 に答える
4
部分的
<div class="col-md-4 text-right">
<a ng-class="campaign_range === 'thismonth' ? 'btn btn-blue' : 'btn btn-link'" href="#" ng-click='change_range("thismonth")'>This Month</a>
<a ng-class="campaign_range === 'all' ? 'btn btn-blue' : 'btn btn-link'" href="#" ng-click='change_range("all")'>All Time</a>
</div>
コントローラ
$scope.campaign_range = "all";
$scope.change_range = function(range) {
if (range === "all")
{
$scope.campaign_range = "all"
}
else
{
$scope.campaign_range = "thismonth"
}
};
于 2015-05-03T09:30:41.843 に答える
4
trueまたはfalseを返す関数を使用して、コントローラーの状態を確認することをお勧めします。
<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>
コントローラーで状態を確認します
$scope.getTodayForHighLight = function(today, date){
return (today == date);
}
于 2015-06-06T10:05:25.943 に答える
3
多くの検索の後、今日私のために働いたものを追加するだけです...
<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">
これがあなたの成功した開発に役立つことを願っています。
=)
于 2014-09-24T20:55:15.520 に答える
3
これを確認してください。
悪名高いAngularJSif|elseステートメント!!!
Angularjs を使い始めたとき、if/else ステートメントが見つからないことに少し驚きました。
そのため、プロジェクトに取り組んでいましたが、if/else ステートメントを使用すると、読み込み中に条件が表示されることに気付きました。ng-cloak を使用してこれを修正できます。
<div class="ng-cloak">
<p ng-show="statement">Show this line</span>
<p ng-hide="statement">Show this line instead</span>
</div>
.ng-cloak { display: none }
ありがとうございます
于 2013-04-09T21:00:55.870 に答える