如何在ng-repeat中将js变量输入到过滤器中
在ng-repeat中将js变量输入到过滤器中，可以通过以下步骤实现：
- 在HTML模板中，使用ng-repeat指令来循环遍历一个数组或对象，并在每次迭代中创建一个新的作用域。
- 在ng-repeat指令中，可以使用{{}}插值表达式来访问作用域中的变量。
- 在插值表达式中，可以将js变量作为参数传递给过滤器。过滤器可以用于对数据进行格式化或筛选。
- 在ng-repeat中，可以使用管道符（|）将变量传递给过滤器。管道符将变量传递给过滤器，并将过滤器的输出作为ng-repeat的迭代结果。
以下是一个示例代码，演示如何在ng-repeat中将js变量输入到过滤器中：
<div ng-repeat="item in items">
{{ item | myFilter: jsVariable }}
</div>在上面的示例中，ng-repeat循环遍历名为items的数组。在每次迭代中，将数组中的每个元素传递给过滤器myFilter，并将jsVariable作为参数传递给过滤器。
请注意，myFilter是一个自定义过滤器，你可以根据自己的需求定义和实现它。过滤器可以在AngularJS的控制器或模块中定义。
对于腾讯云相关产品和产品介绍链接地址，由于不能提及具体品牌商，建议你访问腾讯云官方网站或进行相关搜索，以获取与云计算相关的产品和服务信息。
相关·内容
app.js
angular.module('capilleira.clickAndGambleMobile', [
'capilleira.clickAndGambleMobile.filters'
)]
filter.js
angular.module('capilleira.clickAndGambleMobile.filters', [])
.filter('sportsFiltered', function() {
return function(output) {
return alert(
浏览 2提问于2015-02-05得票数 4
回答已采纳
2回答
我想使用一个带有ng-repeat的过滤器。不幸的是，它似乎忽略了附加到过滤器的函数的结果。
HTML：
<a ng-repeat="item in date track by $index | filter: filterFunction('2015-09-23',item)" class="item item-icon-left" >
<div class="listcontent">{{title[$index]}}
<br> <span class=
浏览 1提问于2015-04-12得票数 1
你将如何创建一个精细化的搜索？在下面的代码中，过滤器对两个列都起作用。例如，如果你输入约翰，你将得到约翰史密斯和史密斯约翰。我想用下拉列表作为过滤器。我查看了其他提到过滤器的帖子: object.value之类的。
我认为我需要将下拉列表设置为一个值，然后将其输入文本框并过滤到表中。
HTML
<div ng-app="searchApp" ng-controller="searchCtrl">
<br>
<br>
<input type="text" ng-model="
浏览 0提问于2016-06-07得票数 1
回答已采纳
当我使用ng-repeat迭代一些数组时，我想使用filter中的参数
示例：
HTML-Part：
<tr ng-repeat="user in users | filter:isActive">
JavaScript-part：
$scope.isActive = function(user) {
return user.active === "1";
};
但是我希望能够像这样使用过滤器
<tr ng-repeat="user in users | filter:isStatus('4')">
浏览 0提问于2012-08-17得票数 75
回答已采纳
我创建了两个自定义过滤器，并尝试在ng-repeat中使用这两个过滤器。
如何将第一个过滤器的结果作为第二个过滤器的输入？
我尝试在ng-repeat中使用别名，但不起作用。
<input type="text" ng-model = "ageLimit" />
<input type="text" ng-model = "lastSeen" />
<div ng-repeat = "member in lists | ageFilter:ageLimit:lists as results |
浏览 0提问于2014-10-30得票数 3
我为我的问题的混乱描述道歉。我希望你能理解它。我有这个HTML代码：
<form>
<input ng-model="attr.query" type="text" placeholder="{{attr.attr_name}}" ng-repeat="attr in attrs">
</form>
<table>
<tr ng-repeat="element in elements">
浏览 1提问于2013-10-04得票数 1
我尝试在输入框中过滤用户输入的数组，但我无法这样做。
我在Angular JS 1中使用的方法是
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | f
浏览 10提问于2017-03-08得票数 1
我正在尝试创建一些功能，用户将有一个输入框，并且下面的所有数据(Li)都是隐藏的。然后，当用户在输入框中输入时，将显示与该文本匹配的li。
用角度做这个最好的方法是什么？我在下面设置了柱塞：
我在考虑把李设为：
li {
display: none;
}
然后用ng模型作为值来尝试ng-if。就像这样：
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Search</span>
<
浏览 2提问于2015-06-08得票数 0
回答已采纳
在我的一个角度应用程序中，当我传递ng-重复键时，我将得到值。
在这里，行在rowsdata中有类似于'my file1 data', 'my file2 data', 'my file3 data'的值
但我需要把它传递给'myfile1data', 'myfile2data', 'myfile3data'
当我使用rows.replace(‘'，'')时，它只删除了第一个空格，比如'myfile1 data', 'myfile2 data'
浏览 7提问于2014-03-11得票数 4
回答已采纳
我成功地创建了一个小的示例，它可以根据实际情况工作，并且可以重现问题。它是一个从数组中随机删除2个元素的过滤器：
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="utf-8" />
<script src="https://code.angularjs.org/1.6.5/angular.js"></script>
<script>
angular.modu
浏览 3提问于2017-07-18得票数 0
回答已采纳
我有一组有角JS的物体。
为了显示这个数组，我在输入字段中使用ng-repeat和filter。
问题是当我在字段中输入文本时，ng-repeat会对数组进行过滤和更改索引。
过滤前的默认数组：
0 => obj(o)
1 => obj(b)
2 => obj(c)
如果输入"b“，则得到输出列表：
0 => obj(b)
但是对于索引0，if元素是一个。所以索引0在过滤前有obj(o)。
如何保存过滤后将为1 => obj(b)的索引？
浏览 2提问于2015-08-18得票数 1
回答已采纳
2回答
我已经复习了很多关于如何过滤列表的教程，但是找不到简单用例的例子。
我有几个按钮，比如
<a href="#" id="filter-by-name">Name</a>
<a href="#" id="filter-by-age">Age</a>
<a href="#" id="filter-by-height">Height</a>
我有var persons = {...}对象，我显示它就像
<div ng-repea
浏览 2提问于2013-01-17得票数 21
回答已采纳
我有输入字段：
<input type="text" ng-model="in">
另请选择列表：
<select ng-model="sel"></select>
我如何在ng-repeat中使用两个过滤器，类似于：
ng-repeat="item in arr | filter:sel | filter:in"
表头我的选择列表：
<div ng-controller="TestController">
<select ng-controller=&#
浏览 0提问于2015-07-12得票数 4
回答已采纳
2回答
我面临着将同一id的元素分组的问题。
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
Group name: {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
js代码：
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name:
浏览 3提问于2017-03-27得票数 2
尝试从输入框中输入排序条件，并动态地对内容进行排序。代码工作正常，但当我试图更改时：
orderBy:'age'
使用
orderBy:'{{criteria}}'
它不起作用。以下是代码：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="testApp&
浏览 8提问于2015-12-12得票数 1
回答已采纳
1回答
我已经编写了以下自定义过滤器
HTML代码是：
<!DOCTYPE>
<html>
<head>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCont">
<div ng-repeat="b in ar2">
{{b}}
浏览 1提问于2017-10-26得票数 0
回答已采纳
所有代码都在这里：
Filter: <input type="text" ng-model="search">
<tr ng-repeat="(id, group) in groups | filter:search" class="editing-{{group.editing}}">
如果行与输入中的内容不匹配，我希望将它们过滤掉。它似乎什么也做不了。我知道{{search}}正在更改，但筛选器不起作用。
浏览 1提问于2014-06-04得票数 0
我正在显示一个角度表，大约有1,000行，每行有5个输入(总共有5,000个输入字段)。它是一个标准的角度表，对行使用ng-repeat。
数据被快速下载到客户端。但是-问题是角度渲染速度慢。
在MacBook专业版上，加载需要10秒。在Chromebook上，这需要40秒以上。
我正在寻找一种延迟渲染的方法。我相信你们中的许多人都遇到过这个问题--有谁能告诉我可能的解决方案吗？
浏览 1提问于2015-10-05得票数 3
我正在尝试创建一个嵌套的ng-repeat循环。它使用来自的groupBy和toArray过滤器。
问题是我在嵌套数组中有一个可编辑的输入字段。如果没有在ng-repeats上实现"track by“，每次输入的值发生变化时，它就会失去焦点。
如果我尝试将track by放在repeats上，它会断开并显示许多具有空值的字段。在这种情况下，有没有办法正确地实现track by，以便重复正确显示，并且我可以在输入字段中键入内容而不会失去焦点？
下面是一个例子，如果你运行它，你会发现一旦你编辑了输入，你就失去了焦点：
var app = angular.module('App&
浏览 1提问于2015-05-11得票数 1
我为<input>中的项目名称列表设置了一个简单的AngularJS搜索筛选器。
我的清单是这样的：
var uniqueLists = {
category1: ['item1', 'item2', 'item3' ... 'item180' ], // Real list contains ~180 items
category2: ['itemA', 'itemB', 'itemC' ... 'itemZZZ' ], // Real
浏览 6提问于2013-07-31得票数 38
回答已采纳
3回答
我需要在我的循环中使用过滤器。假设我们有一个简单的数组，其名称是：['Thomas', 'Brian', 'Joana']。我想查看过滤过的一组名字。当我使用角滤波器时，它就像预期的那样工作：
<input ng-model="filterText" />
<span ng-repeat="name in names | filter:filterText">{{name}}</span>
但是，当我想使用一些自定义筛选方法时，当“filterText”输入的值被更改时，它就不能
浏览 7提问于2017-03-18得票数 0
回答已采纳
3回答
我在适当过滤我的结果时遇到了一些问题。我正在尝试使用一个自定义过滤器，它从最小输入和最大输入中获取参数。
/index.html
<input ng-model="minHorsepower">
<input ng-model="maxHorsepower">
...
tr(ng-repeat="plane in planes | filter:horsepowerFilter")
/controllers.js
//Horsepower filter
$scope.horsepowerFilter = function(
浏览 1提问于2014-01-14得票数 2
回答已采纳
2回答
我是安古拉人的新手，我试着做这样的事情：
<div ng-repeat="size in sizes">
{{size.name}}
<input ng-model="price_{{size.id}}" required type="number">
</div>
我读过关于ng-repeat和数据绑定如何工作的文章。但是我不知道如何解决这样的问题，我的产品可能有很多尺寸，我想要显示这么多的输入框和大小的数目。这样我就能为每个尺码输入一个价格。
浏览 5提问于2014-04-18得票数 0
回答已采纳
在我的项目中，我有一个表，在其中循环遍历一个数组。我希望用户可以通过显示他们的数据和他们的名字或者显示所有的数据来过滤这个表。
我有一个这样的控制器：
var app = angular.module('app', []);
app.controller('Ctrl',[], function($scope){
$scope.LoggedInTeacher = 'Papa Johns';
$scope.Teachers = [{Id: 1, Name: 'Patricia Johns' , Subject: 'Scienc
浏览 1提问于2016-06-01得票数 0
回答已采纳
1回答
我有三个输入框来过滤"tradeDate“字段
<input type="text" placeholder="Date YYYY" ng-model="search.DateYear">
<input type="text" placeholder="Date MM" ng-model="search.DateMonth">
<input type="text" placeholder="Date DD" ng-model=
浏览 1提问于2016-06-15得票数 0
回答已采纳
我有一个输入，它使用带有过滤器的ng-value来显示一个数字。
<input ng-value="myDataCollection | customFilter">
我还想应用ng-class将文本颜色更改为红色，如果是负色。
<input ng-value="myDataCollection | customFilter" ng-class="{'negative-input': (myDataCollection | customFilter) < 0}">
这是可行的，但在我的用例中，过滤器要
浏览 22提问于2017-02-02得票数 0
2回答
如果不使用span，则不会显示li标记中的按钮，但一旦使用ng-repeat，则不会显示span或按钮。我曾多次使用ng-repeat，但从未遇到过这种情况，如果在li标记中使用ng-repeat，则不会显示span和按钮元素。
这是index.html文件：
<ul id="contactdelete">
<li ng-repeat="contact in $ctrl.contacts">
<span>{{contact.name}}</span>
<button n
浏览 3提问于2016-07-21得票数 1
回答已采纳
我试过所有关于这个问题的答案，但是我找不到一个方法来消除这个错误。我很确定这个过滤器函数是导致上述错误的原因。
.filter('collect_ingredients', function() {
return function(input) {
if (!angular.isArray(input)) {
return input;
}
var result = {};
angular.forEach(input, function(value){
if
浏览 3提问于2016-10-03得票数 2
回答已采纳
3回答
我制作了一个来显示我的问题所在。第一部分是以部分方式工作的。参见第15行。我手动将谓词放入过滤器(谓词是l_name)中，并且正在工作。该表将按姓氏列进行筛选。
<tr ng-repeat="item in items | filter:{l_name:myInput}">
当我使用select (模型名为mySelect2)选择要过滤的谓词时，示例的第二部分不起作用(请参见第36行)。
我尝试做的是使用select按谓词选择列，并在该列中过滤输入。
<tr ng-repeat="item in items | filter:{mySelect2:my
浏览 4提问于2013-06-09得票数 2
我有一份表格html如下：
<div class=\"container\">\r\n\t<div class=\"clearfix row
\">\r\n\t\t<div class=\"col-md-12 column\">\r\n\t\t\t<h3>\r\n\t\t\t\tNew form created\r\n\t\t\t<\/h3
>\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t <label&
浏览 1提问于2015-06-05得票数 3
回答已采纳
2回答
在AngularJS中，如何将参数传递给自定义过滤函数？在本例中，我需要在filter函数中同时提供task和status。
但是Angular只注入task。如何添加status
HTML
<div ng-repeat="status in statuses">
Selected Status: {{ status.title }
<ul>
<li ng-repeat="task in tasks | filter:customFilter">
Task Status:
浏览 0提问于2013-05-29得票数 1
回答已采纳
2回答
我的角度代码有问题。
我尝试使用角过滤器服务过滤和数组，但是当我过滤过滤器中的数组时，它复制了，而不是接受数组中的每个元素，我尝试了跟踪，但它似乎不起作用。
这是我的角度代码：
.filter('priceRange', function() {
return function(arr, range) {
if (!range) {return arr; }
var priceResult = [];
var pRange = range.split('-');
浏览 2提问于2016-03-07得票数 0
回答已采纳
在具有隔离作用域的指令上使用筛选器的尝试：
<div tags="p.tags | refTags"></div>
导致$digest循环中的无限循环：
当应用程序的模型变得不稳定，并且每个$digest循环触发状态更改和随后的$digest循环时，就会发生此错误。角检测到这种情况，防止无限循环导致浏览器失去响应。。
.directive 'tags', ->
restrict: 'A'
scope:
tags: '='
templateUrl: 'pa
浏览 3提问于2014-01-13得票数 2
回答已采纳
我是AngularJS的新手。我正在尝试过滤由recipeService提供给作用域的recipe对象列表。我的对象出现了，但没有应用任何滤镜。
如果我将这些项直接附加到$scope的controller.js中名为recipes的变量，而不是使用ng-repeat="recipe in recipes"，过滤器就能正常工作。
有什么建议吗？致以问候。
HTML
<li ng-repeat="recipe in recipeService.allRecipes | orderBy:'name':reverse">{{recipe.na
浏览 0提问于2015-02-14得票数 0
我正在用Angularjs构建我的第一个应用程序--我一直在编辑下面的代码，试图从googlesheet的json文件中完成项目的搜索/筛选。
到目前为止，它是有效的，但我已经遇到了两个问题，我想要一些建议。
筛选下拉筛选器中的唯一选项。我试图整合我在网上找到的几个不同版本的东西，但我遇到了一个死胡同。
我还想对结果进行分页。
对于第一个元素和惟一的filer或ng选项，我非常感谢您的帮助，也许我也会对如何将第二个控制器应用到代码中以启用分页提供一点帮助。
var app = angular.module('myApp', []);
//
app.contr
浏览 4提问于2017-04-04得票数 1
回答已采纳
1回答
我正在尝试根据用户的文本输入过滤我的标记，但不确定如何让它工作。我使用的是javascript和leaflet.js。这是带有硬编码过滤器的代码示例，但我希望能够根据用户输入过滤数据。
var stops = L.geoJson(points, {
onEachFeature: function (feature, layer) //functionality on click on feature
{
layer.bindPopup(String('Stop Name:' + ' ' + feature.properties.S
浏览 2提问于2016-04-14得票数 1
我对天使很陌生，所以我不确定我想做的是不是正确的方法。基本上，我想在我的页面中显示一个嵌套的对象和一个过滤器，这样用户就可以很容易地在输入上键入关键字，内容就可以被过滤，只显示过滤器找到的记录。
然而，我注意到过滤器得到了整个父对象，并且我期望只显示记录，所以使用下面的代码，如果我搜索日本，它将显示悉尼、墨尔本和洛杉矶。
Javascript
<script type="text/javascript">
var demoApp = angular.module('demoApp',['ngSanitize']);
d
浏览 2提问于2014-09-01得票数 1
2回答
我正在使用Angular Js开发一个web应用程序。我想使用ng-repeat指令将div填充到我的html视图中。ng-repeat使用的数组有一些重复项，但在我的视图中，我希望只显示一次项(如果元素已经显示，则其副本必须以图形方式隐藏)。我该怎么做呢？
<div ng-repeat="item in selectedProcedures track by $index">
<span>{{item.id}}</span>
</div&g
浏览 0提问于2015-10-09得票数 0
我有一个带有多个过滤器的ng-repeat，如下所示：
Active Items Found: {{totalActiveItems}}
<div ng-repeat="item in items | filter:searchFilter | filter:{active:true}">
{{item.title}}
</div>
我尝试在totalActiveItems变量中存储ng-repeat之外的总计数。
我看到了这个答案：
但它似乎没有显示如何对多个过滤器执行此操作。
浏览 1提问于2017-09-04得票数 2
页面上有unput字段：
<input type="text" ng-model="searchInside">
还有下面的ng-repeat：
ng-repeat="item in details track by $index | filter:searchInside"
当我在输入过滤器中插入符号时，searchInside不工作
浏览 1提问于2015-05-31得票数 2
回答已采纳
1回答
在HTML中我有指令ng-repeat
<div ng-repeat="friend in friendList.active | filter:searchName">
还可以使用ng-model="searchName"输入字段
<input type="text" ng-model="searchName" maxlength="10" placeholder="">
当我在ng-repeat中输入文本块时没有排序，为什么？
响应friendList.active AJ
浏览 1提问于2015-04-05得票数 3
回答已采纳
为什么我不能在Django模板中输入这个呢？
data|customTag:variable,forloop.parentloop.counter
我只想把三个或更多的参数传递到过滤器中。
假设已经存在for循环，并且变量/筛选器已在其他地方定义
浏览 3提问于2015-01-08得票数 2
2回答
我有django，即服务api，以及静态文件(包括html文件)，在html中我使用的是角
index.html
<div class="container">
<div class="row">
<div class="col-sm-8 blog-main">
<div ng-view></div>
</div>
</div>
</div>
app.js
sampleApp
浏览 3提问于2016-03-20得票数 0
我刚接触到角度js .Here，我试图通过从currentTemp variable.But中减去用户输入(X)来过滤数据，不确定我是否可以访问自定义过滤器中的用户输入值。我计划在以后使用同样的东西，on.For现在可能会提供关于使用custome filer(使用输入值并在自定义过滤器中减去它)的可能性的反馈，其他逻辑也会非常有用。
var app = angular.module('tempfilter', []);
app.controller('MainCtrl', function($scope) {
$scope.sensordat
浏览 3提问于2015-02-20得票数 4
回答已采纳
我完全确定我这样做是错误的，但是看着我对angularjs是如此的新手，我不知道如何实现我想要的。我使用ng-repeat遍历了一组用户，但是我不知道如何通过作用域变量userId进行过滤。User id: <name>打印得很好，所以作用域没有问题。如何让ng-repeat循环按此userId排序？如果我做错了什么，你可以链接我的文档，帮助我以正确的方式去做。
HTML：
User id: {{userId}}
<br>
User Name:
<ul>
<li ng-repeat="user in users | filter:{{u
浏览 15提问于2017-02-18得票数 1
回答已采纳
我正在尝试根据输入文本对anguarjs中的项目列表进行排序，因此，如果我在输入中输入" author“，则列表将按author排序
我的代码是
<input type = "text" ng-model = "sort">
<ul class = "list-unstyled">
<li ng-repeat = "comment in dishCtrl.dish.comments | orderBy: sort">
<blockquote class
浏览 5提问于2016-05-08得票数 4
1回答
我的目标是创建一个搜索框，通过搜索所有字段或特定属性来筛选集合。这将由选择决定。
它能够像预期的那样，按特定属性搜索，使用这个自定义筛选器: my
<tr ng-repeat="smartphone in smartphones | filter: search ">
JS-
$scope.search = function (item){
if (item[$scope.selectedSearchBy].indexOf($scope.query)!=-1) {
return true;
}
return false;
};
注意，为了搜索所
浏览 3提问于2014-05-30得票数 1
回答已采纳
1回答
<li class="column__list--item" ng-repeat="skill in skills | filter: { skillset_id: filterbySkillset }">
我注意到，当我尝试使用上面的过滤器，它过滤任何它的部分匹配。因此，如果我有skillset_id's of 10 11 12和filterbySkillset is 1，那么它将与10 11 12相匹配。
但我需要的是完全匹配而不是部分匹配
谢谢
浏览 6提问于2014-09-26得票数 0
回答已采纳
下面是使用ng-init的代码：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>Looping wit
浏览 3提问于2016-06-30得票数 3
回答已采纳
我在ng-repeat中有一个对象数组，我希望对其进行过滤。
%input{type: 'text', 'ng-show' => "content == 'include'", 'ng-model' => "search.author"}
%input{type: 'text', 'ng-show' => "content == 'exclude'", 'ng-model' => "sea
浏览 3提问于2015-04-09得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
