Как назначить ширину динамического диапазона

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 другие угловые встроенные директивы, например

ng-style="{color: myColor}"

ngStyle нужен Expression которого Evals к объекту, ключи которого являются именами стилей 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

необходимости использования нг-стиль. Вот ваш пример в 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>