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并在＆＃34; schoolLevel＆＃34;之后插入描述。或2）。我每次上学时都应该使用查找方法查找说明吗？

我认为第一个选项是更好的选择，但任何人都可以分享一些关于如何最好地实现这一目标的代码片段吗？谢谢！

Answer 1

您可以为查找创建过滤器： -

DATA： -

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

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

2 个答案: