比较两个数组并更改angular中ng-repeat项的样式
在Angular中，可以使用ng-repeat指令来循环遍历数组并渲染相应的HTML元素。如果需要比较两个数组并更改ng-repeat项的样式，可以通过以下步骤实现：
- 在组件中定义两个数组，假设为array1和array2，分别存储需要比较的数据。
- 在HTML模板中使用ng-repeat指令遍历array1，并使用ng-class指令来动态设置样式类。ng-class可以接收一个对象作为参数，根据条件动态添加或移除样式类。
<div ng-repeat="item in array1" ng-class="{'highlight': array2.indexOf(item) !== -1}">
{{ item }}</div>
在上述代码中，使用ng-class指令来判断array2中是否包含当前遍历的item，如果包含则添加highlight样式类。
- 在CSS样式表中定义highlight样式类，用于设置需要更改的样式。
.highlight {
background-color: yellow; font-weight: bold;}
在上述代码中，设置了背景颜色为黄色并加粗字体。
这样，当array1中的项在array2中存在时，对应的ng-repeat项将会应用highlight样式类，从而实现样式的更改。
关于Angular和ng-repeat的更多信息，可以参考腾讯云的产品文档：
相关·内容
1回答
插入字母后失去焦点
、、、
我编写了一个脚本，它以两种方式表示json数据：
<!DOCTYPE html>
<html>
<head>
<script src="https://handsontable.github.io/ngHandsontable/node_modules/angular/angular.js"></script>
</head>
<body ng-app="app">
<div ng-controller="Ctrl">
浏览 4提问于2017-01-29得票数 1
回答已采纳
2回答
在中，我有一个整数数组，我已经将它附加到$scope.$watch中。当我更新数组时，我的$scope.$watch不会触发console.log。为什么我的console.log没有被调用？
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angul
浏览 5提问于2016-04-13得票数 1
回答已采纳
我正在对ng-repeat中的数组进行过滤。
div.row(ng-repeat="log in logs | prepare_log | orderBy: 'log.created'")
在prepare_log过滤器中，我这样做：
value.stack_trace = angular.fromJson(value.stack_trace)
如果我把它改成这样：
value.stack_trace = angular.fromJson(value.stack_trace).reverse()
我得到了下面的错误。
我不知道它是否相关，但我在内部ng-repe
浏览 1提问于2014-01-07得票数 9
回答已采纳
3回答
我正在尝试从获取两个随机口袋妖怪的数据。我可以很好地获取数据，但是我的angular $scope变量正在用第二个精灵覆盖第一个精灵，而不是同时存储两个精灵：
$http.get(endPoint)
.then(function(res){
$scope.pokemonName = res.data.name; // only one 'pokemonName' in $scope
});
你可以在视觉上看到口袋妖怪被加载和显示不正确(两个相同的神奇宝贝而不是两个不同的) 。
我可以手动声明两个独立的$scope变量，例如：
$scope.pokemon
浏览 15提问于2016-09-20得票数 0
回答已采纳
我对角(不是Javascript)非常陌生，所以如果我没有使用正确的术语/过程，我很抱歉。
我有一个这样的模型：
BuyingGroups: {
availableBuyingGroups: [
obj1: {
ID: XX,
Title: XX
},
....
],
affiliatedBuyingGroups: [
obj1: {
ID: XX,
Title: XX
},
....
]
}
有(2)窗格(把它们看作列表框)。
浏览 1提问于2016-02-04得票数 0
回答已采纳
我正在使用角度ui网格库，并面临着这个问题。我无法理解如何为具有多个值的单元格应用筛选器。列类别有一个内部数组，我通过cellTemplate显示该数组，如下所示
cellTemplate: "<div ng-repeat='item in row.entity[col.field]'>{{item.name}}</div>"
同样在类别列中，我有带有动态数组的选择筛选器，这是我通过服务获得的。
filter: {
type: uiGridConstants.filter.SELECT,
浏览 3提问于2016-10-28得票数 1
回答已采纳
与这个相关的是，假设您将$scope.items变量的设置包装在$interval中？
HTML：
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
<link rel="stylesh
浏览 1提问于2015-02-08得票数 0
回答已采纳
所以我刚开始使用angular JS，在处理数组时，我对ng-repeat有点困惑。当我将dayNames更改为一个对象并为其提供键值对时，下面的代码不能作为is...but工作。
var myApp = angular.module('exampleApp', []);
myApp.controller("dayCtrl",function($scope){
$scope.dayNames = ["sunday", "monday", "tuesday", "wednesday",
浏览 0提问于2015-02-22得票数 7
回答已采纳
如果有这样的p：
<p ng-repeat="text in texts">{{text}}</p>
向p添加更多的类是否会影响渲染html时的Angular性能？例如，下面的代码：
<p ng-repeat="text in texts" class="normal par red small italic">{{text}}</p>
如果它导致了性能问题，它真的值得注意吗？
浏览 0提问于2016-09-11得票数 2
我正在创建一个具有add/remove函数的表单。为了实现这一点，我尝试在ng-repeat中使用ng-repeat。下面是我的代码。
<button ng-click='add()'>Add more</button>
<div ng-repeat='x in array track by $index'>
<input ng-model='array[$index].name'></input>
<input ng-model='array[$index
浏览 3提问于2016-12-15得票数 0
回答已采纳
1回答
我有一个需要绑定在ng-repeat中的大列表，性能很差，所以我找到了这个链接：
并使用自定义的startFrom过滤器实现了相同的分页：
angular.module('myApp').filter('startFrom', function () {
return function (input, start) {
if (input) {
return input.slice(start);
}
};
});
这提高了性能，达到了可以接受的程度，但它破坏了我之前所做的筛选。现在，如果
浏览 4提问于2015-03-13得票数 0
回答已采纳
我正在将Angular 1.6代码转换为Angular 4，我有一个元素列表的问题。Angular 1.6中的代码是：
<select ng-model="$ctrl.level" ng-options="item as item.label for item in $ctrl.referentiel.levels | orderBy : 'index' track by item.id" id="childLevel" name="childLev
浏览 9提问于2017-07-28得票数 8
回答已采纳
angular.module("myApp",[])
.controller("myCtrl",function($scope) {
$scope.persons = [{name:"teja",age:11},
{name:"Ash",age:12},
{name:"teja",age:11}];
});
角不允许
浏览 4提问于2017-03-08得票数 0
回答已采纳
我有两个控制器和一个共享服务。控制器A是页面的主视图，其中包含一个填充了数据的ng-repeat。控制器B包含控制器A中ng-repeat的过滤选项。这工作得很好，下面我给出了一个基本的简化示例。
我的问题是:如何在控制器A中引入更复杂的过滤？我知道我需要使用一个函数来做复杂的过滤，这就是问题所在。
angular.module('app').factory('optionService', [/*'stuff'*/, options]);
function options(/*stuff*/){
var someOption = fal
浏览 0提问于2015-06-09得票数 2
我在angularjs中创建了一个自定义过滤器，它按日期对元素进行分组。
这是HTML部分：
<table ng-repeat="(index, groupData) in something = (recentTasks | groupBy:dataGroupBy) track by $index">
过滤器看起来像这样：
module.filter('groupBy', function () {
return function(items, field) {
var groups = [];
switc
浏览 12提问于2014-03-14得票数 2
1回答
下面是我的angular代码：
//first ng repeat
$http.get(server_base_url + "api/v1/testsectionlist/" + $scope.instslug + "/" + $scope.test Slug)
`enter code here`
.success(function(section Data) {
$scope.section Data = section Data;
})
//second ng repeat
$http.get(server_base_url + "api/v1
浏览 5提问于2017-08-03得票数 0
我的Angular应用程序中的刷新按钮有一个问题：
我有一个json对象，里面有两个数组-> data = {array1: [], array2: []}
我想循环两个数组并打印相关的值。为了实现这一点，我使用如下的Angular ng-repeat指令：
ng-repeat="index in [] | index:getTotalNumberOfObjectsInArray1()"
...
<span ng-bind="data.array1[index]"></span>
<span ng-bind="data
浏览 0提问于2015-06-24得票数 1
这是我的密码：
<h1 ng-repeat="item in func()">something</h1>
$scope.func = function(){
return [{"property" : "value1"},{"property": "value2"}];
}
在Angular.js诉1.1.1一案中，没有任何错误。在Angular.JS v1.2.1中，我得到了一个infDig错误。
你能解释一下这种情况吗？非常感谢。
浏览 2提问于2014-01-05得票数 8
我有一个非常简单的角度应用程序，无需刷新页面使用setInterval推送数据。现在，我如何监听或观察新的数据/更改，以便如果新的值/数据与以前的值不同，新的css样式将应用于该特定的新值(例如，它将字体颜色更改为红色)。
我的代码如下：
查看：
<h1>{{title}}</h1>
<ul>
<li ng-repeat="friend in friends"><strong>Name: </strong>{{friend.name}} : {{friend.user
浏览 0提问于2014-08-04得票数 1
我正在构建一个筛选器AngularJS，只显示查询中包含当前日期的数据，但我无法让它工作。
-J_Wjq2vkPJxCkmk3Wxp
Estado: "pendiente"
FechaActividad: "2014-11-11"
NombreActividad: "Actividad 1"
-J_WrCwULkPGRD5-mZ6z
Estado: "aprobado"
FechaActividad: "2014-10-11"
NombreActividad: "Activid
浏览 4提问于2014-11-12得票数 1
2回答
我似乎无法在array.push函数上更新angular2视图，该函数是从setInterval异步操作调用的。
代码来自此
我正在尝试做的事情如下：
import {View, Component, bootstrap, Directive, ChangeDetectionStrategy, ChangeDetectorRef} from 'angular2/angular2'
@Component({selector: 'cmp', changeDetection: ChangeDetectionStrategy.OnPush})
@View({tem
浏览 2提问于2016-03-27得票数 13
回答已采纳
我正在尝试使用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
1回答
假设您有一个名为users的变量，它是一个array
现在您有了下面的ng-repeat
ng-repeat="user in users | filterUser: searchUser: assignedUsers: selectedDivision"
现在，在使用searchUser和selectedDivision过滤用户之后，您希望收集所有可见的users。
Angular是否提供了一种方法来做到这一点，并避免一个红环？
注意事项
我接受了下面的答案，但我确实找到了另一种简单的方法：
ng-repeat="user in filteredUsers = (us
浏览 3提问于2015-09-09得票数 1
回答已采纳
1回答
例如，如果我在这里有所有书籍语言的json数据集：
$scope.data = [{
"title": "Alice in wonderland",
"author": "Lewis Carroll",
"lang": ["en"]
}, {
"title": "Journey to the West",
"author": "Wu Cheng'en",
"lang"
浏览 1提问于2016-01-14得票数 2
回答已采纳
我正在学习AngularJS，我正在尝试在h2中插入一个“净化”标题到ng-repeat中，但是我想不出如何访问对象中数组中的数据。其他一切都很好，我只需要'title‘值。
HTML：
<div ng-repeat="question in questions" ng-show="!!questions.length" class="question-list">
<h2><a ng-href="{{question.link}}" title="{{qu
浏览 3提问于2017-10-09得票数 1
回答已采纳
1回答
我有一个脚本的例子。简而言之，如果你点击“添加”，就会创建一些新的元素，就像它填入的字段一样。使用离子。有必要确保当你点击“添加”打开一个新的模板，并且已经在那里创建元素。但不是现在。
<!DOCTYPE html>
<html ng-app='main.app'>
<head>
<link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootst
浏览 1提问于2015-05-19得票数 0
我模拟了我的问题。
查看这个html，您可以看到我正在执行两个ng-repeat，其数组与输入相同，但对每一个都有不同的筛选器：
<div ng-app='Lists'>
<div ng-controller='listsController'>
<table>
<tbody>
<tr ng-repeat='item in listValues | filter : xxx track by $index' ng-
浏览 0提问于2015-09-22得票数 0
回答已采纳
1回答
我有一个使用ng-repeat的联系人列表(我使用我的控制器作为vm)，当我添加新联系人、编辑当前联系人或删除联系人时，该列表会更新-但当我尝试过滤列表时不会更新。下面是ng-repeat
<div ng-repeat="contact in vm.contacts | filter:query | orderBy:'firstname' track by contact._id" class="list-item pointer" ng-class="{'dker': contact.selected }"
浏览 0提问于2016-04-08得票数 0
我在和父母和孩子一起工作。子组件是单向数据绑定('<')，它通过父组件中的数组通过ng-repeat传递给值。
<li ng-repeat="item in $ctrl.items">
<child-component item="item"></child-component>
</li>
其构成部分：
var childComponent = {
bindings: {
item: '<'
},
controller: 'ChildCo
浏览 2提问于2017-09-12得票数 2
我有两个重复重复的单子。但是，当我从第一个div中更改一个列表项的内容时，第二个div接收相同的值。我以为ng-重复有隔离的范围？我如何将ng重复的隔离归档？
编辑：“在大多数情况下，指令和作用域相互作用，但不创建新的作用域实例。但是，一些指令，如ng-控制器和ng-重复，创建新的子作用域，并将子作用域附加到相应的DOM元素。”
<div ng-controller="MyCtrl">
<button ng-click="newitem()">add item </button>
<div ng-repeat="
浏览 0提问于2014-02-02得票数 2
回答已采纳
在重新实现了基于angular材料上的演示的fab快速拨号后，我已经设法设置了位置，但我似乎想不出如何设置拨号之间的间距。
他们真的很接近彼此。我试过设置边距和填充，但在按钮中，它似乎不正确，因为它甚至在关闭模式下也适用，而只打算在打开模式下设置。
HTML
<div ng-controller="DemoCtrl as demo" layout="column" ng-cloak="" class="fabSpeedDialdemoBasicUsage" ng-app="MyApp">
&l
浏览 9提问于2016-09-18得票数 1
回答已采纳
这是我的js代码
var MYModule = angular.module('myApp', ['ngRoute', 'myAppServices'])
.directive('loading', ['$http', loadingDirective])
.config(myRouter);
angular.module('myAppServices', ['ngResource'])
.factory('Users', functio
浏览 0提问于2014-04-23得票数 2
回答已采纳
对于我的AngularJS应用程序，我在ng重复中有一个ng重复，如下所示：
Html：
<div ng-app="myApp">
<div ng-controller="myController">
<h2>working filter</h2>
<div ng-repeat="category in categories">
<h3>{{category}}</h3>
&l
浏览 2提问于2013-05-17得票数 5
回答已采纳
1回答
我的HTML
ng-app和ng-controller在前面的标记中指定。
<div class="statusEntry" ng-repeat="statusInput in statusInputs">
<span class="userName"> a </span>
<span class="statusMsg"> b </span>
</div>
控制器
app.controlle
浏览 0提问于2014-03-27得票数 2
回答已采纳
2回答
我一直在努力过滤两个不同的数组，一个是复选框值，另一个是整个数据。换句话说，第一个数组包含来自sharepoint列表的字段值，第二个数组包含来自同一sharepoint列表的项。如何根据选中的复选框进行筛选。下面是我的代码：
<div ng-repeat="x in processes">
<input type="checkbox" ng-model="filteredData"/>{{x}}
</div>
<div ng-repeat = "y in toBeFiltered | filt
浏览 1提问于2018-03-13得票数 0
我试图取消复选框与提交按钮。其思想是什么时候选中复选框，显示按钮，何时单击按钮，复选框未选中，按钮被隐藏。
HTML页面：
<html ng-app="myApp" ng-controller="myCtrl">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="script.js"><
浏览 1提问于2014-09-24得票数 0
回答已采纳
我想在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
我在控制器中有两个自定义函数：
$scope.isCategory = function(){
return true;
}
$scope.isStatus = function(){
return true;
}
<tr ng-repeat="item in filtered = (projects | filter:isStatus) | orderBy : 'created_at'">
我需要在filter中同时使用这两个函数。我尝试了这个条目：
<tr ng-repeat="item in filtered
浏览 0提问于2017-03-10得票数 1
回答已采纳
我正在学习使用一个角的。我试图从数组中删除选中的对象，但它们并没有一次全部删除。这是我的代码，
<body ng-app="myApp">
<div ng-controller="myController">
[<a href="" ng-click="remove()">remove</a>]
<ul>
<li ng-repeat="user in users">
<inpu
浏览 2提问于2015-08-24得票数 1
2回答
目前，我的页面上有两个列表，所有可用选项的总列表，以及选定的选项列表。
当从所有可用选项中选择一个选项并将其添加到我选择的选项列表中时，我希望将所选选项隐藏在所有可用选项的选择列表中，而不是删除而是隐藏。
下面是我制作的一些代码的链接，这些代码包含了页面的基本知识，而不是隐藏的部分，我们非常欣赏java脚本或角度解决方案。
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="4.0.5" rel="styl
浏览 2提问于2017-01-24得票数 0
回答已采纳
在这种情况下，我希望用户在希望输入新项时动态添加<input>行。如下图所示，用户单击“”按钮，在用户可以添加文本的地方添加一个新的输入元素。
我试图将每个输入元素值关联到app.js中的模型app.js(一个数组)。在我的index.html中，我使用一个ng-repeat加载$scope.items。我不明白的是，如何让每个输入/行由定义为$scope.items的模型自动添加和管理。
是否有可能将每个输入元素映射到与items数组相关的ng模型，如果是的话，如何映射？或者，在这种情况下应该使用指令吗？
完整的代码和运行时都在柱塞器上(以便您可以查看奇怪的输出)。
来
浏览 3提问于2014-06-02得票数 0
回答已采纳
1回答
我有一个表单，它将数据提交到一个名为ng-submit="newBirthday()的函数中，这会将数据- $scope.bdayname, $scope.bdaydate;推到一个名为bdaes的数组中。
我的问题是，在我看到的所有教程中，数组都有预定义的数据，是否有一种方法可以成为一个空数组，在提交数据时填充它呢？
app.js:
var app = angular.module('birthdayToDo', []);
app.controller('main', function($scope){
// Start as not v
浏览 1提问于2013-03-16得票数 1
回答已采纳
2回答
对于通过“添加”按钮添加的每个品牌和型号，我需要检查重复项，如果有重复项则设置警报，并且不让其添加到表中。似乎找不到解决方案...
下面是我正在做的初学者项目的完整代码。我为这篇文章提前道歉，这是我第一次来这里…谢谢大家。
<div>
<div>Make: <input type="text" ng-model="make"></div>
<div>Model:<input type="text" ng-model="model"></div&g
浏览 2提问于2017-02-07得票数 0
回答已采纳
3回答
在角上操纵JSON对象
、、、
我使用的是角，我使用$http.get来获得一个JSON响应，并将其设置为$scope.myObjects。
当我在html中使用ng-repeat="object in myObjects"时，它可以工作。
我想知道，有办法操纵这些物体吗？我希望创建一个名为myBoolean的属性，并为myObject中的每个对象将myBoolean设置为true。
当试图在控制器中操纵这个对象时，可以执行如下操作：$scope.myObjects.something，我得到了myObjects is undefined
当我试图在浏览器中查看JSON响应时，我看到的只是对象对象。是否有查看
浏览 0提问于2016-01-04得票数 0
回答已采纳
我正在尝试在我的angular js应用程序中使用Kendo grid。我正在创建一个指令，这样我就可以在应用程序的不同表中使用它。一旦ng-repeat呈现了我想要调用的dom : element.kendogrid()。由于ng-repeat没有渲染后回调，因此有人建议使用两个指令: 1-
angular.module('app')
.directive('rowDirective', function () {
return function(scope, element){
if (scope.$last){
浏览 0提问于2013-07-31得票数 0
我目前有以下代码：
<div class="carousel" ng-if="novedadesEmpleados.cumpleanosDeHoy.length">
<div ng-repeat="empleado in novedadesEmpleados.todaysBirthdays" carousel-renderer class="event-card">
<birthday-card empleado="emplea
浏览 0提问于2018-06-12得票数 0
5回答
如何使用字符串索引对数组进行ng-repeat？请看下面的代码片段-
下面的代码是控制器中的代码。
$scope.days = ["mon", "tue", "wed" .... "sun"];
$scope.arr = [];
$scope.arr["mon"] = ["apple","orange"];
$scope.arr["tue"] = ["blue","swish"];
.
.
.
$scope.arr["sun&#
浏览 7提问于2016-05-14得票数 3
1回答
我正在进行一些自定义验证，并使用ngDialog显示错误。但出于某种原因，在获得此错误时：
Error: [ngRepeat:dupes] http://errors.angularjs.org/undefined/ngRepeat/dupes?p0=error%20in%20checkoutError&p1=string%3Ae
at Error (native)
at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular.min.js:6:453
at http://cdnjs.c
浏览 2提问于2014-09-21得票数 2
回答已采纳
1回答
我有一个伪代码，其中使用单向绑定运算符(::)尝试查看angular是否在监视更改。所以我不得不把它包含在一个input标记中。input标记内的model data应该以一种方式进行解析，因为它之前是::。但是，如果我对输入进行了更改，并单击按钮查看更改，则会在日志中反映更改。但它不应该关注这些变化。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs
浏览 5提问于2015-11-25得票数 1
可以从$scope对象获取html元素(用于样式设置)吗？
我在$scope.array上使用了一个$scope.array，我知道$scope.array[0]对应于ng-repeat创建的HTML中的第一个元素，那么是否有可能通过$scope.array中的$scope获取HTML元素本身的？
浏览 3提问于2014-06-27得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
