Question

我是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%"}
]

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

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>

Answer 2

您需要使用ng风格。这是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>

如何动态分配宽度

2 个答案: