AngularJSでオブジェクトプロパティを幅として動的に使用する方法（ng-repeatで）

Question

ng-style（shape.radius || shape.length）で読み込むオブジェクトのプロパティを取得できません。私は現時点では1人を働かせることさえできませんが、声明を含むようにしたいと思います。私のNGクラスに似ています。

図形を生成するボタンがあり、その図形はランダムなサイズで作成されています。ここに私のコードは次のとおりです。

HTML：

<div ng-controller='ShapeController as sc'> 
    <div> 
    <p><input type="submit" value="Generate Random Shapes" ng-click="sc.generateShapes()"/></p> 
    <div ng-repeat="shape in sc.shapes"> 
     <div class="shape" ng-class="{circle: shape.radius, square: shape.length}" ng-style="{'width': shape.length}"></div> 
    </div> 
    </div> 
</div> 

スクリプト：

var app = angular.module('app', []); 

app.controller('ShapeController', function(){ 
    var vm = this; 
    vm.shapes = []; 
    vm.randomShapes = []; 
    vm.width = 30; 

    function createCircle(radius) { 
    let circle = new Circle(radius); 
    vm.shapes.push(circle); 
    } // end createCircle 

    function createSquare(length) { 
    let square = new Square(length); 
    vm.shapes.push(square); 
    } // end createSquare 

    vm.generateShapes = function() { 
    let times = 50 
    for (let i = 0; i < times; i++) { 
     createCircle(getRandomNumber()); 
    } 
    for (let i = 0; i < times; i++) { 
     createSquare(getRandomNumber()); 
    } 
    sort(vm.shapes); 
    console.log(vm.shapes); 
    }; // end generateShapes 

}); // end controller 


function sort(arr) { 
    arr.sort(function(a,b){ 
    return b.getArea() - a.getArea(); 
    }); 
} // end sort function 

function getRandomNumber() { 
    return Math.random() * (100-1) + 1; 
} 

Answer 1

widthは（emのようないくつかのユニット、ptなど）pxまたは%

ng-style="{'width': shape.length + 'px'}" 

のいずれかでなければなりません