如何为跨度动态分配宽度

how to assign a width to span dynamically

本文关键字：动态分配      更新时间：2023-09-26

我是html和angularjs的新手。在这里我试图分配跨度宽度动态从角度 JS 响应 

<div class="statarea" ng-repeat="x in names">
     <div class="ratingarea">
        <div class="your-rating"><span style="width:"+{{ x.width }}+";" class="outer"></span>
        </div>
     <div class="clear"></div>
     </div>
</div>

在我的脚本中是

$http.get(url).success(function (response) {
  $scope.names = response;
});

我的回答是

[
 {"width":"78%"},
 {"width":"60%"},
 {"width":"50%"}
]

我知道这不是写，但我没有任何想法..提前致谢

您可以将ngStyle用作其他Angular内置指令，例如

ng-style="{color: myColor}"

ngStyle 需要一个表达式，该表达式评估到一个对象，其键是 CSS 样式名称，值是这些 CSS 键的对应值。因此，在您的情况下，您可以像

<div class="statarea" ng-repeat="x in names">
  <span ng-style="x" />
</div>

或者使用范围变量，例如

<div class="statarea" ng-repeat="x in names">
  <span ng-style="{'width': x.width}" />
</div>

你需要使用ng-style。这是您在 JSFiddle 中的示例http://jsfiddle.net/2raw9xhq/2/

<div ng-app="" ng-init="names = [{width:'78%', 'background-color': 'green'},{width:'60%', 'background-color': 'red'},{width:'50%','background-color': 'blue'}]">
<div class="statarea" ng-repeat="x in names">
     <div class="ratingarea">
        <div class="your-rating">
            <span ng-style="x" class="outer">{{x.width}}</span>
        </div>
    </div>
    <div class="clear"></div>
</div>

相关文章：