[css] ng 스타일을 사용하여 div 너비를 설정하는 방법

Program / 글쓴이

div 너비를 동적으로 설정하려고합니다. ng-style 하지만 스타일을 적용하지 않습니다. 다음은 코드입니다.

<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";

});

내가 무엇을 놓치고 있습니까?

Fiddle 링크 : Fiddle

답변

의 구문 ng-style은 그렇지 않습니다. 그것은 단지 문자열이 아닌 키 (속성 이름)와 값 (그들이 가져야하는 값, 빈 문자열이 설정을 해제 함 ) 의 사전을받습니다 . 나는 당신이 원하는 것은 이것이라고 생각합니다.

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

그런 다음 컨트롤러에서 :

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

이는 템플릿과 컨트롤러의 분리를 유지합니다. 컨트롤러는 의미 론적 값을 보유하고 템플릿은 올바른 속성 이름에 매핑합니다.

답변

ngStyle 지도 허용 :

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

Fiddle

답변