在函数派生表达式上使用带有if语句的ng-class而不是ng-model
Using ng-class with if statement on function derived expression instead of ng-model
我正在尝试使用ng-class应用条件css,但似乎它不适用于从函数派生的表达式,如
$scope.totalFeatureLength = function() {
return $scope.items.reduce(function(current, item) { return current + item.Fiscal_Year_1; }, 0);
};
HTML <div class="progress">
<div ng-class="{'progress-bar progress-bar-info': {{totalFeatureLength()number:2}}<10, 'progress-bar progress-bar-danger': {{totalFeatureLength()|number:2}}>=10}" role="progressbar" aria-valuenow="{{totalFeatureLength()| number:2}}%" aria-valuemin="0" aria-valuemax="100" style="width: {{totalFeatureLength()| number:2}}%;">
{{totalFeatureLength()| number:2}}%
</div>
</div>
当它直接用于ng-model项时工作良好,但它不能用于from functions的表达式。我需要创建一个指令,还是可以使用这个现有的方法?
ng-class已经接受了一个表达式,所以你不需要/想要双花括号,可以直接使用JS。
例如:
<div ng-class="{'progress-bar progress-bar-info': totalFeatureLength() < 10}">
这里有一个例子
相关文章:
- 每个点击的项目上的“ng-class”
- 在所选元素的父元素上添加“ng-class”
- ng-class 在 angularJs 中由 ng-include 包含的文件内不起作用
- Angular ng-class没有更新
- ng-class not working properly in 'AngularJs'
- 如何访问Angular JS模板指令中设置的值,如“ng class?”
- 如何在AngularJS中使用ng-class仅在特定页面上向元素添加类
- ng-class 的函数表达式在 ng-click 时被调用
- Angular ng-class 呈现正确的类,但 Karma 显示错误
- 使用 class、ng-show 和 ng-class 执行 AngularJS 动画
- Agularjs ng-class:如果其他条件变为真,则删除类
- ng-class 用于突出显示基于 ng 重复的活动菜单项.AngularJS.
- Angular js ng-class 不起作用
- ng-class $event.stopPropagation() 在 Angular 中对父级不起作用
- AngularJS ng-class JavaScript animations不会触发
- 如何使用 ng-class 在值计算结果为零时删除类
- 在 Angular JS 中使用 ng-class
- 使用 angularjs ng-class 更改每张卡片的颜色
- 如何在 Angular 1.4 及更高版本中使用 ng-class 和 ng-options
- 在函数派生表达式上使用带有if语句的ng-class而不是ng-model