个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试按类别显示菜单。每个类别的名称是菜单项数组的键的名称，例如“布朗尼蛋糕”、“蛋糕”。
这就是我所引用的内容，但似乎有些不对劲:
filter list of items when clicking category link
html:
<section class="choices">
<div class="categories">
<ul>
<li ng-repeat="menu in fullMenu">
<a ng-repeat="(key,val) in menu" href="" ng-click="categoryFilters.category = {{key}}">{{key}}
</a>
</li>
</ul>
</div>
</section>
<section class="category" ng-repeat="menu in fullMenu | filter: categoryFilters">
<div ng-repeat="items in menu">
<ul>
<li ng-repeat="item in items">
<img src="{{item.image_url}}">
<h3>{{item.name}}</h3>
<p>{{item.description}}</p>
<p><span>$</span>{{item.price}}</p>
</li>
</ul>
</div>
</section>
JS:
angular.module('bakeryMenuApp')
.controller('mainCtrl', function($scope, dataService) {
dataService.getMenus(function(response) {
$scope.fullMenu = response.data.menus;
$scope.categoryFilters = {}
});
})
JSON:
{
"menus":[
{
"brownies":[
{
"name":"Baker's Choice Bars Assortment",
"price":"45",
"description":"A beautiful and delicious assortment of Magnolia Bakery’s double fudge brownies, chocolate chunk blondies and magic cookie bars.",
"image_url":"https://pantograph0.goldbely.com/s364/uploads/product_image/image/8346/bakers-choice-bars-assortment.1ddd25a1f59a89a1de2d0583dab50000.jpg",
"is_vegan":false,
"is_gluten_free":false
}
]
},
{
"cakes":[
{
"name":"Raseberry Lemon Cake",
"price":"50",
"description":"Vanilla crème fraîche cake layered with raspberry Swiss meringue buttercream and lemon curd filling, covered with raspberry buttercream.",
"image_url":"http://www.empirecake.com/_main_site/wp-content/uploads/2014/12/Rasberry_Lemon_01_final_drkr-600.jpg",
"is_vegan":false,
"is_gluten_free":false
}
]
}
]
}
最佳答案
通过适当的方式检查条件即可实现
Controller && HTML
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.category = '';
$scope.categoryList = function(value) {
$scope.category = value;
}
$scope.menus = [{
"brownies": [{
"name": "Baker's Choice Bars Assortment",
"price": "45",
"description": "A beautiful and delicious assortment of Magnolia Bakery’s double fudge brownies, chocolate chunk blondies and magic cookie bars.",
"image_url": "https://pantograph0.goldbely.com/s364/uploads/product_image/image/8346/bakers-choice-bars-assortment.1ddd25a1f59a89a1de2d0583dab50000.jpg",
"is_vegan": false,
"is_gluten_free": false
}]
}, {
"cakes": [{
"name": "Raseberry Lemon Cake",
"price": "50",
"description": "Vanilla crème fraîche cake layered with raspberry Swiss meringue buttercream and lemon curd filling, covered with raspberry buttercream.",
"image_url": "http://www.empirecake.com/_main_site/wp-content/uploads/2014/12/Rasberry_Lemon_01_final_drkr-600.jpg",
"is_vegan": false,
"is_gluten_free": false
}]
}]
});form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<section class="choices">
<div class="categories">
<ul>
<li ng-repeat="menu in menus">
<a ng-repeat="(key,val) in menu" href="" ng-click="categoryList(key)">{{key}}
</a>
</li>
</ul>
</div>
</section>
<section class="category" ng-repeat="menu in menus">
<div ng-repeat="(key, items) in menu">
<ul>
<li ng-repeat="item in items" ng-show="category == key">
<div>
<img src="{{item.image_url}}">
<h3>{{item.name}}</h3>
<p>{{item.description}}</p>
<p><span>$</span>{{item.price}}</p>
</div>
</li>
</ul>
</div>关于javascript - AngularJS 按类别过滤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38136788/
25
4
0
场景 网站页面有一个带有分页、过滤、排序功能的表格 View 。 表中的数据是从REST API服务器获取的，数据包含数百万条记录。 数据库 REST API 服务器 Web 服务器 浏览器 问
我有一个表student，其中的列dte_date(日期)具有值(2019-01-01、2019-02-01、2019-03-01)。 .等) 条件: dte_date 列中没有重复值。 但 dte_
我有一些逻辑可以根据不活动的用户创建通知。我正在获取具有以下属性的用户列表。我想做的只是在部门有非 Activity 用户时触发我的创建通知方法。因此，给出下面的列表，基本上会创建 1 个通知，表示部
使用 GPS 开发跟踪应用程序。一切都很好，但有时由于封闭区域或恶劣天气，我得到的分数不准确。当您绘制它们时，它看起来不对，有很多跃点/跳跃。 我应该运行什么算法来过滤掉不良信号对我来说，这看起来像是
我正在尝试按变量类型过滤对象数组。节点是一个具有位置的对象，但以不同的方式定义——作为点、矢量或附件。这是一个代码: class Joint { var position:Position
我想做的是在向量上创建一个过滤器，以便它删除未通过谓词测试的元素；但不太确定我该怎么做。 我根据谓词评估输入向量中的每个元素，例如在我的代码中，is_even 仿函数在 device_vector 向
我是 Gremlin 的新手，我正在使用 Gremlin 3.0.2 和 Stardog 5.0。我编写此查询是为了找出 schema.org 本体中两个实体之间的路径。以下是输出 - gremlin
考虑以下示例数据表， dt 30 的那一行需要去 - 或者如果其中两行 > 30相隔几秒钟，删除所有 3 个。然而 ，当我们有 4 行或更多行时，我们需要删除时间差 > 30 没有另一对 < 30
我正在考虑使用 ZeroMQ，并尝试了一些示例。但是，我无法验证 ZeroMQ 是否支持一些重要的要求。我希望你能帮助我。 我将使用这个简单的场景来问我的问题: 出版商(例如交易所)提供(大量)股票的
我需要从我的查询中过滤掉大量的对象。目前，它正在抓取类中的所有对象，我想将其过滤为查询字符串中的相关对象。我怎样才能做到这一点？当我尝试时，我收到一个属性错误说明 ''QuerySet' object
如何在 Prometheus 查询中添加标签过滤器？ kube_pod_info kube_pod_info{created_by_kind="ReplicaSet",created_by_name=
我有包含字符串的列的数据框，并希望过滤掉包含某些字符串以外的任何内容的所有行。考虑下面的简化示例: string % dplyr::filter(stringr::str_detect(string,
我有以下数据框，其中包含多行的角度变化值: 'data.frame': 712801 obs. of 4 variables: $ time_passed: int 1 2 3 4 5 6
我有一个 BehaviorSubject我希望能够filter ，但要保持新订阅者在订阅时始终获得一个值的行为主题式质量，即使最后发出的值被过滤掉。有没有一种简洁的方法可以使用 rxjs 的内置函数来
我有一个 RSS 提要，每天输出大约 100 篇文章。我希望过滤它以仅包含更受欢迎的链接，也许将其过滤到 50 个或更少。回到当天，我相信您可以使用“postrank”来做到这一点，但在谷歌收购后现已
我有这样一个重复的xml树- this is a sample xml file yellowred blue greyredblue 如您所见，每个项目可以具有不同数量的颜色标签
我以为我在 Haskell 学习中一帆风顺，直到... 我有一个 [[Int]] tiles = [[1,0,0] ,[0,1,0] ,[0,1,0]
我在使用 Knockout.js 过滤可观察数组时遇到问题 我的js: 包含数据的数组 var docListData = [ { name: "Article Name 1", info:
我在 mongoDB 中有这个架构: var CostSchema = new Schema({ item: String, value: Number }); var Attachm
给定一个数据框“foo”，我如何才能只选择“foo”中的那些行，例如foo$location =“那里”？ foo = data.frame(location = c("here", "there",
我是一名优秀的程序员,十分优秀！