javascript - 如何动态分配跨度的宽度

Question

我是 html 和 angularjs 的新手。这里我试图分配跨度宽度 动态地从 Angular 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%"}
]

我知道这不是写的，但我不知道.. 提前致谢

Answer 1

您可以使用ngStyle例如，与其他 Angular 内置指令一样

ng-style="{color: myColor}"

ngStyle 需要 Expression它评估为一个对象，其键是 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>