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


79

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

답변:


139

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

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

그런 다음 컨트롤러에서 :

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

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


11
키 사전 .... 날 웃게 만들었 어. 또 다른 JS 객체에 대한 설득력있는 설명입니다.
Steve K

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.