2

如何在angularJs中按类名计算元素？

我尝试过：

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

Plunkr：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;
};

...然后在模板中制作了三个不同的计数器：

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

Plunker 演示。

但真正的问题是：numItems()在一个 View 中使用的结果是基于 DOM 遍历的——换句话说，是基于另一个 View 的。这不仅与一般的 Angular 哲学背道而驰，而且往往会破裂。事实上，自从这次提交以来，它确实中断了，就像 1.3.0 一样古老：

现在，即使不使用 ngAnimate 模块，如果$rootScope它在摘要中，类操作也会被延迟。这有助于减少 IE11 等浏览器中的卡顿。

看，类的变化是在摘要之后应用的——这是在numItems()评估之后，因此@Thirumalaimurugan 提到的演示延迟。

一个快速而肮脏的解决方案是在 numItems 中为选择器使用另一个属性（在这个plunker中，它是data-color）。但我强烈建议你不要这样做。正确的方法是将通过numItems()-using 组件渲染的数据添加到模型中。例如：

应用程序.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;
};

索引.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 回答