基于来自ng-repeat的数据更改angular指令元素的CSS (或类)
基于来自ng-repeat的数据更改angular指令元素的CSS (或类)
在Angular中，可以使用ng-class指令来根据ng-repeat中的数据更改元素的CSS类。ng-class指令可以根据条件动态地添加或移除CSS类。
示例代码如下：
<div ng-repeat="item in items" ng-class="{ 'highlight': item.isHighlighted }">
{{ item.name }}
</div>在上面的代码中，ng-repeat指令用于遍历一个名为items的数组。ng-class指令被应用于ng-repeat所创建的每个元素。根据item对象中的isHighlighted属性的值，如果为true，则会添加highlight类，否则不会添加。
在CSS中，可以定义highlight类的样式，以实现元素的特殊效果。例如：
.highlight {
background-color: yellow;
font-weight: bold;
}这样，当item.isHighlighted为true时，对应的元素将具有黄色背景和粗体字体。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
腾讯云云服务器（CVM）是一种可随时扩展的云计算服务，提供高性能、可靠稳定的计算能力。您可以根据业务需求选择不同配置的云服务器实例，支持多种操作系统和应用场景。
产品介绍链接地址：腾讯云云服务器（CVM）
请注意，以上答案仅供参考，具体的解决方案可能因实际情况而异。
相关·内容
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl',['$scope',function($scope){
$scope.tableData = ['hello','blue','angular'];
//set ture ok but only first time
//设置 true 可以 但是 只有第一次可以
//$scope.selectClass = true;
浏览 0提问于2016-09-28得票数 0
我已经创建了一个表，用户可以在其中增加和减少该值。请参阅
//sample code as its not allowing me to push the link to JSFiddle with out pasting code
<tr ng-repeat="d in dataSource" ng-animate="'animate'">
// css - as from angular page
.animate-enter {
-webkit-transition: 1s linear all; /* Chr
浏览 0提问于2013-11-19得票数 30
回答已采纳
1回答
具有独立作用域的指令中的ng-repeat没有拾取通过'='绑定传递的属性。
HTML:
<body ng-controller="myCtrl">
<div my-directive list="users">
<ul>
<li ng-repeat="item in list">
{{item.name}}
</li>
</ul>
浏览 2提问于2014-03-23得票数 2
我想在angular中使用ng-repeat来重复一堆内部带有指令的<li>。但是，我希望ng-repeat中的前两个项目具有不同于其他项目的样式和html更改。我正在考虑使用ng-class来接收一个函数，该函数根据ng-repeat的$index设置特定的类，以解决问题的css部分。但是，对于html更改，我所能想到的就是对重复指令中的部分使用ng-shows/ng-hides，这些部分是基于$index等于0或1而设置的。
我想知道有没有更好的方法？
我希望ng-repeat的前两个项目始终存在，并且具有不同的样式(彼此和列表中的其他项目)，并且它们必须使用ng-repeat
浏览 0提问于2016-04-14得票数 2
1回答
我想为我的ng-repeat生成的项目做一个简单的淡出动画，我遵循了上的所有说明，但仍然没有骰子。
这是我的模块
var app = angular.module('testApp', ['ngRoute','ngAnimate']);
这是我标记中的ng-repeat
<div class="col-md-6 col-xs-12" ng-repeat="mark in marks" ng-animate="'animate' ">
<div class=
浏览 1提问于2016-03-23得票数 3
回答已采纳
我无法在同一个div标记中使用多个指令。下面的html不显示模块提供的产品名称
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
浏览 4提问于2014-06-24得票数 2
回答已采纳
2回答
我想在自定义指令上使用ngAnimate，该指令使用ng-repeat重复。如果我在一个简单的html列表项目上使用ng-repeat，动画效果就会很好。但是，一旦将list-item替换为自定义指令元素，动画就不会被触发。
我遗漏了什么/做错了什么？
代码( )：
HTML
<h3>Simple ng-repeat</h3>
<ul>
<li class="animate-repeat" ng-repeat="val in testValues">{{ val }}</li>
</ul&
浏览 7提问于2016-08-30得票数 0
回答已采纳
1回答
嵌套复杂指令不被执行？
、、、
我试图遵循 by ，在这里，他通过将指令分类为组件和容器来解释指令。
因此，我尝试这样做，有一个容器(幻灯片)将容纳不同的项目(文本区域，图像，视频.)但我的例子更有活力。
他的例子是这样的：
<panel title="{{title}}">
<element text="{{body}}"></element>
</panel>
但我的更像这样：
<slide ng-repeat="slide in slides" slide-id="{{slide.id}}">
浏览 3提问于2013-04-24得票数 0
回答已采纳
我希望从“宿主”指令的ng-repeat函数中绑定post-link项上的事件侦听器。但是，在post-link调用期间，还没有呈现ng-repeat项(请参阅柱塞中的控制台日志)。
在阅读了关于指令生命周期()的文章后，我的印象是，在post-link中，所有的HTML都应该已经可用，可以添加事件侦听器了。
有什么不同吗？
代码：
angular
.module('myModule', [])
.directive('myDirective',
function() {
return {
scope: { i
浏览 2提问于2019-12-03得票数 0
回答已采纳
我看过教程和其他文章，说在使用Angular.js时甚至不要将jQuery包含在项目中，以便尽可能彻底地进行过渡。然而，我们如何仅使用Angular对css和$('.item').css('top', '50px');之类的东西进行简单的DOM操作呢？(或者这是不可能的)？
浏览 0提问于2014-01-10得票数 0
我正在学习Angularjs作为前端框架的早期步骤，我想动态地为我的索引页面提供css规则，这些规则将被插入到页面的标签下，我不知道是否可以在style标签中使用ng-repeat，因为我不想在html元素上使用内联css样式。
例如:我有许多@font-face规则(令牌)，我想在中动态声明，然后我就可以将style=“font-family: many，serif”应用到html元素中。
这是controller.js
var fontsApp = angular.module('fontsApp', []);
fontsApp.controller('FontsL
浏览 2提问于2014-07-11得票数 0
2回答
基座
角1.1.5 - - WORKS
加高
角1.2.6 - -失败
我想我确实遵循了docs - 的指示。
·首先在HTML中包含角动画.·
·然后将模块作为依赖模块添加到应用程序中
在我的时区已经很晚了，我可能错过了一些显而易见的事情。我的猜测是- CSS文件在1.1.5和1.2.6之间不兼容？不能说真的..。
无论如何，下面是 to 柱塞的代码表单，我添加了一些注释，以强调我遵循了docs的说明：
<!doctype html>
<html ng-app="app">
<head>
<meta charset=
浏览 4提问于2014-02-06得票数 20
回答已采纳
3回答
我实现了一个引导旋转木马，它运行得很好，只要我单击下一个箭头的开始。然后开始自动滑动。如果我不点击任何东西，它就不会开始。有什么问题吗？我读了很多帖子，尝试过不同的东西：
调整后的jquery版本:尝试从1.7.1到1.9.1，没有更改
查看了我包含的.js文件，检查它们是否得到了正确的订单。
将html代码与引导示例进行比较
最后，我没有发现这个错误。
在加载页面之后，我的html代码看起来是这样的：
<div class="span9 ng-scope">
<h2>Test Heading</h2>
<div i
浏览 3提问于2013-05-01得票数 3
回答已采纳
<uib-alert ng-repeat= "alert in ConfigurationAlerts" close="closeAlert($index)"> {{alert.msg}} </uib-alert>
var eWiggle = angular.module('eWiggleApp',['ui.router', 'ngAnimate', 'ui.bootstrap','blockUI','ngCookies']);
浏览 25提问于2016-08-12得票数 1
回答已采纳
我正在尝试构建一个选项卡集，它将使用bs-tabs angularstrap指令和ng-repeat来动态更改用户操作(假设最初的选项卡是a，b，c。在某些用户操作中，它应该更改为x，y，z)
我试图通过将ng-repeat指向用户操作上的一个新数组对象来实现这一点。我注意到一个奇怪的行为，而不是选项卡集被刷新
我已经在这个plnkr中重建了它，请看一下。
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta ch
浏览 0提问于2013-11-20得票数 0
我对AngularJS相对来说是个新手。在尝试创建指令时，我可以了解这个问题：如何动态地添加/删除指令元素的子元素的属性，当这些子元素被动态地添加为“ng-重复”？时。
首先，我想到了这个解决方案：
模板
...
a.list-group-item(ng-repeat='playlist in playlists', ng-click='addToPlaylist(playlist, track)', ng-href='playlist/{{ playlist._id }})
...
*指令
link: function(scope, elm, attr
浏览 5提问于2016-02-13得票数 2
回答已采纳
1回答
根据angulars文档，只有在执行了子指令的Post链接函数之后，才会执行“父”的post链接函数。
但是，在下面的代码中，为什么我需要触发“发射”事件来通知ng-重复已经结束。理想情况下，它应该自动运行，而不需要发出事件。
<div ng-controller="Ctrl" my-main-directive>
<div ng-repeat="thing in things" my-repeat-directive>
thing {{thing}}
</div>
</div>
angular.
浏览 1提问于2015-02-23得票数 3
回答已采纳
总的来说，我对JS中的angularJS非常陌生，对于使用$document我有点困惑。据我所知，$document公开了一些JQuery函数。因此，当我想要删除一个与选择器匹配的元素时，我这样做：
$document.remove('.someClassSelector');
并且应该从DOM树中删除该元素，对吗？如果不是，那么在angular中操作DOM元素及其css的正确方法是什么。
浏览 2提问于2012-11-07得票数 7
回答已采纳
2回答
我尝试使用ng-if，但是angular没有编译他。查看测试代码：
<ul class="tmmenu-admin-tabs-builder-panel-answer">
<li class="tmmenu-admin-tabs-builder-panel-portlet" ng-repeat="answer in answers">
<div>
浏览 4提问于2014-09-02得票数 1
我正在尝试使用jQuery.matchHeight将元素设置为相同的高度。我从Angular指令调用函数
angular.module('myApp')
.directive('matchHeight', ['$timeout', function ($timeout) {
var linkFunction = function(scope, element) {
$timeout(function() {
angular.element(element).matchHeight();
});
浏览 5提问于2016-10-20得票数 0
我有一个AngularJS指令，用于与服务器推送的通知进行交互。我遇到的问题是，目前我使用的方法是有一个ng-重复，它跟踪会话期间的所有通知，然后在将它们添加到数组时显示它们。我想要发生的是，一个警报出现了，它被添加到DOM中，它停留了几秒钟，并从DOM中删除了自己。此时，问题是元素将隐藏，但它不会将自身从DOM中删除。因为元素是绝对定位的，在fadeout是阻止我访问它前面的项之后。我假设element.remove()和element.$destroy()会起作用，但似乎元素不是来自ng-repeat，也可能是指令的$scope没有被删除。任何帮助都将不胜感激。
angular.mod
浏览 6提问于2016-02-19得票数 1
回答已采纳
我在项目中使用angular-ui Bootstrap时遇到了一个问题。即dropdown指令。
到目前为止，我已经有了HTML，它只是示例中的一个复制-粘贴：
<ul>
<li class="dropdown">
<a class="dropdown-toggle"> Drop!</a>
<ul class="dropdown-menu">
<li> one </li>
<li> two </li>
浏览 2提问于2013-12-12得票数 0
我通过分页元素生成了这个HTML：
<ul class="pagination ng-isolate-scope ng-valid" ng-change="gestTrt.pageChanged()" ng-model="gestTrt.currentPage" items-per-page="1" total-items="4" direction-links="false" aria-invalid="false">
<li class="pagin
浏览 2提问于2015-11-25得票数 0
3回答
我对角质js很陌生。我想从外部css文件中应用css样式。我已经在css文件中定义了.container类，我想使用ng类在角js文件中调用它。但是它不起作用。-- style.css
.container
{
width:900px;
height:600px;
border:1px solid;
margin:auto 0;
position:absolute;
background:red;
}
index.html
<!DOCTYPE html>
<html>
<head>
<script src="js
浏览 1提问于2015-06-05得票数 0
6回答
我在角度上对$index有异议，我有一个ng-重复，在里面我使用$index来跟踪独特的类。这是我的代码：
<div ng-repeat="style in styleArr">
<div class="myclass{{ $index }}">
</div>
</div>
在角控制器中，我在myclass0中附加了一个div，但没有工作。这是我的控制器。
myClass = angular.element('.myclass0');
myClass.
浏览 3提问于2015-10-08得票数 1
回答已采纳
我有两列，每列都包含同一数组中的项。我想要达到砖石效果，因为每个.tile的高度将是不同的。
<div class="col-md-6">
<div class="tile" ng-repeat="item in items| orderBy: 'id'" ng-if="$odd">
<button ng-click="alert($index)"></button>
</div>
</div
浏览 1提问于2015-04-04得票数 0
目前是新的&使用AngularJS开发一个使用Nginx的web应用程序。
我想选择一些精确的值将它们放在html表中。
我一直在寻找，却始终找不到合适的解决办法。
你知道我该怎么做吗？
下面是代码：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
浏览 7提问于2016-11-22得票数 0
回答已采纳
我需要在具有特定类名的所有元素上初始化一个jQuery插件，该类名位于一个ng-repeat循环中。这些元素是通过angularjs $http get方法加载的。
var app = angular.module('myApp', []);
app.controller('myController', function($scope, $http) {
$http.get('get_item.php').success(function(response) {
$scope.items = response;
浏览 0提问于2015-11-04得票数 2
回答已采纳
我的主html中有来自ng-repeat的数据。
<span ng-repeat="acqui in acquis">
<card-info class="card" acqui="acqui"></card-info>
</span>
在我的card-info指令(单独的html文件)中，我有几个显示数据的元素
<h6 class="buyer">Acquired By: <strong>{{acqui.buyer.name}}</strong
浏览 1提问于2016-08-23得票数 2
回答已采纳
我有一个指令，它继承了控制器的作用域。这个指令有一些方法，当我试图从父控制器调用这些方法时，它说方法是未定义的。
家长主计长：
app.controller('ParentController', ['$scope', function($scope){
$scope.items = []; //Array of Objects.
$scope.someMethod = function(item){
$scope.directiveMethod(item.id);
}
}]);
指令：
app.directive(
浏览 2提问于2016-01-28得票数 0
回答已采纳
2回答
如何更改进度条角度指令的颜色
、、、、
我想在我的应用程序中集成angular进度指令。
我找到了解决这个问题的进度条指令，但是我不能改变进度条的颜色。我想给进度条自定义颜色。
有人知道这是怎么回事吗？
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="/
浏览 1提问于2015-06-11得票数 5
1回答
在我的例子中，angular指令的作用域对象似乎“削弱”了img src。如果我取下scope: { myDirectiveText: "=" }，图像就会显示出来。有了它，图像就不会显示。
以下是指令
app.directive('myDirective', function(){
return {
restrict: 'A',
scope: { myDirectiveText: "=" }, // having this will cause image to disappear.
浏览 1提问于2013-10-15得票数 0
Angular ng-repeat with filter是这样工作的(我是通过观察Chrome开发人员工具中的DOM发现的)：
它实际上删除了不满足过滤条件的节点，并重新渲染所有内容。
请参见示例。如果你看看DOM，看看那里发生了什么，你就会明白我的意思。
<div ng-app>
<h2>Instant Search</h2>
<div ng-controller="SearchCtrl">
<input type="text" ng-model="filterText"
浏览 0提问于2013-11-20得票数 2
1回答
我想向来自HomeController的用户展示一下“注销”按钮。我尝试使用指令，但它只显示按钮，没有else....Here是我的代码。
这是指令
(function () {
'use strict';
angular.module('chatApp').directive('userDirective', function () {
return {
restrict: 'E',
scope: {
userList
浏览 2提问于2015-09-16得票数 0
回答已采纳
我使用ng-repat指令将自定义指令放在HTML中。
但自定义指令不会被计算，如果直接将相同的指令放在HTML上，那么它是有效的。
...
<body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<div>This is a Problem</div>
<!--Here in for loop i want to us the value to call a directive-->
浏览 0提问于2016-09-06得票数 3
测试用例：
上面的测试用例是一个用ng-repeat指令呈现的数据列表，两次。一次不使用ng-include，一次使用ng-include。
CSS转换是为ng-repeat指令支持的所有三种动画(输入、离开和移动)设置的。当不使用使用ng-include时，所有三种动画都能正常工作，但是只有在使用ng-include加载列表中每个项目的模板时，enter动画才能工作。
我很确定这是angular-animate的一个bug，但不确定。在使用ng-repeat和ng-include组合时，我可能做错了什么。我试着挖掘angular-animate源代码并修复这个问题，但没有解决。我认为(希望真
浏览 3提问于2013-11-25得票数 1
我希望能够点击ng-repeat中的表格单元格来选择它(或者用CSS切换"on/off“)，但是我遇到了困难，可能需要一些帮助。
<tr ng-repeat="row in game.rows">
<td ng-repeat="word in row.words">{{word}}</td>
</tr>
td是由一个带有游戏用词的API播撒的。
控制器
'use strict';
angular.module('MyApp')
.controller(&#
浏览 3提问于2014-11-07得票数 1
回答已采纳
我所知道的是，当我想在视图中插入超文本标记语言时，我会使用'ng-bind-html'或'ng-bind-html-unsafe'。
我不知道的是，如何插入HTML并让Angular解析其内容
也就是说，如果有'ng-repeat'，我想让Angular来解析它？
更新1：
示例：
HTML：
<div ng-repeat="t in ts" ng-bind-html-unsafe="t.html()"></div>
JS：
function Controller($scope) {
浏览 0提问于2013-09-09得票数 20
回答已采纳
2回答
我有一个可以动态添加html控件的手风琴。我正在尝试弄清楚，当任何子控件变脏时，如何将手风琴面板的颜色更改为黄色。这是我到目前为止拥有的plnkr代码。1：
布局如下。
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/u
浏览 4提问于2014-10-02得票数 0
问题 如何使用Angular在HTML表格中有条件地插入一行？ 关于这个问题的更多细节 我正在使用Node-RED中的Angular，下面是我的表，它遍历了对象中的每个键/值： <table>
<tr>
<td>ID</td>
<td>State</td>
<td>Data</td>
</tr>
<tr ng-repeat="(key, value) in msg.shellies">
浏览 25提问于2020-12-22得票数 0
所以我使用ng-repeat来重复一些div，这些div显示了我的JSON文件中的图像。我想要做的是，当我单击该图像(无论是桌面图像还是移动图像)时，图像都会缩放。现在我的问题是，当我想要在我的图像标记上创建一个click事件时(它位于包含ng-repeat的div中)，他什么都不做。他看不到滴答声。
我在互联网上找到了一些关于jquery和angular的问题，但作为一个初学者，我很难理解我必须做些什么才能让它按我喜欢的方式工作。我只希望能够将jquery函数放在ng重复的div中的图像标记上，这样我就可以从那里操作css。
我在下面发布了一段代码，也许我必须向我的控制器添加一些东西？我不知
浏览 0提问于2015-01-20得票数 1
1回答
我正在开发一个更大的应用程序，我们正在使用延迟加载模块。加载模块之后，在某些情况下，组件会被呈现到<ng-container><ng-container>中。问题是，在容器上定义的动画没有被调用。
我创建了一个虚拟的stackblitz示例来演示我的意思：
app.component.html:
<ng-container *ngIf="visible" [@myAnimation]>
<hello [ngStyle]="{'top': '50px'}" name="not
浏览 1提问于2019-09-12得票数 3
我试图在一个指令中添加“在运行时”一个ng-repeat，当将相同的ng-repeat作为一个属性放在html中时，它不能工作，当从一个指令中添加时，它就不能了。请参阅下面的代码和插件。注意:这是一个非常简化的版本，但正如您所看到的，添加了行(我们有3行)，但值显示为空。谢谢。
编辑:我简化了示例，以便从实验中删除更多可能的噪音……
获得的结果：
以ng-repeat作为属性的列表
单品: A001
单品: A002
单品: A003
带有ng重复注入的列表
项目：
项目：
项目：
<script src="https://ajax.googleapis.com/ajax/
浏览 3提问于2016-11-30得票数 0
我正在学习这篇教程。
但是我一直收到这个错误：
EXCEPTION: No Directive annotation found on CoursesComponent
我的app.components.ts看起来像这样
import {Component} from 'angular2/core';
import {CoursesComponent} from './courses.component';
@Component({
selector: 'my-app',
template: '<h1>He
浏览 0提问于2016-12-05得票数 1
我有一个指令如下，
angular.module("sample").directive("sampleDir", [
"$compile", function($compile) {
return {
restrict: "E",
replace: true,
scope: {
options: '=',
source: '='
},
templateUrl
浏览 3提问于2015-03-30得票数 1
回答已采纳
我想在DOM准备好的时候运行一些jquery代码。我用过
angular.element(document).ready(function() {
$(".hover-brown").mouseover(function(e) {
if ($(e.target).closest('.hover-yellow').length == 0) {
$(this).not(".hover-yellow").css("background", "#e8e8e8");
}
浏览 0提问于2015-07-27得票数 3
3回答
角js :无法创建指令
、、、
我正在尝试创建指令，但是我的指令函数没有被调用。
index.html
<div ng-repeat="que in questions.Cars">
<question-dir>print from direcetive</question-dir>
</div>
ConytrolDirective.js
(function () {
"use strict";
angular
.module("autoQuo
浏览 0提问于2016-07-15得票数 4
回答已采纳
3回答
我正在尝试统一标识表格中的按钮，这样如果其中一个按钮被单击，我就可以更改样式。这是我正在处理的表格：
下面是代码：
<table class="table">
<thead>
<tr>
<th>Allergi navn</th>
<th>Allergi verdi</th>
</tr>
</thead>
<tbody>
<tr
浏览 21提问于2017-12-18得票数 1
4回答
我试着在我的网站上显示“星级”(出于评级目的)。
<div>
<span ng-repeat="_ in ((_ = []) && (_.length=fullstars) && _) track by $index" class="fa fa-star"></span>
<span ng-repeat="_ in ((_ = []) && (_.length=halfstars) && _) track by $index"
浏览 0提问于2016-01-27得票数 0
2回答
我们的团队在ServiceNow中创建了一个小部件，该小部件显示一行图标，并在单击图标时在div中显示/隐藏其他详细信息。这就是我们的html和客户端控制器的样子：
<div class="icons">
<ul class="flex justify-content-center align-items-center">
<li ng-repeat="item in c.data.linksArray track by $index">
<a class="link
浏览 7提问于2020-02-21得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
