0

私はこのようにHTMLを設定しました

<div.... repeats in a loop... >
     ....
    <div ng-init="setWidthOfTimeLine(machine)" style="height:2px;" class="background-grey" >
        <div ng-style="setWidthOfTime"></div> 
    </div>
</div>

私のコントローラーには次のようなものがあります：

$scope.setWidthOfTimeLine = function(machine){

            var length = (machine.machineStatus).length - 1;
            var widthGreen = (length/8) *100;

                $scope.setWidthOfTime = {
                    background : "green",
                    width : widthGreen + '%',
                    height : '2px'
                }
                console.log($scope.setWidthOfTime);
        }

コンソールで適切な CSS が生成されていることはわかりますが。それはDOMに適用されていません。私が見逃しているアイデアはありますか?

コンソール：

Object {background: "green", width: "12.5%"} 
Object {background: "green", width: "25%"} 
Object {background: "green", width: "25%"} 
Object {background: "green", width: "37.5%"}

編集: setWidthOfTime 変数で高さを設定することで問題の半分を修正しましたが、現在はすべての幅の値に対して最後の値 (37.5%) を使用しています。

4

2 に答える 2

0

それがディレクティブmachineから得られるものであると仮定して、これを試してください：ngRepeat

<div.... ng-repeat="machine in $scope.machines"... >
     ....
    <div style="height:2px;" class="background-grey" >
        <div ng-style="setWidthOfTimeLine(machine)"></div> 
    </div>
</div>

コントローラ：

$scope.setWidthOfTimeLine = function(machine){
    var length = (machine.machineStatus).length - 1;
    var widthGreen = (length/8) *100;
    var widthOfTime = {
        background : "green",
        width : widthGreen + '%',
        height : '2px'
    }
    console.log(widthOfTime);
    return widthOfTime;
}
于 2014-10-02T21:38:51.253 に答える
0

ここで役立つ可能性のある2つのソリューション。

スコープのプロパティとして設定する代わりに、スコープのオブジェクトsetWidthOfTimeのプロパティに設定してみてください。この object を呼び出すとします。次に、最初にコントローラーで名前が付けられたプロパティで初期化します。この時点から、コントローラーまたはビューに関係なく、から読み取りまたは書き込みます。ここでのキーは、初期化されると決して上書きされません。(スコープの継承の仕組みに慣れることをお勧めします)foofoosetWidthOfTimefoo.setWidthOfTimefoo

propertyName としてngController の新しい構文を使用します(AngularJS の新しいバージョンでのみ使用可能)。ng-controller="MyController as myctrl"そしてのようなものがありng-style="myctrl.setWidthOfTimeます。この新しい構文は初めて知ったもので、自分で使用したことはありませんが、読んでその有用性を確認しました。お使いの AngularJS バージョンで利用できる場合は、試してみてください。（参考）

于 2014-10-02T21:29:26.277 に答える