web-dev-qa-db-ja.com

クラスを条件付きで適用するための最善の方法は何ですか？

各要素のulとコントローラのliというプロパティでselectedIndexでレンダリングされる配列があるとしましょう。 AngularJSでインデックスliを持つクラスをselectedIndexに追加するための最善の方法は何でしょうか。

私は現在（手作業で）liコードを複製していて、クラスをliタグの1つに追加していて、ng-showとng-hideを使用してインデックスごとにliを1つだけ表示しています。

cssangularjs
1162
respectTheCode

私のように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クラスをControllerコードから除外することで、既存のCSSクラスを再利用できます。

1378
orcun

ng-class どちらかに評価されなければならない式をサポートします

  1. スペースで区切られたクラス名の文字列
  2. クラス名の配列
  3. ブール値へのクラス名のマップ/オブジェクト。

だから、フォーム3）を使用して、我々は単純に書くことができます

ng-class="{'selected': $index==selectedIndex}"

も参照してください。AngularJSでCSSスタイルを条件付きで適用するにはどうすればよいですか。 より広い答えのために。

更新 ：Angular 1.1.5では 三項演算子 のサポートが追加されました。

ng-class="($index==selectedIndex) ? 'selected' : ''"
434
Mark Rajcok

私の好きな方法は三項表現を使うことです。

ng-class="condition ? 'trueClass' : 'falseClass'"

注： /古いバージョンのAngularを使用している場合は、代わりにこれを使用してください。

ng-class="condition && 'trueClass' || 'falseClass'"
158
skmvasu

これらの答えのいくつかは時代遅れに見えるので、私はこれに付け加えます。これが私のやり方です。

<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": ""}
    ]
}


参照： http://jsfiddle.net/tTfWM/ /

参照してください： http://docs.angularjs.org/api/ng.directive:ngClass

54
stefano

これはもっと簡単な解決策です：

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>
46
user81962

私は最近同様の問題に直面し、条件付きフィルタを作成することにしました。

  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>
26
Lèse majesté

バイナリ評価を超えて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>
21
Joe Steele

私が最近したのはこれをやっていたことです：

<input type="password"  placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">

isShowing値は私のコントローラー上にある値で、ボタンをクリックすると切り替わります。単一括弧の間の部分は私が私のcssファイルで作成したクラスです。

編集：また、私はcodeschool.comがAngularJSの上でグーグルによって後援される無料のコースを持っていることを加えたいと思います。何も支払う必要はありません。アカウントにサインアップして開始するだけです。皆さん、頑張ってください！

16
Pytth

三項演算子 が1.1.5の角度パーサに追加されました .

だからこれを行う最も簡単な方法は今です：

ng:class="($index==selectedIndex)? 'selected' : ''"
15
lionroots

関数を作ることができます 条件付きリターンクラスを管理するために

enter image description here 

<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で完全なコードページを参照することができます。例

11
Lewis Hai

これは魅力のように働きます。

<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>
9
Aliti

私はAngularを初めて使いましたが、私の問題を解決するためにこれを発見しました：

<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>

これはvarに基づいてクラスを条件付きで適用します。デフォルトでは icon-download で始まり、ng-classを使用して、showDetailsの状態を確認してtrue/falseを適用してクラス icon-upload を適用します。その作業は素晴らしいです。

それが役に立てば幸い。

9
Ravi Ram

これは忘却になるかもしれませんが、テーブル内の行が最初、中間、最後のいずれであるかに応じて、1.1.5の3項演算子を使用してクラスを切り替える方法は次のとおりです。

<span class="attribute-row" ng-class="(restaurant.Attributes.length === 1) || ($first ? 'attribute-first-row': false || $middle ? 'attribute-middle-row': false || $last ? 'attribute-last-row': false)">
</span>
5
sundar

これはng-classが使えないときにうまくいく別のオプションです（例えばSVGをスタイリングするとき）：

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

（ng-attr-を使うには、最新の不安定版Angularを使用する必要があると思います。現在は1.1.4です）

4
Ashley Davis

部分的

  <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"
        }
  };
4
Caner Çakmak

よく私はあなたが true または false を返す関数であなたのコントローラの状態をチェックすることをお勧めします。

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

そしてあなたのコントローラーで状態をチェックしてください

$scope.getTodayForHighLight = function(today, date){
return (today == date);
}
4
sheelpriy

これは私の作品の中で複数条件付きで判断しています：

<li ng-repeat='eOption in exam.examOptions' ng-class="exam.examTitle.ANSWER_COM==exam.examTitle.RIGHT_ANSWER?(eOption.eoSequence==exam.examTitle.ANSWER_COM?'right':''):eOption.eoSequence==exam.examTitle.ANSWER_COM?'wrong':eOption.eoSequence==exam.examTitle.RIGHT_ANSWER?'right':''">
  <strong>{{eOption.eoSequence}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <span ng-bind-html="eOption.eoName | to_trusted">2020 元</span>
</li>
4
H.jame

たくさんの検索の後、今日私のために働いていた何かを追加するだけで...

<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">

これがあなたの開発の成功に役立つことを願っています。

=）

文書化されていない式の構文：Great Website Link ... =）

3
Robert Green MBA

多くの要素に適用される共通のクラスがある場合は、ng-show/ng-hideのようにそのクラスを追加するカスタムディレクティブを作成できます。

クリックされた場合、このディレクティブはボタンにクラス 'active'を追加します

module.directive('ngActive',  ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngActive, function ngActiveWatchAction(value){
      $animate[value ? 'addClass' : 'removeClass'](element, 'active');
    });
  };
}]);

より詳しい情報

3
lars1595

角度 pre v1.1.5 （つまり3項演算子なし） を使用していても、 both 条件に値を設定する同等の方法が必要な場合は、次のようにします。

ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}"
3
Scotty.NET

を確認してください。http://www.codinginsight.com/angularjs-if-else-statement/

悪名高いのanglejsは、他にも言えることです!!! 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 }

ありがとうアマドゥ

3
Victor Cruz

this npmパッケージを使えます。それはすべてを処理し、変数または関数に基づく静的および条件付きクラスのためのオプションがあります。

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />
0
Tushar Sharma