css - angularjs if style




条件付きでクラスを適用する最善の方法は何ですか? (15)

部分的な

  <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"
        }
  };

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

私は現在、 liコードを(手作業で)複製し、 liタグの1つにクラスを追加し、 ng-showng-hideを使用して1つのインデックスのみをng-hideします。


ng-classを使用できない場合(SVGをスタイリングする場合など)、うまく動作する別のオプションがあります:

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

(私はあなたが最新の不安定なAngularでng-attrを使う必要があると思う、私は現在1.1.4にいる)


http://www.codinginsight.com/angularjs-if-else-statement/確認してhttp://www.codinginsight.com/angularjs-if-else-statement/

悪名高いangjs if 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 }

おかげでamadou


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})} />

angle pre v1.1.5を使用している場合(つまり、3項演算子を使用していない場合両方の条件で同じように値を設定したい場合は、次のようにすることができます。

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

これはおそらく忘却に下降するでしょうが、1.1.5の三項演算子を使ってテーブル内の行が最初、中、最後のいずれであるかによってクラスを切り替える方法は次のとおりです。

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

これらの回答のいくつかは時代遅れになっているので、これに追加します。 ここで私はそれを行う方法です:

<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://jsfiddle.net/tTfWM/

参照: ng-class : ng-class : ng-class


それは正しく動作します;)

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

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

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

あなたのコントローラーで状態をチェックする

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

バイナリ評価を超え、コントローラから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>

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

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

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

詳細情報


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

<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のフルコードページを参照できます


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

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

注:古いバージョンのAngularを使用している場合は、これを代わりに使用する必要があります。

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

私はAngularの新人ですが、私の問題を解決するためにこれを見つけました:

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

これは、条件付きでvarに基づくクラスを適用します。 それはデフォルトとしてicon-downloadから始まり、ng-classを使用して、 true/falseならshowDetailsの状態をチェックし、クラスicon-uploadを適用します 。 その素晴らしい仕事。

それが役に立てば幸い。


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

  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>




angularjs