如何在ng-class中包含多个案例？ [英] How do I include multiple cases in ng-class?
问题描述
我有一个我想重复使用的引导进度条，具体取决于正在执行的进程的哪个阶段。
这里有两个阶段：
1：向数据库添加文档行
2：对该数据执行一些基于Web的任务
我有一个包含一些ng-repeat行的表。每行代表一个文档。只有表格中的顶级项目才会进展。如果它处于第1阶段，那么它应该是进度条警告（黄色）;第2阶段应该是进度条成功（绿色），表格中的其他项目应该是进度条默认（蓝色）。
这是标记进度条：
Hi,
I have a bootstrap progress bar that I want to reuse depending on what stage of the process is being performed.
There are two stages here:
1: Adding document rows to the database
2: Performing some web-based tasks on that data
I have a table with some ng-repeat rows. Each row represents a single document. Only the top item in the table will be progressed. If it is at stage 1 then it should be progress-bar-warning (yellow); stage 2 should be progress-bar-success (green) and the other items in the table should be progress-bar-default (blue).
Here is the markup for the progress bar:
<div class="progress progress-striped"
ng-class="{active: $index==0}"
style="margin-bottom: 0;">
<div class="progress-bar"
ng-class="{$index==0 ? (item.type=='import' ? 'progress-bar-warning' : 'progress-bar-success') : 'progress-bar-default'}"
role="progressbar"
ng-style="{ 'width': item.progress + '%' }">{{item.rowsdone}}
</div>
</div>
我确实找到了一些关于此的信息：包装器中的ng-class工作正常但更复杂的格式却没有。我发现的每个例子都说这是做到这一点的方法，但我想知道角度是否有变化？我也找不到任何相关信息。
任何人都可以帮忙处理这种复杂的案例格式吗？
谢谢^ _ ^
Andy
AngularJS v1.4.5
错误信息：
I did find some information about this: The ng-class in the wrapper works fine but the more complex format does not. Every example I found says that this is the way to do it, but I wonder if angular has changed? I couldn't find any info on this either.
Can anyone help with this complex case format?
Thanks ^_^
Andy
AngularJS v1.4.5
Error Message:
Error: [$parse:syntax] http://errors.angularjs.org/1.4.5/$parse/syntax?p0=%3D%3D&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=8&p3=%7BNaNndex%3D%3D0%20%3F%20(item.type%3D%3D'import'%20%3F%20'progress-bar-warning'%20%3A%20progress-bar-success)%20%3A%20'progress-bar-default'%7D&p4=%3D%3D0%20%3F%20(item.type%3D%3D'import'%20%3F%20'progress-bar-warning'%20%3A%20progress-bar-success)%20%3A%20'progress-bar-default'%7D
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:6:416
at Object.r.throwError (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:209:32)
at Object.r.consume (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:209:207)
at Object.r.object (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:208:370)
at Object.r.primary (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:205:335)
at Object.r.unary (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:205:174)
at Object.r.multiplicative (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:204:434)
at Object.r.additive (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:204:261)
at Object.r.relational (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:204:96)
更新：根据评论的要求：
我的重复标记：
UPDATE: as requested from the comments:
My ng-repeat markup:
<tr ng-repeat="(name, item) in converter">
<td>{{ name }}</td>
<td ng-show="uploader.isHTML5" nowrap>{{ item.rows }} rows </td>
<td ng-show="uploader.isHTML5">
<div class="progress progress-striped" ng-class="{active: $index==0}" style="margin-removed 0;">
<div class="progress-bar" ng-class="{ $index>0 ? 'progress-bar-default' : (item.type=='import' ? 'progress-bar-warning' : 'progress-bar-success') }" role="progressbar" ng-style="{ 'width': item.progress + '%' }">{{item.rowsdone}}</div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess"></span>
<span ng-show="item.isCancel"></span>
<span ng-show="item.isError"></span>
</td>
<td nowrap>
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="$index!=0">
<span class="glyphicon glyphicon-ban-circle"></span>Cancel
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span>Remove
</button>
</td>
</tr>
转换器中的项目如下所示：
The item in converter looks like this:
var Item = function (rows, rowsdone, progress, type) {
this.rows = rows;
this.rowsdone = rowsdone;
this.progress = progress;
this.type = type;
};
更新2：根据评论中的要求：
这是转换器。除了代表转换器进度服务器端之外它没有做任何事情：
UPDATE 2: as requested in the comments:
This is Converter. It doesn't do anything but represent the "converter" progress server side:
//angular module
//...
var converter = $scope.converter = {};
//signalr client function
$scope.fileAddedClient = function (name, rows, type) {
converter[name] = new Item(rows, 0, 0, type);
$scope.$apply();
}
$scope.rowAddedClient = function (name, rows, rowsDone, type) {
var progress = 100 * (rowsDone / rows);
converter[name] = new Item(rows, rowsDone, progress, type);
$scope.$apply();
}
//...
推荐答案
index == 0}
style = margin-bottom：0; >
< div class = progress-bar
ng-class = {
index==0}" style="margin-bottom: 0;"> <div class="progress-bar" ng-class="{
index == 0？ （item.type =='import'？'progress-bar-warning'：'progress-bar-success'）：'progress-bar-default'}
role = progressbar
ng - style = {'width'：item.progress +'％'} > {{item.rowsdone}}
< / div >
< ; / div >
index==0 ? (item.type=='import' ? 'progress-bar-warning' : 'progress-bar-success') : 'progress-bar-default'}" role="progressbar" ng-style="{ 'width': item.progress + '%' }">{{item.rowsdone}} </div> </div>
我确实找到了一些关于此的信息：包装器中的ng-class工作正常但更复杂的格式却没有。我发现的每个例子都说这是做到这一点的方法，但我想知道角度是否有变化？我也找不到任何相关信息。
任何人都可以帮忙处理这种复杂的案例格式吗？
谢谢^ _ ^
Andy
AngularJS v1.4.5
错误信息：
I did find some information about this: The ng-class in the wrapper works fine but the more complex format does not. Every example I found says that this is the way to do it, but I wonder if angular has changed? I couldn't find any info on this either.
Can anyone help with this complex case format?
Thanks ^_^
Andy
AngularJS v1.4.5
Error Message:
Error:
parse：syntax] http://errors.angularjs.org/1.4.5/
parse:syntax] http://errors.angularjs.org/1.4.5/
这篇关于如何在ng-class中包含多个案例？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
