AngularJS ng-classはネストされたキーと値のペアが存在するかどうかをチェックし、クラスとして値を追加します

したがって、私はこのネストされた配列を持っています。私は、キーと値のペアが存在するかどうかをチェックし、存在する場合は、該当するクラスを問題の要素に追加します。AngularJS ng-classはネストされたキーと値のペアが存在するかどうかをチェックし、クラスとして値を追加します

私は表現のバリエーションを使用しようとしている：私の式はもう少し複雑であり、私はそれだけでそのように使用することが多すぎるのです怖いしかし

ng-class="{ 'active' : data.indexOf('"name":"john"') >= 0 }"

を。 3つ以上のレベルのネストされた引用符を使用するという問題もあります。ここで

は、私が働いているものに類似した構造を持つ配列を使用したバイオリンです：

http://jsfiddle.net/5tvmL2Lg/2/

はHTML：

<body ng-app="myModule"> 
<div ng-controller="myController"> 
    <div ng-repeat="hero in heroes"> 
    <div ng-class="{ 'weight-\'hero.stats.indexOf('\'type\':\'weight\'').value\'' : hero.stats.indexOf('\'type\':\'weight\'') >= 0 }"> 
      hello 
    </div> 
    </div> 
</div> 
</body>

JS：では

var myModule = angular.module('myModule', []); 

myModule.controller('myController', ['$scope', function($scope) { 

    $scope.heroes = [{ 
     "firstname" : "clark", 
     "lastname" : "kent", 
     "stats" : [ 
     { 
     "type" : "height", 
     "value" : "6'2" 
     }, 
     { 
     "type" : "weight", 
     "value" : 220 
     }, 
     { 
     "type" : "hair", 
     "value" : "brown" 
     } 
     ]}, 
     { 
     "firstname" : "bruce", 
     "lastname" : "wayne", 
     "stats" : [ 
     { 
     "type" : "height", 
     "value" : "6'1" 
     }, 
     { 
     "type" : "hair", 
     "value" : "black" 
     } 
     ]}, 
     { 
     "firstname" : "peter", 
     "lastname" : "parker", 
     "stats" : [ 
     { 
     "type" : "height", 
     "value" : "5'11" 
     }, 
     { 
     "type" : "weight", 
     "value" : 180 
     }, 
     { 
     "type" : "hair", 
     "value" : "auburn" 
     } 
     ]}]; 

}]);

最終的には、 "c"クラスに "weight-220"というクラスを追加することが目標ですlark kent "div、" bruce wayne "divのクラスなし、ピーターパークパーツの" weight-180 "

は、私はあなたがあなたのng-classにすべてのコードのロジックを追加する必要はありません:)

出典

2016-08-04 jeanmarc

...私の問題が畳み込まれているが、任意の助けをいただければ幸いです知っています。、お使いのコントローラで

<div ng-repeat="hero in heroes"> 
    <div ng-class="ClassBuilder(hero)"> 
     hello 
    </div> 
</div>

この機能を追加します：あなたは、文字列を返す関数を使用して（深くネストされたオブジェクトをチェックするために）それをより複雑にすることができます

$scope.ClassBuilder = function(hero) { 
    for (var i = 0; i < hero.stats.length; i++) { 
     if (hero.stats[i].type == "weight") { 
      return "weight-" + hero.stats[i].value; 
     } 
    } 
}

これが受け取ります各ng-repeatのheroオブジェクトとweightタイプが存在するかどうかを確認します。その場合は、対応するvalueを使用して、要求されたフォーマットの文字列を返します（例： "weight-220"）。それ以外の場合は、何も返されず、そのクラスには何も適用されません。<div>

出典

2016-08-04 22:43:28

まあ、博士クール、これはまさに私が意図していることをありがとう、ありがとう、実際には思ったより簡単です...私は今、愚かな気がしますが、とにかくあなたの助けてくれてありがとう！ – jeanmarc

btw私はあなたに重量変数が何をしているのか尋ねてもいいですか？ – jeanmarc

ああ、おっと...私はこれをやるつもりでした。「戻ってくる」「体重+体重」ですが、それを忘れて、ちょうどその価値自体を返しました。 '' weight = ''行を削除することができます。 –

AngularJS ng-classはネストされたキーと値のペアが存在するかどうかをチェックし、クラスとして値を追加します

答えて

関連する問題