在angularjs中计算ng-if true语句
Count ng-if true statements in angularjs?
我有一个页面,其中显示不同的数据与ng-if,我需要显示其中有多少是真实的在同一页面上。就是这个数字。HTML是复杂的,但我做了一个更简单的版本来理解事情是如何工作的。下面是HTML的样子,数据也在页面上被操作,所以ng-if值在呈现之后可以改变,因此页面上的计数也应该随之改变。
<div ng-if="abc">
some data 1
</div>
<div ng-if="!abc">
some data 2
</div>
<div ng-if="xyz">
some data 3
</div>
<div ng-if="abc">
some data 4
</div>
<div ng-if="!xyz">
some data 5
</div>
我也做了一个计划。http://plnkr.co/edit/5wdiSLhbHpOPJGjRn47L?p=preview
谢谢。
一个纯JavaScript的解决方案可以是添加一个类(或属性)到具有ng-if
条件的HTML元素,然后使用document.getElementsByClassName('class-name').length
来获得具有ng-if
条件为真元素的数量。
例子:
<div class="sample-class" ng-if="abc">
some data 1
</div>
<div class="sample-class" ng-if="!abc">
some data 2
</div>
<div class="sample-class" ng-if="xyz">
some data 3
</div>
<div class="sample-class" ng-if="abc">
some data 4
</div>
<div class="sample-class" ng-if="!xyz">
some data 5
</div>
<div>Total count is: {{getCount(); totalCount}}</div>
<script type="text/javascript">
angular.module('app', [])
.controller('ctrl', function($scope, $timeout) {
$scope.totalCount = 0;
$scope.getCount = function(){
$timeout(function(){
$scope.totalCount = document.getElementsByClassName('sample-class').length;
});
};
});
</script>
相关文章:
- 如果语句为true,则对一个或多个ng进行角度检查
- js事件,用于函数内部的when语句变为true
- 阻止表单提交 javascript 为什么有一个明显的错误语句返回 true
- 如何停止和if语句如果另一个if语句为true
- Javascript验证不起作用——只要一个if语句为true,它就会停止所有if语句
- 为什么 true == JS中的“true”语句返回false
- if 语句的条件应该等于 true,但事实并非如此
- 当语句变为 true 时运行函数
- 是否可以仅在 if 语句返回 true 时才调用函数
- 如果if语句中的Javascript函数应该为true,则该函数返回false
- Javascript OR语句始终为true
- 为什么JavaScript在比较一个变量和两个true语句时返回false
- 变量=true,即使if语句为false
- 使用javascript Truthy和Falsy Value VS'检查If语句是否为true或false==
- if语句的条件总是求值为true
- Javascript”;if语句“;和嵌入式ruby(ruby变量始终为true)
- 如果comparison(if语句)比较未定义的值,则返回true
- 无论传入什么字符串,If语句都始终为true
- javascript中的if语句始终为true
- 在angularjs中计算ng-if true语句