각도 JS에서 동적으로 CSS 스타일 속성 적용

각도 JS에서 동적으로 CSS 스타일 속성 적용

이것은 간단한 문제일 텐데, 해결책을 찾을 수 없을 것 같다.

다음과 같은 마크업이 있습니다.

<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 디렉티브를 사용하면 HTML 요소의 CSS 스타일을 동적으로 설정할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/21364445/apply-css-style-attribute-dynamically-in-angular-js