将集合中的字段加载到选择字段中,并根据所选值对其进行过滤
Loading fields from collection into select field and filtering it based on selected value
基本上我有两个相关的问题,但我将它们与数字分开1)我试图加载一个字段到一个选择下拉框从集合,但它的填充与所有的重复值,它从下面的列表收集,而不是自己的助手。
<template name="carsList">
{{> categoryFilter}}
<ul class="collection" id="listings">
{{#each cars}}
<li>
{{> carItem}}
</li>
{{/each}}
</ul>
</template>
分类模板
<template name="categoryFilter">
<div class="input-field">
<select>
<option value="" disabled selected>Choose your option</option>
{{#each companyCategories}}
{{> companyCategory}}
{{/each}}
</select>
<label>Select Category</label>
</div>
</template>
<template name="companyCategory">
<option>{{ccategory}}</option>
</template>
categoryFilter保存下拉模板,我使用下面的帮助
Template.categoryFilter.helpers({
companyCategories: function(){
return Cars.find();
}
});
不是从它自己的帮助器中填充,而是加载来自它下面的"清单"的数据并重复数据。
结果在selectbox
中的图像2)我还想根据选择下拉框中选择的值过滤列表(当然是被动的)
请帮
编辑
这是我的模板现在的样子
<template name="categoryFilter">
<div class="input-field">
<select>
<option value="" disabled selected>Choose your option</option>
{{#each companyCategories}}
{{> companyCategory}}
{{/each}}
</select>
<label>Select Category</label>
</div>
</template>
<template name="companyCategory">
<option>{{justCategory}}</option>
</template>
我将这样做。首先是下拉菜单:您应该使用游标而不是文档数组。所以你的助手应该是:
Template.categoryFilter.helpers({
companyCategories: function(){
return Jobs.find();
}
});
和你的categoryFilter
模板HTML可以是这样的
<template name="categoryFilter">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
{{selectedCategory}} <!-- refer to an helper which returns the reactive variable-->
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
{{#each companyCategories}}
<li role="presentation"><a role="menuitem" class="categoryItem" tabindex="-1" href="#">{{yourCatergoryNameField}}</a></li>
{{/each}}
</ul>
</div>
</template>
当点击
时,您可以创建一个事件来记录下拉菜单中选择的当前类别。 "click .categoryItem": function(e, t) {
var text = $(e.target).text()
Session.set("selectedCategory", text)
},
现在,您可以使用selectedCategory
反应变量过滤您的汽车。为此,您需要另一个助手。例如:
Template.carList.helpers({
carListingByCategory: function(){
var filter = Session.get ("selectedCategory");
return Car.find(category:filter)
}
});
应该可以了。我从不使用Session,所以它可能不像我想象的那样工作。如果它不工作,使用ReactiveDict代替。基本上,您可以在文档的开头添加var pageSession = new ReactiveDict();
,并且可以在我的代码中用pageSession
替换Session
。
编辑
好,我们试试下划线。根据这个答案,您可以这样做来返回allJobs的每个条目的所有不同类别:
Template.categoryFilter.helpers({
companyCategories: _.uniq(Collection.find({}, {
sort: {myField: 1}, fields: {myField: true}
}).fetch().map(function(x) {
return x.myField;
}), true);
}
});
其中myfield
是你的类别数组字段。
编辑2
试着改变你的html并将{{justCategory}}
替换为{{this}}
:
<template name="categoryFilter">
<div class="input-field">
<select>
<option value="" disabled selected>Choose your option</option>
{{#each companyCategories}}
{{> companyCategory}}
{{/each}}
</select>
<label>Select Category</label>
</div>
</template>
<template name="companyCategory">
<option>{{this}}</option>
</template>
相关文章:
- 访问KendoUI中Datasource过滤对象的字段
- AngularJS:在控制器中过滤除一个字段外的所有字段
- 如何使用angular ui select过滤两个字段中的数据
- 通过使用 AngularJS 遵循 OR 运算符仅过滤对象中的特定字段
- TaffyDB,过滤同一字段 2 次(大于和小于小于)
- 角度 UI 选择仅过滤一个字段
- Sugarcrm:如何根据联系人关系字段中的类型过滤帐户
- 使用 AngularJS 中的搜索字段进行过滤
- Angular.js可过滤列表,通过选择字段和可点击地图预定义值
- AngularJS:根据内部数组对象字段进行过滤
- 使用javascript过滤多个字段
- Angular ui网格通过程序设置过滤字段并刷新.值未显示
- AngularJS并过滤一些特定字段
- 根据所选复选框和所选字段过滤阵列
- 如何在编码对象时过滤额外的字段
- 通过javascript的字符串过滤json字段
- 剑道组合框在过滤时丢失html字段
- 如何使用angular js从过滤中排除某些字段
- 如何获取输入字段,根据一组规则过滤输入并应用于另一个字段
- 通过id字段过滤数组列表到一个新变量