Question

我有一个CSS属性值对，如下所示：

style="width:60%"

这很好用。但是当我尝试在ng-repeat内部连接这样的东西时：

               <tbody ng-show="!vm.loading">
                    <tr ng-repeat="item in vm.currentBatches.items | orderBy: vm.sortBy.current_batch">


                        <td class="table-text" ng-show="!item.showRefreshForApiLoading">


                                <div class="progress progress-medium" ng-show="item.batch_status==='in progress'">
                                    <div class="progress-inner">
                                        <div class="segment" style="'width: "+item.succeeded_time_pct+"%">
                                        <div class="bar status-ok bar-striped"></div>
                                        </div>
                                    </div>
                                </div>
                                <span class="progress-label status-ok" ng-show="item.batch_status==='in progress' && item.progressFlag !== 'NA'">In Progress</span>

为什么这不起作用？

style="width: "+item.succeeded_time_pct+"%">

这表示CSS property value expected，

我做错了什么？

Answer 1

您可以使用以下方法修复它：

<div class="segment" ng-style="{'width': item.succeeded_time_pct + '%' }">

ng-style是一个指令，其中angular提供动态应用样式属性

参考：https://docs.angularjs.org/api/ng/directive/ngClass

Answer 2

您也可以尝试：

<div class="segment" style="width: {{item.succeeded_time_pct}}%">

但我推荐使用ng-class或ng-style，就像其他人一样。

如何在Angular模板中的CSS属性中连接字符串值

2 个答案: