2

angularJsでクラス名で要素をカウントするにはどうすればよいですか?

私は試してみました：

$scope.numItems = function() {
    $window.document.getElementsByClassName("yellow").length;
};

プランク: http://plnkr.co/edit/ndCqpZaALfOEiYieepcn?p=preview

4

1 に答える 1

7

関数を正しく定義しましたが、結果の表示に誤りがありました。

<p>{{numItems()}}</p>

...プレーンの代わりに{{numItems}}。関数自体ではなく、関数の戻り値を表示したい(意味がない) ため、関数呼び出しの標準の JS 構文に従う必要があります。

この式にも引数を送信できることに注意してください。たとえば、このメソッドを次のように書き直しました。

$scope.numItems = function(className) {
   return $window.document.getElementsByClassName(className).length;
};

...そして、テンプレートに 3 つの異なるカウンターを作成しました。

  <p>Yellow: {{numItems('yellow')}}</p>
  <p>Green: {{numItems('green')}}</p>
  <p>Red: {{numItems('red')}}</p>

プランカーデモ。

しかし、ここに本当の問題numItems()があります。あるビューで使用される結果は、DOM トラバーサルに基づいています。つまり、別のビューに基づいています。それは一般的に Angular の哲学に反するだけでなく、壊れる傾向があります。実際、1.3.0 と同じくらい古いこの commit以来、壊れています。

これで、ngAnimate モジュールが使用されていない場合でも$rootScope、ダイジェストの最中であれば、クラスの操作が延期されます。これにより、IE11 などのブラウザーでのジャンクを減らすことができます。

ほら、クラスの変更はダイジェスト後に適用されます-そしてそれは評価された後です.numItems()

手っ取り早い解決策は、numItems のセレクターに別の属性を使用することです (このplunkerでは、それはdata-colorです)。しかし、私は強くお勧めします。適切なアプローチは、numItems()コンポーネントを使用してレンダリングされたデータをモデルに追加することです。例えば：

app.js

// ...
var colorScheme = {
  'toggle':  {true: 'yellow', false: 'red'},
  'toggle2': {true: 'green', false: 'red'},
  'toggle3': {true: 'green', false: 'red'},
  'toggle4': {true: 'red', false: 'green'}
};

$scope.getColor = function getColor(param) {
  return colorScheme[param][$scope[param]];
};

$scope.countColor = function(color) {
  return Object.keys(colorScheme).filter(function(key) {
    return colorScheme[key][$scope[key]] === color;
  }).length;
};

index.html

<p ng-class="getColor('toggle')">{{name}}</p>
<!-- ... -->

<p ng-repeat="color in ['Yellow', 'Green', 'Red']" 
   ng-bind="color + ' ' + countColor(color.toLowerCase())">

デモ。

于 2013-09-16T01:12:54.937 に答える