- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想过滤过滤类别中的网站,并按照排名顺序显示。代码片段是:
<div ng-repeat="category in categories | filter:{will return more than one category}">
<div ng-repeat="website in websites | orderBy:'rank'| filter:{ parent_id : category.id }:true">
{{website.title}},{{website.rank}}
</div>
</div>
但是在嵌套循环中,由于orderby是在内层循环中,所以在外层循环的每一次迭代中都起作用,但是整体的结果并没有按照rank排序。假设有三个类别,过滤器给出 cat1 和 cat2。如果排名 6、2、5 的网站是 cat1 和 9,1 在 cat2 中,那么结果将是 2、5、6、1、9。我希望结果是 1、2、5、6、9。如何我应该这样做吗?
我应该在某个函数中传递类别并编写 js 代码来获取过滤网站的数组,然后对它们进行排序并将它们返回到模板,还是有其他更好的方法在模板本身中执行此操作?
最佳答案
我认为你想做的事,不能按原样去做。无论如何你可以使用 custom filter .
此方法为您提供了一个类别选择机制,作为您如何使用此自定义过滤器的另一个示例。
angular.module('app',[])
// categories
.value('categories', [ { id: 0, title:"first" }, { id: 1, title:"second" }, { id: 2, title:"third" } ])
// websites
.value('websites', [ { rank: 3, parent_id: 2, title: "Alice" },
{ rank: 1, parent_id: 1, title: "Bob" },
{ rank: 9, parent_id: 1, title: "Carol" },
{ rank: 2, parent_id: 0, title: "David" },
{ rank: 4, parent_id: 0, title: "Emma" },
{ rank: 5, parent_id: 0, title: "Foo" } ])
// controller,
.controller('ctrl', ['$scope', 'categories', 'websites', function($scope, categories, websites) {
// categories injected
$scope.categories = categories;
// websites injected
$scope.websites = websites;
// categories selection helper, useful for preselection
$scope.selection = { 0: true, 1:false } // 2: false (implicit)
}])
// categories filter, categories injected.
.filter('bycat', ['categories', function(categories) {
// websites is the result of orderBy :'rank', selection helper passed as paramenter.
return function(websites, selection) {
// just an Array.prototype.filter
return websites.filter(function(website) {
// for each category
for(var i=0; i < categories.length; i++) {
var cat = categories[i];
// if category is selected and website belongs to category
if (selection[cat.id] && cat.id == website.parent_id) {
// include this website
return true;
}
}
// exclude this website
return false;
});
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<span ng-repeat="category in categories">
<label class="checkbox" for="{{category.id}}">
<input type="checkbox" ng-model="selection[category.id]" name="group" id="{{category.id}}" />
{{category.title}}
</label>
</span>
<div ng-repeat="website in websites | orderBy:'rank'| bycat: selection">
<p>Rank:{{website.rank}} - {{website.title}} ({{categories[website.parent_id].title}})</p>
</div>
</div>
Se代码注释。
angular.module('app',[])
// categories will be injected in custom filter.
.value('categories', [ { id: 1, title:"first" }, { id: 2, title:"second" } ])
.controller('ctrl', function($scope) {
// sample websites
$scope.websites = [ { rank: 1, parent_id: 2, title: "Site w/rank 1" },
{ rank: 9, parent_id: 2, title: "Site w/rank 9" },
{ rank: 2, parent_id: 1, title: "Site w/rank 2" },
{ rank: 4, parent_id: 1, title: "Site w/rank 4" },
{ rank: 5, parent_id: 1, title: "Site w/rank 5" } ];
})
// custom filter, categories injected.
.filter('bycat', ['categories', function(categories) {
// websites is the result of orderBy :'rank'
return function(websites, catText) {
// just an Array.prototype.filter
return websites.filter(function(website) {
// if no filter, show all.
if (!catText) return true;
for(var i=0; i < categories.length; i++) {
var cat = categories[i];
// if matches cat.title and id == parent_id, gotcha!
if (cat.title.indexOf(catText) != -1 && cat.id == website.parent_id) {
return true;
}
}
// else were
return false;
});
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input type="text" ng-model="filterText">
<p>Try "first" and "second"</p>
<div ng-repeat="website in websites | orderBy:'rank'| bycat: filterText ">
{{website.title}},{{website.rank}}
</div>
</div>
关于javascript - 嵌套 ng-repeat 的内循环中的 orderBy,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27518411/
所以我尝试使用angularjs的orderby函数。目前我有一个原始数据集。 $scope.customers = [ {"name" : "Bottom-Dollar Market
我有一个包含以下数据的表列 (Varchar): COLUMN_NAME 102100 1-2000 112100 当我在 SQL 语句中使用 OrderBy 时,我按以下顺序获取项目: COLUMN
我正在研究一些 LINQ 排序,因为我有一个 ID 列表,我需要按顺序对它们进行排序。但是,某些 ID 需要优先于标准顺序。 鉴于此 C# 代码(可以粘贴到 .NET Fiddle 中进行测试),排序
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗? 通过 editing this post 添加细节并澄清问题. 关闭 9 年前。 Improve t
我正在寻找这些 LINQ 表达式的确认/澄清: var context = new SomeCustomDbContext() // LINQ to Entities? var items = co
我的数据在我的 firebase 中看起来像这样。 users: { -KOwKNCB5IiDBxY9FNzR: { content: { blah blah }, timestamp:147
在尝试找出一段代码不同步的原因后,我开始意识到 TSQL OrderBy 与 Linq OrderBy 对于字符串的差异很大。所以很自然地,我必须找到一种方法来确保来自 tsql 的语句返回与 lin
目前,如果我们将订购方向作为外部依赖项,我们必须使用 if 来应用此方向: public static IEnumerable getlist(string directory, string sea
我在我的范围内有一个对象列表,我想遍历它们,以按某些属性排序的方式显示它们的一些属性并更改它们。 ng-repeat 用于显示绑定(bind)到列表中每个对象的文本框,并应用以“position”作为
我在 C# 项目中使用 EntityFramework 6.1.3 和 SQL Server。我有两个查询,基本上应该执行相同的操作。 1. Exams.GroupBy(x=>x.SubjectID)
我正在尝试以 asc 顺序显示从今天开始的特定接下来几天的约会列表。(例如:接下来的 5 天或 10 天)。仅从今天开始,接下来的 5 天或 10 天(注意:天数将是动态的,我的意思是客户将设置)。当
这个问题已经有答案了: 已关闭12 年前。 Possible Duplicates: Which LINQ syntax do you prefer? Fluent or Query Expressi
我目前有一个 OData V4 服务,它具有以下模型。 “类别”——“代码” 对于每个类别,可以有许多代码。 我需要 $expand the Codes, $filter where Active =
可以说注释表具有以下结构: id | author | timestamp | body 我想使用索引有效地执行以下查询: r.table('comments').getAll("me", {inde
是否可以像这样使用 LINQ OrderBy: .OrderBy(x=>(x.SourceID == 3), (x.SourceID == 2), (x=>x.SourceID == 4), (x.S
我有一个这样的数组: $scope.telcodes = ['44', '01', '221', '335']; 如何在像这样的简单数组上使用 orderBy 来生成从 01 开始的有序列表? 我知道
我有一个像这样 Eloquent 查询: Forum::with(['comments.user'])->find($id); 这将返回嵌套结果 forum -> its comments -> us
我正在尝试通过 ManyToMany 注释自动对报告的结果进行排序 @OrderBy : /** * @ORM\ManyToMany(targetEntity="Artist", inversedB
是否有按几列对 data.frame 进行排序的标准方法,但随着减少或增加的变化?例如,您可能希望按一个变量(递减)和下一个(递增)对 data.frame 进行排序。 有没有类似的东西: mydf[
我有一个 linq 查询,无论出于何种原因,它都没有像我期望的那样返回订购。任何人都可以指出我为什么以及我做错了什么的正确方向吗? 代码如下: List designer = null; using
我是一名优秀的程序员,十分优秀!