Angular.js视图-显示代码描述json中的描述

Question

我有学校列表，每个学校都有一个学校级别的代码，而不是ES、MS、HM。

[
{
"nameOfInstitution": "Summer Elementary",
"schoolLevel": "01304"
},
{
"nameOfInstitution": "Grady Middle",
"schoolLevel": "02400"
}
]

我计划使用另一个JSON从获得这些代码的描述

{
"schoolLevel": [
    {"01302": "All levels"},
    {"01304": "Elementary"},
    {"02400": "Middle"},
    {"02402": "High school"}
    ]
}

在Angular视图中显示它的正确方式是什么？

  <div class="item item-text-wrap">
    <p ng-repeat="school in schools">{{school.nameOfInstitution}} - {{school.schoolLevel}}</p>
  </div>

应该是1）。遍历主JSON，并在"schoolLevel"或2）后面插入描述。每次显示学校时，我是否应该使用查找方法来查找描述？

我认为第一种选择是更好的选择，但有人能分享一些关于如何最好地实现这一点的代码片段吗？非常感谢。

Answer 1

您可以创建一个用于查找的过滤器：-

数据：-

 $scope.schools=[
{
"nameOfInstitution": "Summer Elementary",
"schoolLevel": "01304"
},
{
"nameOfInstitution": "Grady Middle",
"schoolLevel": "02400"
}
];
$scope.schoollevel={
"schoolLevel": [
    {"01302": "All levels"},
    {"01304": "Elementary"},
    {"02400": "Middle"},
    {"02402": "High school"}
    ]
}

过滤器：-

app.filter('level',function(){
  return function(item,filter){
    //console.log(item.schoolLevel);
    var levelVal;
    item.schoolLevel.forEach(function(level){
      if(typeof level[filter]!='undefined'){
        console.log(level[filter]);
       levelVal=level[filter];
      }
    }
    );
        return levelVal;  
  }
});

HTML:-

<p ng-repeat="school in schools">{{school.nameOfInstitution}} - 
    {{schoollevel|level:school.schoolLevel }}</p>

Plunker

Answer 2

下面的代码应该可以使用

标记

  <div class="item item-text-wrap">
    <p ng-repeat="school in schools">{{school.nameOfInstitution}} - 
    {{level.schoolLevel | filter: school.schoolLevel : true }}</p>
  </div>

代码

$scope.level = {
"schoolLevel": [
    {"01302": "All levels"},
    {"01304": "Elementary"},
    {"02400": "Middle"},
    {"02402": "High school"}
    ]
}