एनजी-शैली का उपयोग करके div चौड़ाई कैसे सेट करें

Question

मैं डायनामिक तरीके से डिव चौड़ाई सेट करने की कोशिश कर रहा हूं 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";

});

मैं क्या खो रहा हूँ?

फिडल लिंक: फिडल

Answer 1

का सिंटैक्स ng-styleकाफी नहीं है। यह केवल एक स्ट्रिंग के बजाय कुंजियों का एक शब्दकोष (गुण नाम) और मान (जो उन्हें लेना चाहिए, एक खाली स्ट्रिंग उन्हें अनसेट करता है) स्वीकार करता है। मुझे लगता है कि तुम क्या चाहते हो:

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

और फिर अपने नियंत्रक में:

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

यह टेम्प्लेट और नियंत्रक के पृथक्करण को संरक्षित करता है: नियंत्रक सिमेंटिक मूल्यों को रखता है जबकि टेम्प्लेट उन्हें सही विशेषता नाम पर मैप करता है।

Comments

डिक्शनरी ऑफ़ कीज़ .... ने मुझे मुसकरा दिया। बस एक और जेएस वस्तु के लिए एक शानदार विवरण क्या है।

— स्टीव के

Answer 2

ngStyle एक मानचित्र स्वीकार करता है:

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

Fiddle