ใช้แอตทริบิวต์สไตล์ CSS แบบไดนามิกใน Angular JS

นี่น่าจะเป็นปัญหาง่ายๆ แต่ดูเหมือนจะหาทางแก้ไม่ได้

ฉันมีมาร์กอัปต่อไปนี้:

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

ฉันต้องการให้สีพื้นหลังเชื่อมโยงกับขอบเขตดังนั้นฉันจึงลองสิ่งนี้:

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

ไม่ได้ผลดังนั้นฉันจึงทำการวิจัยและพบng-styleแต่ก็ไม่ได้ผลฉันจึงลองเอาส่วนไดนามิกออกมาและเขียนโค้ดสไตล์ng-styleให้ยากเช่นนี้ ...

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

และนั่นก็ไม่ได้ผล ฉันเข้าใจผิดว่าng-styleทำงานอย่างไร? มีวิธีใส่{{data.backgroundCol}}ลงในแอตทริบิวต์สไตล์ธรรมดาและทำให้มันแทรกค่าได้หรือไม่?

คำสั่ง ngStyleช่วยให้คุณตั้งค่าสไตล์ CSSบนองค์ประกอบ HTML แบบไดนามิก

นิพจน์ที่เปลี่ยนไปยังออบเจ็กต์ที่มีคีย์เป็นชื่อสไตล์ CSS และค่าเป็นค่าที่สอดคล้องกันสำหรับคีย์ CSS เหล่านั้น เนื่องจากชื่อสไตล์ CSS บางชื่อไม่ใช่คีย์ที่ถูกต้องสำหรับออบเจ็กต์จึงต้องยกมา

ng-style="{color: myColor}"

รหัสของคุณจะเป็น:

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

หากคุณต้องการใช้ตัวแปรขอบเขต:

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

นี่คือตัวอย่างของซอที่ใช้ngStyleและด้านล่างของโค้ดที่มีข้อมูลโค้ดที่กำลังทำงานอยู่:

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>

วิธีที่ง่ายที่สุดคือการเรียกใช้ฟังก์ชันสำหรับสไตล์และให้ฟังก์ชันส่งคืนสไตล์ที่ถูกต้อง

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

และในตัวควบคุมของคุณ:

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

โดยตรงจากngStyle เอกสาร :

นิพจน์ที่เปลี่ยนไปยังออบเจ็กต์ที่มีคีย์เป็นชื่อสไตล์ CSS และค่าเป็นค่าที่สอดคล้องกันสำหรับคีย์ CSS เหล่านั้น

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

คุณสามารถทำได้:

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

หวังว่านี่จะช่วยได้!

ในบันทึกทั่วไปคุณสามารถใช้การผสมผสานระหว่าง ng-if และ ng-style รวมการเปลี่ยนแปลงตามเงื่อนไขกับการเปลี่ยนแปลงภาพพื้นหลัง

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

ฉันจะบอกว่าคุณควรใส่สไตล์ที่จะไม่เปลี่ยนเป็นstyleแอตทริบิวต์ปกติและสไตล์เงื่อนไข / ขอบเขตลงในng-styleแอตทริบิวต์ นอกจากนี้ไม่จำเป็นต้องใช้คีย์สตริง สำหรับคีย์ CSS ที่คั่นด้วยยัติภังค์ให้ใช้ camelcase

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

เพียงทำสิ่งนี้:

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