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

下面的代码应该可以工作

标记

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

Answer 2

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

数据：-

 $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

Angular.js 查看 - 显示代码描述中的描述 json

Angular.js view - display a description from a code-description json

json

angularjs

angularjs-ng-repeat