web-dev-qa-db-ja.com

ngスタイルを使用してdiv幅を設定する方法

ng-styleを使用してdivの幅を動的に設定しようとしていますが、スタイルを適用していません。コードは次のとおりです。

<div style="width: 100%;" id="container_fform" ng-controller="custController">
    <div style="width: 250px;overflow: scroll;">
        <div ng-style="myStyle">&nbsp;</div>
    </div>
</div>

コントローラ：

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

var custController = MyApp.controller('custController', function ($scope) {
    $scope.myStyle="width:'900px';background:red";

});

私は何が欠けていますか？

フィドルリンク： フィドル

cssangularjsng-style
77
user3049403

ng-styleの構文はそうではありません。文字列だけでなく、キー（属性名）と値（必要な値、空の文字列nsetsそれら）の辞書を受け入れます。あなたが望むのはこれだと思います：

<div ng-style="{ 'width' : width, 'background' : bgColor }"></div>

そしてコントローラーで：

$scope.width = '900px';
$scope.bgColor = 'red';

これにより、テンプレートとコントローラーの分離が維持されます。コントローラーがセマンティック値を保持している間、テンプレートはそれらを正しい属性名にマップします。

135
musically_ut

ngStyleはマップを受け入れます。

$scope.myStyle = {
    "width" : "900px",
    "background" : "red"
};

Fiddle

35
AlwaysALearner