Áp dụng động thuộc tính kiểu CSS trong Angular JS

Đây hẳn là một vấn đề đơn giản, nhưng tôi dường như không thể tìm ra giải pháp.

Tôi có đánh dấu sau:

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

Tôi cần màu nền được liên kết với phạm vi, vì vậy tôi đã thử điều này:

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

Điều đó không hiệu quả, vì vậy tôi đã thực hiện một số nghiên cứu và tìm thấy ng-style, nhưng điều đó không hiệu quả, vì vậy tôi đã thử lấy phần động ra và chỉ cần mã hóa phong cách trong ng-style, như thế này ...

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

và điều đó thậm chí không hoạt động. Tôi đang hiểu sai cách thức ng-stylehoạt động? Có cách nào để đưa {{data.backgroundCol}}vào một thuộc tính kiểu thuần túy và làm cho nó chèn giá trị không?

Chỉ thị ngStyle cho phép bạn đặt độngkiểu CSS trên một phần tử HTML.

Biểu thức ẩn đến một đối tượng có khóa là tên kiểu CSS và giá trị là giá trị tương ứng cho các khóa CSS đó. Vì một số tên kiểu CSS không phải là khóa hợp lệ cho một đối tượng, chúng phải được trích dẫn.

ng-style="{color: myColor}"

Mã của bạn sẽ là:

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

Nếu bạn muốn sử dụng các biến phạm vi:

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

Dưới đây là một ví dụ về fiddle sử dụng ngStylevà bên dưới mã có đoạn mã đang chạy:

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>

Cách dễ nhất là gọi một hàm cho kiểu và để hàm trả về kiểu đúng.

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

Và trong bộ điều khiển của bạn:

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

Trực tiếp từ ngStyle tài liệu :

Biểu thức ẩn đến một đối tượng có khóa là tên kiểu CSS và giá trị là giá trị tương ứng cho các khóa CSS đó.

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

Vì vậy, bạn có thể làm điều này:

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

Hi vọng điêu nay co ich!

Lưu ý chung, bạn có thể sử dụng kết hợp ng-if và ng-style kết hợp các thay đổi có điều kiện với thay đổi trong hình nền.

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

Tôi muốn nói rằng bạn nên đặt các kiểu sẽ không thay đổi thành một stylethuộc tính thông thường và các kiểu có điều kiện / phạm vi vào một ng-stylethuộc tính. Ngoài ra, các phím chuỗi không cần thiết. Đối với các khóa CSS được phân tách bằng dấu gạch nối, hãy sử dụng camelcase.

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

Đơn giản chỉ cần làm điều này:

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