Angularjs实现下拉框自动匹配键值对对象技巧

前端之家收集整理的这篇文章主要介绍了Angularjs实现下拉框自动匹配键值对对象技巧前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用到的对象:

  1. $scope.student = {
  2. address: {
  3. select: {
  4. code: "0",name: "Select proof of address"
  5. },letter: {
  6. code: "1",name: "Letter"
  7. },photograph: {
  8. code: "3",name: "Photograph"
  9. }
  10. },------------------------------------
  11.  
  12. $scope.studentAddressFields = [
  13. "select","letter","photograph"
  14. ]

要求:根据 选择的 studentAddressFields的项自动匹配到student 名称

方法1:最直接的方法

  1. <select ng-model="current.addressCode">
  2. <option ng-repeat="field in studentAddressFields"
  3. value="student.address[field]['code']">
  4. {{student.address[field]['name']}}
  5. </option>
  6. </select>

方法2:使用filter

  1. 页面代码
  2. <select ng-model="current.addressCode" ng-options="code as details.name
  3. for (code,details) in student.address | getOrdered">
  4. </select>
  5.  
  6. Filter JS代码
  7. myApp.filter('getOrdered',function() {
  8. return function(input) {
  9. var ordered = {};
  10. for (var key in input){
  11. ordered[input[key]["code"]] = input[key];
  12. }
  13. return ordered;
  14. };
  15. });

猜你在找的Angularjs相关文章