2017-09-19 34 views
2

我想我DepartmentTmp变量NG-模型(末成分)DEPARTEMENT过滤器,因为这一个类似的代码:(部门choosen =选择)我怎样才能在NG-模型AngularJS使用过滤器

sk-input-select(ng-model='vm.DepartmentTmp.filters.#DEPARTMENT CHOSEN#', choices='refs.departmentList', ng-change='refs.search()', placeholder='Sélectionner...', allow-clear='true') 

这里是DepartmentList:

[{"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"}] 

这里是什么样子DepartmentTmp。正如你所看到的,在这个部门的信息里面有一个名为“departement”的属性。

[{"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"}, 

所以你可以明白,我想保持在DepartmentTmp只有其中DEPARTEMENT与之相匹配的DEPARTEMENT在过滤器中选择的用户。

感谢,

萨科卡介苗

回答

1

使用特定的NG-模型变量名称并设置部门ID的价值:如:ng-model="vm.choosenDepartment" 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> 

https://embed.plnkr.co/IELGfEvc0Q3h5a7x0MDl/

+0

谢谢您的回答,除了在一个情况下,它的工作完美:我不能没有我选择了一个过滤器中进行选择。 当我使用没有过滤器,所有的用户应该显示它的作品,当我第一次运行的网络,但一旦我选择了部门过滤器我不能回到0. 谢谢尼古拉斯 –

+0

@NicolasGuerin只是在部门清单'{ “id”:undefined, “label”:“All”, “code”:“All” }'中添加id = undefined的项目'here plunker https://plnkr.co/编辑/ IELGfEvc0Q3h5a7x0MDl?p = preview – Fetrarij

+1

我创建了一个按钮,删除vm.choosenDepartmen,当我点击它(带有一个漂亮的垃圾箱图标aha)感谢帮助它现在是好的。 –