Javascript 如何在ng模型AngularJS中使用过滤器
我想在ng模型中按部门过滤我的Javascript 如何在ng模型AngularJS中使用过滤器,javascript,html,angularjs,filter,pug,Javascript,Html,Angularjs,Filter,Pug,我想在ng模型中按部门过滤我的DepartmentTmp变量(末尾的内容),代码类似于:(Department choosen=choices) 以下是部门名单: [{"id":1,"label":"Direction","code":"DIR"}, {"id":6,"label":"Pôle commercial","code":"COM"}, {"id":5,"label":"Pôle communication/marketing","code":"MAR"},{"id":3,"label
DepartmentTmp
变量(末尾的内容),代码类似于:(Department choosen=choices)
以下是部门名单:
[{"id":1,"label":"Direction","code":"DIR"},
{"id":6,"label":"Pôle commercial","code":"COM"},
{"id":5,"label":"Pôle communication/marketing","code":"MAR"},{"id":3,"label":"Pôle ingénierie logicielle","code":"ING"},
{"id":4,"label":"Pôle web","code":"WEB"},
{"id":2,"label":"Service des ressources humaines","code":"RH"}]
下面是看起来像部门tmp
。如您所见,有一个名为“department”的属性,其中包含有关部门的信息
[{"id":9,"username":"alexandra.bauchart","lastName":"Bauchart","firstName":"Alexandra","phone":"","isDeleted":false,"roles":[{"id":2,"label":"ROLE_AGENT","canRegulateCounter":false,"canSeeRequestAttachFile":false}],"department":{"id":5,"label":"Pôle communication/marketing","code":"MAR"},"enabled":true,"accountNonExpired":true,"accountNonLocked":true,"credentialsNonExpired":true,"label":"Alexandra Bauchart","abregate":"AB"},
{"id":4,"username":"alexandre.bay","lastName":"Bay","firstName":"Alexandre","phone":"","isDeleted":false,"roles":[{"id":2,"label":"ROLE_AGENT","canRegulateCounter":false,"canSeeRequestAttachFile":false}],"department":{"id":3,"label":"Pôle ingénierie logicielle","code":"ING"},"enabled":true,"accountNonExpired":true,"accountNonLocked":true,"credentialsNonExpired":true,"label":"Alexandre Bay","abregate":"AB"},
{"id":2,"username":"benjamin.ruef","lastName":"Ruef","firstName":"Benjamin","phone":"","isDeleted":false,"roles":[{"id":2,"label":"ROLE_AGENT","canRegulateCounter":false,"canSeeRequestAttachFile":false}],"department":{"id":3,"label":"Pôle ingénierie logicielle","code":"ING"},"enabled":true,"accountNonExpired":true,"accountNonLocked":true,"credentialsNonExpired":true,"label":"Benjamin Ruef","abregate":"BR"},
{"id":7,"username":"corentin.dauvier","lastName":"Dauvier","firstName":"Corentin","phone":"","isDeleted":false,"roles":[{"id":2,"label":"ROLE_AGENT","canRegulateCounter":false,"canSeeRequestAttachFile":false}],"department":{"id":3,"label":"Pôle ingénierie logicielle","code":"ING"},"enabled":true,"accountNonExpired":true,"accountNonLocked":true,"credentialsNonExpired":true,"label":"Corentin Dauvier","abregate":"CD"},
{"id":6,"username":"dorothee.wenehoua","lastName":"Wenehoua","firstName":"Dorothee","phone":"","isDeleted":false,"roles":[{"id":7,"label":"ROLE_RH","canRegulateCounter":true,"canSeeRequestAttachFile":true}],"department":{"id":2,"label":"Service des ressources humaines","code":"RH"},"enabled":true,"accountNonExpired":true,"accountNonLocked":true,"credentialsNonExpired":true,"label":"Dorothee Wenehoua","abregate":"DW"},
{"id":3,"username":"florian.gourmelen","lastName":"Gourmelen","firstName":"Florian","phone":"","isDeleted":false,"roles":[{"id":3,"label":"ROLE_RESP","canRegulateCounter":false,"canSeeRequestAttachFile":false}],"department":{"id":3,"label":"Pôle ingénierie logicielle","code":"ING"},"enabled":true,"accountNonExpired":true,"accountNonLocked":true,"credentialsNonExpired":true,"label":"Florian Gourmelen","abregate":"FG"},
{"id":5,"username":"hatem.bellagi","lastName":"Bellagi","firstName":"Hatem","phone":"","isDeleted":false,"roles":[{"id":6,"label":"ROLE_DIR","canRegulateCounter":false,"canSeeRequestAttachFile":false}],"department":{"id":1,"label":"Direction","code":"DIR"},"enabled":true,"accountNonExpired":true,"accountNonLocked":true,"credentialsNonExpired":true,"label":"Hatem Bellagi","abregate":"HB"},
{"id":8,"username":"richard.ratiman","lastName":"Ratiman","firstName":"Richard","phone":"","isDeleted":false,"roles":[{"id":3,"label":"ROLE_RESP","canRegulateCounter":false,"canSeeRequestAttachFile":false}],"department":{"id":5,"label":"Pôle communication/marketing","code":"MAR"},"enabled":true,"accountNonExpired":true,"accountNonLocked":true,"credentialsNonExpired":true,"label":"Richard Ratiman","abregate":"RR"},
{"id":12,"username":"rodolphe.bertolini","lastName":"Bertolini","firstName":"Rodolphe","phone":"","isDeleted":false,"roles":[{"id":2,"label":"ROLE_AGENT","canRegulateCounter":false,"canSeeRequestAttachFile":false}],"department":{"id":3,"label":"Pôle ingénierie logicielle","code":"ING"},"enabled":true,"accountNonExpired":true,"accountNonLocked":true,"credentialsNonExpired":true,"label":"Rodolphe Bertolini","abregate":"RB"},
{"id":10,"username":"simon.larthe","lastName":"Larthe","firstName":"Simon","phone":"","isDeleted":false,"roles":[{"id":2,"label":"ROLE_AGENT","canRegulateCounter":false,"canSeeRequestAttachFile":false}],"department":{"id":5,"label":"Pôle communication/marketing","code":"MAR"},"enabled":true,"accountNonExpired":true,"accountNonLocked":true,"credentialsNonExpired":true,"label":"Simon Larthe","abregate":"SL"},
{"id":11,"username":"sonia.touahri","lastName":"Touahri","firstName":"Sonia","phone":"","isDeleted":false,"roles":[{"id":7,"label":"ROLE_RH","canRegulateCounter":true,"canSeeRequestAttachFile":true}],"department":{"id":2,"label":"Service des ressources humaines","code":"RH"},"enabled":true,"accountNonExpired":true,"accountNonLocked":true,"credentialsNonExpired":true,"label":"Sonia Touahri","abregate":"ST"},
因此,正如您所了解的,我只想在部门tmp
中保留部门与过滤器中选择的部门匹配的用户
谢谢
Nicolas Guerin使用特定的ng模型变量名并将部门id设置为值:例如:
ng model=“vm.choosendDepartment”ng value=“department.id”
因此,您可以按部门id使用筛选器,如:
{department: {id: vm.choosenDepartment}}
使用普通html&ng选项:
<b>Choose pole:</b>
<select ng-model='vm.choosenDepartment' ng-options="item.id as item.label for item in vm.departmentList track by item.id">
</select>
<br/><b>result</b>
<ul>
<li ng-repeat="i in (vm.departmentTmp | filter:{department: {id: vm.choosenDepartment}})">{{i.label}}</li>
选择杆:
结果
- {{i.label}
谢谢您的回答,它工作得很好,只有一种情况例外:没有过滤器我无法选择一个,我已经选择了一个。当我使用“无过滤器”时,所有用户都应该显示出来。当我第一次运行web时,它可以工作,但一旦我选择了部门过滤器,我就无法返回到0。谢谢Nicolas@NicolasGuerin只需在部门列表中添加一个id=undefined的项目{“id”:undefined,“label”:“All”,“code”:“All”}这里是一个plunker,我创建了一个按钮,当我点击它时删除vm.ChoosedPartmen(带有一个漂亮的rubbishbin图标aha),谢谢你的帮助,现在一切都好了。
<b>Choose pole:</b>
<select ng-model='vm.choosenDepartment' ng-options="item.id as item.label for item in vm.departmentList track by item.id">
</select>
<br/><b>result</b>
<ul>
<li ng-repeat="i in (vm.departmentTmp | filter:{department: {id: vm.choosenDepartment}})">{{i.label}}</li>