Angular JS'de CSS stili özelliğini dinamik olarak uygulama

Bu basit bir problem olmalı ama bir çözüm bulamıyorum.

Aşağıdaki işaretlemem var:

<div style="width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;"></div>

Arka plan renginin kapsama bağlanmasına ihtiyacım var, bu yüzden şunu denedim:

<div style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:{{data.backgroundCol}};}"></div>

Bu işe yaramadı, bu yüzden biraz araştırma yaptım ve buldum ng-style, ama bu işe yaramadı, bu yüzden dinamik kısmı çıkarmaya ve sadece stili kodlamaya çalıştım ng-style, şöyle ...

<div ng-style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;}"></div>

ve bu bile çalışmıyor. Nasıl ng-styleçalıştığını yanlış mı anlıyorum ? {{data.backgroundCol}}Düz stil niteliği koymanın ve değeri eklemesini sağlamanın bir yolu var mı ?

ngStyle yönergesi,dinamik olarak bir HTML öğesi üzerinde CSS stiliniayarlamanıza izin verir.

Anahtarları CSS stil adları olan bir nesneye dönüşen ifade ve değerleri, bu CSS anahtarları için karşılık gelen değerlerdir. Bazı CSS stil adları bir nesne için geçerli anahtarlar olmadığından, bunların tırnak içine alınması gerekir.

ng-style="{color: myColor}"

Kodunuz şöyle olacaktır:

<div ng-style="{'width':'20px', 'height':'20px', 'margin-top':'10px', 'border':'solid 1px black', 'background-color':'#ff0000'}"></div>

Kapsam değişkenlerini kullanmak istiyorsanız:

<div ng-style="{'background-color': data.backgroundCol}"></div>

İşte kemanla ilgili bir örnek ngStyleve kodun altında çalışan kod parçacığı ile:

angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
  $scope.items = [{
      name: 'Misko',
      title: 'Angular creator'
    }, {
      name: 'Igor',
      title: 'Meetup master'
    }, {
      name: 'Vojta',
      title: 'All-around superhero'
    }

  ];
});

.pending-delete {
  background-color: pink
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller='MyCtrl' ng-style="{color: myColor}">

  <input type="text" ng-model="myColor" placeholder="enter a color name">

  <div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
    name: {{item.name}}, {{item.title}}
    <input type="checkbox" ng-model="item.checked" />
    <span ng-show="item.checked"/><span>(will be deleted)</span>
  </div>
  <p>
    <div ng-hide="myColor== 'red'">I will hide if the color is set to 'red'.</div>
</div>

En kolay yol, stil için bir işlev çağırmak ve işlevin doğru stili döndürmesini sağlamaktır.

<div style="{{functionThatReturnsStyle()}}"></div>

Ve kontrol cihazınızda:

$scope.functionThatReturnsStyle = function() {
  var style1 = "width: 300px";
  var style2 = "width: 200px";
  if(condition1)
     return style1;
  if(condition2)
     return style2;
}

Doğrudan ngStyle belgelerden :

Anahtarları CSS stil adları olan bir nesneye dönüşen ifade ve değerleri, bu CSS anahtarları için karşılık gelen değerlerdir.

<div ng-style="{'width': '20px', 'height': '20px', ...}"></div>

Yani bunu yapabilirsin:

<div ng-style="{'background-color': data.backgroundCol}"></div>

Bu yardımcı olur umarım!

Genel bir notta, ng-if ve ng-stilinin, arka plan görüntüsündeki değişiklikle birlikte koşullu değişiklikleri birleştiren bir kombinasyonunu kullanabilirsiniz.

<span ng-if="selectedItem==item.id"
      ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_active.png)',
                'background-size':'52px 57px',
                'padding-top':'70px',
                'background-repeat':'no-repeat',
                'background-position': 'center'}">
 </span>
 <span ng-if="selectedItem!=item.id"
       ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_deactivated.png)',
                'background-size':'52px 57px',
                'padding-top':'70px',
                'background-repeat':'no-repeat',
                'background-position': 'center'}">
 </span>

Normal stylebir ng-styleözniteliğe dönüşmeyecek stilleri ve bir özniteliğe koşullu / kapsam stillerini koymanız gerektiğini söyleyebilirim . Ayrıca dize anahtarları gerekli değildir. Kısa çizgi ile ayrılmış CSS anahtarları için deve harfini kullanın.

<div ng-style="{backgroundColor: data.backgroundCol}" style="width:20px; height:20px; margin-top:10px; border:solid 1px black;"></div>

Basitçe şunu yapın:

<div ng-style="{'background-color': '{{myColorVariable}}', height: '2rem'}"></div>