से छेड़छाड़ कोणीय साथ इनलाइन शैली आईई

Question

में काम नहीं करता मैं एक कोणीय नियंत्रक में एक समारोह की वापसी मूल्य के आधार पर एक div की स्थिति

निम्नलिखित फ़ायर्फ़ॉक्स में और क्रोम में लेकिन इंटरनेट में ठीक काम करता है स्थापित करने के लिए करना चाहता था एक्सप्लोरर {{position($index)}}% एक शाब्दिक स्ट्रिंग मान के रूप में व्याख्या की है और इसलिए कोई प्रभाव नहीं

<div ng-repeat="item in items" style="left:{{position($index)}}%"></div> 

है यहाँ मुद्दे का एक उदाहरण है:

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

app.controller('controller', function($scope) { 

    $scope.items=[1,2,3,4,5,6,7,8,9,10]; 

    $scope.position=function(i){ 
     var percent =[5,10,15,20,25,30,35,40,45,50,55,60,65,70]; 
     return percent[i+1]; 
    } 
}); 

और यहां Fiddle प्रदर्शित करने के लिए

क्या किसी को सुधारने के सुझाव हैं?

Answer 1

आप शैली के बजाय ng-style का उपयोग करना चाहिए, अन्यथा IE की तरह कुछ ब्राउज़रों अमान्य शैली विशेषता मान ({{}} आदि की उपस्थिति में यह अवैध बनाता है) से पहले भी कोणीय यह रेंडर करने के लिए एक मौका है निकाल देंगे। जब आप ng-style कोणीय का उपयोग करते हैं तो अभिव्यक्ति की गणना की जाएगी और इसमें इनलाइन शैली विशेषताओं को जोड़ दिया जाएगा।

<div ng-repeat="item in items" ng-style="{left: position($index) + '%'}"></div> 

आप वैसे भी स्थिति में आप के रूप में अच्छी position से % जोड़ने और इसे भेज सकते हैं गणना कर रहे हैं के बाद से। यह भी याद रखें कि एनजी-दोहराने में एक फ़ंक्शन को कॉल करने से प्रत्येक पाचन चक्र को फ़ंक्शन का आह्वान किया जाएगा, ताकि आप सावधान रहना चाहें कि विधि के अंदर बहुत अधिक गहन संचालन न करें।

<div ng-repeat="item in items" ng-style="{left: position($index)}">{{item}}</div> 

और वापसी

return percent[i+1] + "%"; 

Demo

Answer 2

हाँ, ng-style इस समस्या को हल करने के लिए काम करेंगे। आप ternary operator का उपयोग कर सशर्त शैली का उपयोग कर सकते हैं।

HTML:

<div ng-style="{'display':showInfo?'block':'none'}"> 
</div> 

Answer 3

तुम सिर्फ style="width:{{someScopeVar}}" की तरह सामान्य शैली विशेषता की तरह कोणीय बाध्यकारी अभिव्यक्ति {{}} उपयोग करना चाहते हैं, उपयोग ng-attr-style और यह पूरी तरह से आईई (और स्पष्ट रूप से अन्य होशियार वाले) काम करेंगे :)

मेरी jsFiddle जांचें ... कोणीय जेएस 1.4.8

के साथ जांच की गईयहाँ

मैं style, ng-style और ng-attr-style

HTML के उपयोग से पता चला है

<div ng-app="app"> 
    <div ng-controller="controller"> 

     <div style="background:{{bgColor}}"> 
      This will NOT get colored in IE 
     </div> 

     <div ng-attr-style="background:{{bgColor}}"> 
      But this WILL get colored in IE 
     </div> 

     <div ng-style="styleObject"> 
      And so is this... as this uses a json object and gives that to ng-style 
     </div> 

    </div> 
</div> 

जे एस

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

app.controller('controller', function($scope) { 

    $scope.bgColor = "yellow";   
    $scope.styleObject = {"background": "yellow"}; 
});