이것은 간단한 문제이지만 해결책을 찾을 수없는 것 같습니다.
다음 마크 업이 있습니다.
<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>답변
