angularJsでクラス名で要素をカウントするにはどうすればよいですか?
私は試してみました:
$scope.numItems = function() {
$window.document.getElementsByClassName("yellow").length;
};
angularJsでクラス名で要素をカウントするにはどうすればよいですか?
私は試してみました:
$scope.numItems = function() {
$window.document.getElementsByClassName("yellow").length;
};
関数を正しく定義しましたが、結果の表示に誤りがありました。
<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())">
デモ。