Menerapkan atribut gaya CSS secara dinamis di Angular JS

Ini seharusnya masalah sederhana, tetapi saya tidak dapat menemukan solusi.

Saya memiliki markup berikut:

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

Saya membutuhkan warna latar belakang untuk terikat ke ruang lingkup, jadi saya mencoba ini:

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

Itu tidak berhasil, jadi saya melakukan beberapa penelitian dan menemukan ng-style, tetapi itu tidak berhasil, jadi saya mencoba mengeluarkan bagian dinamis dan hanya melakukan pengkodean gaya ng-style, seperti ini ...

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

dan itu bahkan tidak berhasil. Apakah saya salah paham tentang cara ng-stylekerjanya? Apakah ada cara untuk memasukkan {{data.backgroundCol}}atribut gaya biasa dan membuatnya memasukkan nilai?

Direktif ngStyle memungkinkan Anda untuk mengaturgaya CSS pada elemen HTML secara dinamis.

Ekspresi yang menunjukkan objek yang kuncinya adalah nama dan nilai gaya CSS adalah nilai yang sesuai untuk kunci CSS tersebut. Karena beberapa nama gaya CSS bukan kunci yang valid untuk suatu objek, mereka harus dikutip.

ng-style="{color: myColor}"

Kode Anda akan menjadi:

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

Jika Anda ingin menggunakan variabel lingkup:

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

Berikut contoh biola yang digunakan ngStyle, dan di bawah kode dengan cuplikan yang sedang berjalan:

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>

Cara termudah adalah memanggil fungsi untuk gaya, dan meminta fungsi mengembalikan gaya yang benar.

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

Dan di pengontrol Anda:

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

Langsung dari ngStyle dokumen :

Ekspresi yang menunjukkan objek yang kuncinya adalah nama dan nilai gaya CSS adalah nilai yang sesuai untuk kunci CSS tersebut.

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

Jadi Anda bisa melakukan ini:

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

Semoga ini membantu!

Pada catatan umum, Anda bisa menggunakan kombinasi ng-if dan ng-style yang menggabungkan perubahan bersyarat dengan perubahan pada gambar latar belakang.

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

Saya akan mengatakan bahwa Anda harus meletakkan gaya yang tidak akan berubah menjadi styleatribut biasa , dan gaya bersyarat / lingkup menjadi ng-styleatribut. Selain itu, kunci string tidak diperlukan. Untuk kunci CSS yang dipisahkan tanda hubung, gunakan huruf unta.

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

Cukup lakukan ini:

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