ng-style不工作/更新
ng-style是AngularJS框架中的一个指令，用于动态设置HTML元素的样式。它可以根据作用域中的变量值来动态地修改元素的样式。
使用ng-style指令的语法如下：
<div ng-style="{'property': expression}"></div>其中，property是要设置的CSS属性，expression是一个作用域中的表达式，根据表达式的值来动态修改CSS属性。
ng-style的优势在于可以根据作用域中的变量值来动态地修改样式，使得样式的控制更加灵活和动态化。
应用场景：
- 根据用户的操作或选择来动态修改元素的样式。
- 根据数据的状态来改变元素的样式，例如根据数据的有效性或错误状态来修改表单元素的样式。
- 根据不同的条件来改变元素的样式，例如根据时间、地点等条件来修改元素的样式。
推荐的腾讯云相关产品和产品介绍链接地址：
腾讯云提供了丰富的云计算产品和服务，以下是一些与云计算相关的产品：
- 云服务器（CVM）：提供弹性计算能力，可根据业务需求快速创建、部署和扩展虚拟服务器。产品介绍链接
- 云数据库MySQL版（CDB）：提供高性能、可扩展的MySQL数据库服务，支持自动备份、容灾和监控等功能。产品介绍链接
- 云存储（COS）：提供安全可靠、高扩展性的对象存储服务，适用于存储和处理各种类型的数据。产品介绍链接
- 人工智能（AI）：腾讯云提供了多个人工智能相关的产品和服务，包括图像识别、语音识别、自然语言处理等。产品介绍链接
注意：以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。
相关·内容
1回答
我的AngularJS应用程序在IE11上不工作。我知道我需要把每个包含角度变量的内联style转换成ng-style标签。
这就是我得到的：
<div id="mydiv" style="color: {{ ::channel.colour }};"></div>
如何将其转换为ng-style
我试着把它转换成这样：
<div id="mydiv" ng-style="color: {{ ::channel.colour }};"></div>
但这不管用
编辑
一般议题：
浏览 1提问于2016-08-03得票数 0
回答已采纳
我想把max-height的div设为$window.innerHeight。以下代码失败：
<div ng-style="{'max-height': $window.innerHeight}" style="overflow-y: auto">
我的漫游是使用一个作用域变量：
$scope.divnHeight = $window.innerHeight;
<div ng-style="{'max-height': divHeight}" style="overflow-y: auto
浏览 2提问于2014-09-10得票数 1
回答已采纳
下面是我用来双击元素的代码片段，它在chrome浏览器中工作得很好，但在firefox中不起作用。
browser.actions().doubleClick(element(by.repeater('row in renderedRows').row(0))).perform();
下面是HTML片段：
<div class="ng-scope ngRow even" ng-row="" ng-class="row.alternatingRowClass()" ng-click="row.toggleSelecte
浏览 10提问于2015-02-28得票数 1
2回答
所以我有一些跨度，如果filters[*index*]有空值，应该隐藏它。
var span = "<span ng-style='{ 'display': filters[" + filterIndex + "] == '' ? 'none' : 'inline-block' }'></span>"
cell.html(span);
当然也不起作用
但是，当它转到html页面时，我会看到以下内容：
<span ng-style="{ "
浏览 1提问于2018-11-01得票数 0
回答已采纳
3回答
我需要使用uikit创建一个进度条。根据uikit的说法，它是这样工作的：
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 40%;">40%</div>
</div>
当然，这是一个静态方法。因此，我创建了一个函数来计算以角度表示的百分比：
getPercentage: function() {
var self = this;
var
浏览 0提问于2015-04-08得票数 0
嗨，我有下面的代码来设置整个页面的背景，它运行良好--背景图像按预期显示，但是chrome控制台显示了这个错误
GET http://localhost:3000/assets/img/backgrounds/%7B%7Bbgimg%7D%7D 404 (Not Found)
GET http://localhost:3000/assets/img/backgrounds/ 404 (Not Found)
当使用src而不是ng-src加载图像时，此错误类似，但是对于背景，我不知道任何指令。这是我的密码
HTML：
<body background="assets/img/bac
浏览 2提问于2015-09-04得票数 2
回答已采纳
3回答
当颜色值可以从$scope.中更新时，我想应用带有ng-style条件的background-color。
以下是我在范围内的变量：
$scope.someone = { id: '1', name: 'John', color: '#42a1cd' };
$scope.mainId = 1;
实际上，我不使用任何条件来应用背景颜色，它是通过以下方式完成的：
<div ng-style="{'background-color': someone.color}">
{{someone.name}}
浏览 13提问于2017-01-26得票数 10
回答已采纳
我需要使用角函数设置CSS属性。这是我的代码：
<div ng-style="{ 'transform': getRotation(i) }"></div>
但是，我想使用以下属性添加浏览器兼容性：
-webkit-转换
-moz变换
-ms-变换
-o变换
我试过这样的方法：
ng-style="{ 'transform': getRotation(i),
'-webkit-transform': getRotation(i),
浏览 4提问于2016-05-24得票数 0
我首先用0px初始化一个变量：
<span ng-init="topStyle='0px';">
然后我有一个街区需要那种风格：
<span ng-style="{top: '{{topStyle}}'}">
但是，当我将这个值改变为不同的东西时，风格一点也不改变。下面是我的浏览器显示的内容：
<span ng-style="{top: '-50px'}" style="top: 0px;"></span>
浏览 1提问于2014-11-28得票数 2
回答已采纳
2回答
如何使用带有角js的css类更改元素的颜色。我在网上读了一些东西，但不知怎么的，我遗漏了一些东西，因为它对我不起作用。
我的小提琴：
代码：
<p class="change-background-color">No difference!</p>
<form>
<div class="form-group">
<label>Header color</label>
<input class="form-control" type="
浏览 1提问于2016-02-02得票数 2
回答已采纳
我有一个angularjs组件来创建样式化的图片，但是在我第一次访问页面时没有正确地应用这种样式(刷新页面显示了正确的样式)。应用的CSS是基于被样式化的图像的高度和宽度属性动态生成的。
有人能告诉我为什么CSS在重新加载时应用，而不是在原始加载上应用，以及如何修复它，以便在第一次加载页面时应用CSS？谢谢!
在中我创建了一个程式化的图片：
<stylized-picture image-source="someImage.jpg"></stylized-picture>
stylizedPicture组件
.component('styliz
浏览 6提问于2017-02-23得票数 0
回答已采纳
我正在创建一个组件的框架，我需要一种机制来向来自不同指令的元素添加样式，并且它们应该累积(它们的应用顺序应该由指令创建者定义(指令修改样式))
它的核心问题是：
<div ng-style="firstStyle" ng-style="secondStyle">
仅应用第一种样式，忽略第二种样式。我创建了一个简单的plunkr来显示只应用了一个：
。有没有一个简单的解决方案？
浏览 0提问于2014-02-13得票数 0
1回答
我想把div的高度逐步提高20 IE，为什么下面的代码只在Chrome上工作，而在IE中不工作呢？
<div ng-repeat="p in percentage">
<div style="height: {{$index*20+5}}px"></div>
</div>
浏览 1提问于2015-10-16得票数 0
回答已采纳
5回答
我需要在ng-style中添加多个条件。我该怎么做呢？
我尝试了下面的代码，但它不工作。
ng-style="ifTrue?'opacity:1;' : 'ifTrue? 'opacity: 1;': 'opacity: 0.5;''"
浏览 0提问于2016-11-18得票数 2
我想使用带条件的ng-style为可折叠面板组添加多个样式属性，因为ng-class不能使用可折叠面板。
以下是我正在尝试的方法：
ng-style="{ border: ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid ? '2px solid' : 'none' }"
这工作得很好。但是也想添加border-color。
我试过这个：
ng-style="{ border: ivrMessageForm.ivr_messagetitle.$e
浏览 11提问于2016-07-22得票数 0
回答已采纳
1回答
我需要的是：
<progress ng-style={background-color: variable } ></progress>
但是为了让它在chrome和firefox中工作，样式应该是这样的。
progress::-webkit-progress-bar{
background-color: red;
} //chrome
progress::-moz-progress-bar {
background-color: red;
}
浏览 3提问于2018-05-21得票数 1
例如，我想为ng-style生成一个json字符串
<th ng-style="{width:247}" data-field="code">Code</th>
但对杰克逊来说，结果是：
<th ng-style="{"width":247}" data-field="code">Code</th>
这不容易读懂。
所以我希望生成带单引号或不带引号的json字符串。有可能做到这一点吗？
浏览 0提问于2012-12-23得票数 18
回答已采纳
我和ng-style有一些问题。这是我现在的代码
ng-style="{'background-image': 'url(http://s3-us-west-1.amazonaws.com/'+ event.image2)'}"
上面的代码不起作用(出于原因我不得不删除桶名)，但是如果我有这样的代码，代码就能工作：
ng-style="{'background': 'orange'}"
这显示得很好。为什么URL方法不起作用？
浏览 4提问于2015-12-02得票数 0
回答已采纳
我几天前开始学习angular，我一直在尝试根据用户的文本输入更新div的颜色，但我似乎无法让它工作，我想知道我是不是用错了方法。
我已经看到许多关于这些主题的帖子和答案，人们想要使用复选框或类似的东西来更新颜色。为此，允许使用一定数量的颜色，以便可以创建类并使用ng-class指令。显然，我可以用文本输入框做到这一点，但我正在寻找允许任何可能的十六进制颜色值的功能，我宁愿不为它写出每个类。
我的想法是这是可行的：
HTML
<div ng-app='root' ng-controller = 'index'>
<input type =&
浏览 3提问于2016-09-17得票数 0
HTML
<div ng-app="myApp" ng-controller="myCtrl" style="background:{{hex}}">
Background-color: {{hex}}
</div>
Javascript
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.hex= "#ff0000";
})
浏览 3提问于2015-09-02得票数 0
回答已采纳
1回答
如何基于变量动态更新ng样式？
、、、、
我想将x，y的值从数组(item.x，item.y)通过更新变量transformX，transformY传递给父元素的ng-style (更新是通过ng-click指令实现的)。
-html-
<section ng-style="{'transform' : translate(transformX,transformY)}">
<figure ng-repeat="item in items"
style="left: {{item.x}}px; top: {{item.y}}px;
浏览 0提问于2015-05-08得票数 0
3回答
我正在构建一个Angular 2.0组件，我想要动态地控制它的样式(使用ng-style)。在快速浏览了一下Angular 2的文档后，我尝试了一下：
<div class="theme-preview" ng-style="{'font-size': fontSize}">
{{fontSize}}
</div>
并看到大小实际上是打印在div里面，但并没有影响样式。fontSize是组件的属性绑定之一，这意味着组件像这样从其父组件中获取它：
<my-component [font-size]="siz
浏览 0提问于2015-08-31得票数 23
回答已采纳
2回答
我整个上午都在尝试使用ng-style，但是它并没有像预期的那样工作。在我的指令中，我做了类似的事情：
this.width = this.width+'px';
scope.myStyle = {width: this.width};
在我的html中，我有：
<div ng-style="myStyle" class="no-margin"
style="position:absolute;">
浏览 6提问于2015-04-14得票数 0
我有使用某些模板的自定义指令(隔离作用域)。我想用ng-style来获取内部模板。
下面是一个演示这个问题的
JS
app.controller('fessCntrl', function ($scope, Fct) {
$scope.Fct = Fct;
});
app.$inject = ['$scope','Fct'];
app.factory('Fct', function() {
return {
theStyle: function(value) {
retu
浏览 3提问于2014-06-03得票数 1
回答已采纳
就像构建一个简单的应用程序一样，试图在angularJS上得到一个句柄，在这个应用程序中，你可以列出一个人的列表，在列表中他们的名字是彩色的。颜色由“选择”下拉框选择.
麻烦的是，无论我怎样尝试给我遇到麻烦的样式添加新的颜色。此时，名称被正确地添加到列表中，但是它们的颜色不正确，我得到了以下错误：
Error: [$parse:syntax] Syntax Error: Token 'undefined' not a primary expression at column null of the expression [{color:] starting at [{c
浏览 2提问于2014-05-07得票数 0
回答已采纳
我希望能够操纵屏幕周围的一些图像，但不能让它正常工作。
我试着用
$scope.data[i].style="{'width': '" + $scope.imageScale + "px'}"
在当imageScale更改时调用的控制器中，使用
<div class = "image" ng-repeat="image in data">
<img ng-src={{image.Filename}} ng-style="image.style">
&l
浏览 3提问于2015-07-16得票数 1
回答已采纳
我有一个返回图像URL的服务，它使用以下代码进行调用：
angular.forEach(results, function (item) {
item.img = "/images/searchItem.jpg";
$http.post("https://my.api.com/?id=" + item.id).success(
function (url) {
item.img = url;
});
});
在我的观点中，我曾经有一个带有ng-src属性的映像，它的工作
浏览 7提问于2014-04-27得票数 49
回答已采纳
index.html：
<script src="app.js"></script>
<div ng-app="app" ng-controller="app" ng-style="{ color: thecolor }">
foo
</div>
app.js：
angular.module("app", [])
.controller("app", function() {
$scope.thecolor = "red";
浏览 6提问于2016-05-11得票数 0
回答已采纳
1回答
<div class="secondary-value"
ng-style="{ background: totalColour || '#0000ff' }"></div>
如何将打印css添加到ng-style？或者我如何使用！在ng-style属性中的重要性。我正在尝试打印页面，但是ng-style属性css不打印。
浏览 1提问于2017-10-24得票数 0
这是。
如何在全球范围内监听按键并更改特定键的值？
例如。
在{{player.controls[0].xPos}}中按字母a +10%的键
JS:
'use strict';
angular.module('dippybirdApp', []);
var app = angular.module('dippybirdApp')
.controller('MainCtrl', function ($scope, Player) {
$scope.player = Player;
});
ap
浏览 7提问于2014-05-14得票数 1
回答已采纳
我有一个简单的4x4表和一个4x1表。4x4桌子是一张白色正方形的桌子。4x1表是4种颜色的列表。理想情况下，我希望单击4x1表中的一个元素(一个颜色)，然后单击4x4表中的一个元素，并更改该特定元素的背景色，而不是整个4x4表。因此，如果我单击颜色蓝色，然后块(2,2)，那么块(2,2)将更改为蓝色。现在，这就是我所拥有的
<table>
<td ng-style="{'background-color':'blue'}"></td>
<td ng-style="{'back
浏览 2提问于2016-09-25得票数 2
回答已采纳
我正在尝试使用angular ng-style将背景图像应用到div，只要该URL不包含空格，它就可以正常工作。
ng-style="{'background-image': 'url(' + parentIMGLink + ')'}"
如果URL中有空格，比如parentIMGLink = servername.images/there is name.png，它就不起作用了。另一方面：
img ng-src={{parentIMGLink }}
工作正常。当然，我可以做到让服务器上的名称不包含空格，但是有没有可能让ng风格工作
浏览 0提问于2015-06-15得票数 4
最初，我将我的ng风格设置为：
<div ng-repeat="row in rowArray">
<div ng-repeat = "col in colarray">
<span ng-style="my_array[i]" >Some Text </span>
</div>
</div>
如果rowArray中有2行，columnArray中有3列，那么在最后我需要这样的东西，
<div><div>
<span
浏览 5提问于2014-04-03得票数 0
我有一个组件正在被许多页面使用：
<input
ng-style="{$ctrl.page0 ? 'border-color:blue' : ''}"
class="form-control"
type="text"
ng-change="$ctrl.dateChange()"
/>
<button ng-click="$ctrl.open()">Continue</button>
我想用这样的方法：
ng
浏览 9提问于2022-03-28得票数 0
我希望使用ng样式动态设置div的背景图像。有几个答案，但没有一个对我有用。我意识到对于一个简单的案例来说，没有问题
<li ng-style="{'background-image': 'url({{ image.source }})'}">...</li>
其中定义了$scope.image = ...。或者更直截了当：
<li ng-style="{'background-image': 'url(http://example.com/image.png)'}"&
浏览 4提问于2015-11-07得票数 1
回答已采纳
我有一个自定义指令，在该指令中，我正在计算宽度并将其赋值给范围变量。这个作用域变量在html中被访问，它在firefox和chrome中工作得很好。但不是在互联网浏览器里。
控制器代码
cellWidth: 160 // property of an object
指令代码
for (var i = 0; i < totalColumns; i++) {
scope.columnMapping.columns[i].tempCellWidth = scope.columnMapping.columns[i].cellWidth * 100) / tableWidth;
}
HTM
浏览 1提问于2015-08-18得票数 3
回答已采纳
3回答
我想要一个滑块来控制几个div的高度和宽度，但是，我似乎无法让它们正确地绑定。
<div ng-controller="SizeCtrl">
<input type="range" min="100" max="200" ng-model="sliderval" />
<div class="box" ng-style="height:sliderval; width:sliderval"> Box 1</div>
浏览 1提问于2015-04-09得票数 1
回答已采纳
基本上，我有一个div，背景设置为图像和opacity of 0.5。在div内部，我试图将相同的img放置为一个圆圈。然而，它也得到了0.5 opacity。
有什么好办法来确保这不会发生呢？
<div class="bg-img" ng-style="{'background':'url({{vm.large}}) center / cover'}">
<img ng-src="{{vm.large}}">
</div>
.bg-img {
height:
浏览 2提问于2015-12-07得票数 2
我正在制作一个页面应用程序，它有子页面。
我的想法是，我有网址，例如家里，关于和联系。然后，每个页面都有多个块。
当页面加载时，这些块被设置为最小高度。最小高度是窗口高度。这是动态的，所以当您调整大小时，最小高度将被重置。
目前，路线是#/home/:blockId。
当有人去时，应用程序应该向下滚动到那个块。
我的当前代码可以工作，但返回的最高位置是在设置最小高度之前的前一位置。
如果我不清楚，请随时询问更多细节。谢谢
见jsFiddle：
Javascript:
var app = angular.module('siteApp', []);
app.controller
浏览 1提问于2013-11-14得票数 0
回答已采纳
2回答
我正在尝试编写滚动到表格中最后一行的函数。ui-grid可以无限滚动行。
我已经找到了解释滚动到最后一个元素的答案，但是我的表在滚动一次之后有许多隐藏的元素，我需要一个解决方案来滚动整个网格。()
解决方案： -对我没有帮助
我的网格是：
<div class="ui-grid-viewport ng-isolate-scope" ng-style="colContainer.getViewportStyle()" role="rowgroup" ui-grid-viewport="" style="overfl
浏览 24提问于2016-08-03得票数 2
回答已采纳
我对ng样式和进度条有问题。
我正在使用来自以下链接的文件上传器模块：
问题是进度条随动画一起返回，而不是从0开始。
我检查了这些值，它确实从0开始，然后进度一直到100，但进度看起来又回到了原来的水平。
不知道我做错了什么，
如果你有任何想法，请与我分享。
我附上了动画gif来展示这个场景。
和我的html代码：
<div ng-if="item.progress <= 100" class="upload-progress-bar">
<div class="progress-bar" ng-style="{
浏览 0提问于2016-03-02得票数 0
我知道如何用ng-style设置单选按钮标签的颜色，如下所示：
ng-style="{'background-color': buttonColor}"
但是，当使用ng-style指令检查单选按钮标签时，如何更改它的颜色？在css中，如下所示：
.radio-button:checked+label {
background-color: #52b6db;
border: 1px solid #52b6db;
}
编辑：--基本上，如何通过ng-style访问:checked+label样式属性
浏览 9提问于2017-07-20得票数 0
1回答
有人和合作过吗？我试图使用这个指令，这样我就可以得到一个可以显示多张图像/卡片的旋转木马。一切正常，但我无法自定义图像的CSS宽度。我将variableWidth设置为真，但没有。我还删除了slides-to-show选项，这样variableWidth就可以工作了，但是没有结果--我仍然通过Slick获得默认宽度。以下代码如下：
<slick infinite="true" slides-to-show="4" slides-to-scroll="4"
init-onload="true" data="
浏览 4提问于2016-06-29得票数 0
回答已采纳
2回答
我想在AngularJs中做一个搜索框的客户端验证。
我尝试了下面的方法，
<form name="search" ng-submit="myFunction()">
<div class="input-group" ng-class="{ error: search.mysearchbox.$invalid }">
<input name="mysearchbox" type="search" cla
浏览 0提问于2014-02-06得票数 1
我有一个ui-select，我需要在html span标记中显示颜色，我使用ng-style输入颜色，在ng-select-choices中它工作，但是在ui-select-match中它不工作。
<div class="form-group container-fluid">
<label class="col-md-2 control-label">Categoría:</label>
<div class="col-md-10">
<ui-select ng-
浏览 5提问于2019-04-28得票数 1
回答已采纳
1回答
我正在试着根据条件改变边界。我没有任何错误，但它不工作。
<span ng-style="{{thumb.Selected}} ? {'border' : 'red'}:{'border' : 'black'}" style="display:block; border:solid 1px black;" >
浏览 11提问于2021-02-17得票数 0
回答已采纳
1回答
我正在尝试改变离子图标的颜色。像在线(绿色)、空闲(琥珀色)和离线(灰色)。所以基本上我是通过http请求来获取数据的，它工作得很好。它显示了正确的数据，但我无法显示在线状态。
<div class="col-md-12 col-sm-12 col-xs-12 trans">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4 trans"><i class="icon icon ion-person
浏览 8提问于2017-02-15得票数 0
回答已采纳
在没有指令的情况下，它可以工作并显示小猫。
<section class="slide-show" style="background-image:url('http://placekitten.com/g/1000/175')">
hello
</section>
对于ng样式，这是失败的：
<section class="slide-show" ng-style="{'background-image':url('http://pla
浏览 3提问于2014-12-09得票数 1
回答已采纳
下面的代码，
<div style="background-color: {{ row.legend }}"></div>
执行得很好，
但是komodo编辑器将错误显示为Error in parsing value for 'background-color'
我试着修改为：ng-style="'background-color': '{{ row.legend }}'"，但是功能中断了。
如何解决此错误？
浏览 1提问于2016-01-07得票数 0
在style中获取用于以下绑定的空IE11属性：
<a class="badge" style="background-color: {{colour}}">Some text</a>
在Chrome中工作很好。有什么指示吗？
浏览 1提问于2016-08-19得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
