Это должна быть простая проблема, но я не могу найти решение.
У меня есть следующая разметка:
<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}} в атрибут простого стиля и заставить его вставить значение?
Ответ 1
ngStyle позволяет динамически устанавливать стиль CSS на элемент HTML.
Expression, который анализирует объект, чьи ключи являются именами и значениями стиля 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>
Ответ 2
Самый простой способ - вызвать функцию для стиля и вернуть функцию правильному стилю.
<div style="{{functionThatReturnsStyle()}}"></div>
И в вашем контроллере:
$scope.functionThatReturnsStyle = function() {
var style1 = "width: 300px";
var style2 = "width: 200px";
if(condition1)
return style1;
if(condition2)
return style2;
}
Ответ 3
Непосредственно из ngStyle docs:
Выражение, которое анализирует объект, ключи которого являются именами стиля CSS и значения являются соответствующими значениями для этих клавиш CSS.
<div ng-style="{'width': '20px', 'height': '20px', ...}"></div>
Итак, вы можете сделать это:
<div ng-style="{'background-color': data.backgroundCol}"></div>
Надеюсь, это поможет!
Ответ 4
В общей заметке вы можете использовать комбинацию 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>
Ответ 5
Я бы сказал, что вы должны поместить стили, которые не изменятся, в обычный атрибут style, а условные стили/области видимости - в атрибут ng-style. Кроме того, строковые ключи не нужны. Для CSS-ключей, разделенных дефисом, используйте camelcase.
<div ng-style="{backgroundColor: data.backgroundCol}" style="width:20px; height:20px; margin-top:10px; border:solid 1px black;"></div>
Ответ 6
Просто сделайте это:
<div ng-style="{'background-color': '{{myColorVariable}}', height: '2rem'}"></div>
