Javascript Angular ng repeat基于返回的JSON在html上呈现视图

所以我尝试渲染我称之为瓷砖的东西。现在，所有这些平铺看起来都一样，但显示的数据点将根据名为“name”的特定属性而有所不同。JSON看起来是这样的：

{
  "beginDate": "2015-01-01T00:00:00",
  "endDate": "2015-12-31T00:00:00",
  "balance": 6989.68,
  "annualAmt": 7200,
  "claimAmt": 210.32,
  "payableAmt": 0,
  "reimbAmt": 210.32,
  "amtToClaim": 0,
  "id": "%2bhnc3gHgwibPEOiPrFKV2g%3d%3d",
  "benefit": "HRAPrime",
  "name": "Preferred Dental Plan (Kennedy)",
  "planTypeId": 4,
  "benefitTypeId": 22,
  "benefitCode": "HRADEN"
},
{
  "balance": 0,
  "ordersPlaced": 0,
  "fundsUsed": 0,
  "lastOrder": 0,
  "currentOrder": 0,
  "currentOrderMonth": "October",
  "lastUpdateDay": "2015-09-20T00:00:00",
  "id": "P06CqlD5cwnLFaxEKvbikA%3d%3d",
  "benefit": "FlexiPass",
  "name": "Flexi-Pass Transit/Vanpool Benefit",
  "planTypeId": 6,
  "benefitTypeId": 29,
  "benefitCode": "FCTRANS"
}

因此，您可以看到数据点之间的差异，其中一个数据具有某些属性，而另一个数据没有（非常轻微）。因此，渲染视图看起来是这样的：

你可以看到其中一个显示“最后发生的日期”，另一个不显示，等等。一个登录的用户可能有几个tile或两个tile。所以当这些显示的页面呈现时，它需要循环浏览这个页面，我相信angular有一个简单的方法来完成，但是我没有点击它，所以我希望在这里得到一些帮助

所以基本上，在所有检索到的JSON中，有些会显示，大多数不会，然后根据属性“name”，会显示不同的内容或类似的内容

请给我一些想法和帮助

如果不清楚，请告诉我。我相信我看到的是一个模板或类似的东西

---

非常感谢。

你在找这样的东西吗？

JS var-App=angular.module（'App'，[]）

我希望这个帮手。。。

---

在对@LeoJavier提供的提琴进行分叉并研究了模板的概念后，我提出了一个可行的示例，可以作为您所追求的基础

关键概念是用于管理模板的两个指令和工厂。在这个简单的示例中，模板是内联存储的，但在生产应用程序中，模板可能每个都驻留在自己的文件中

第一条指令，

，用于一个非常基本的目的，即通过

ngModel

将每个元素上的隔离范围映射到模板

App.directive('card', function () {
    return {
        restrict: 'E',
        scope: {
            item: '=ngModel'
        }
    };
});

下一系列指令的任务是从模板工厂检索匹配的模板。注意：在工厂中，我们将模板url作为字符串提供给原始HTML，因此转义引号是必要的：

App.directive('template1', function (templates) {
    return {
        replace: true,
        template: templates.template1
    };
});

App.directive('template2', function (templates) {
    return {
        replace: true,
        template: templates.template2
    };
});

App.factory('templates', function () {
    return {
        template1: '<ng-include src="\'template1.html\'"></ng-include>',
        template2: '<ng-include src="\'template2.html\'"></ng-include>'
    };
});

至于用法，通过数组中的每个对象进行一个简单的循环，使用

ng if

来呈现每个迭代所需的特定模板

<ul ng-repeat="item in data">
    <div ng-if="item.planTypeId==4">
        <card template1 ng-model="item"></card>
    </div>
    <div ng-if="item.planTypeId==6">
        <card template2 ng-model="item"></card>
    </div>
</ul>

---

请注意，这只是实现这一点的许多方法之一，而这段代码只是概念证明，因此可以用于一些重构。话虽如此，我希望这能为您提供一个可能的方向。

您是否再次尝试提出与上周相同的问题？在这个问题上，您至少在某种程度上更好地展示了数据中的差异，但您仍然不清楚当您没有这些值时，您预期会发生什么；实际上，您可能应该定义模板并使用自定义指令来选择要显示的正确模板，但您可能需要多少不同的模板还不足以编写演示。除此之外，使用上周提到的和今天再次提到的

ng show

似乎满足了您的要求，假设您对数据不存在的区域中的空白区域没有问题。我曾考虑过如何根据ng repeat | name:xxxx制作ng秀。但我不确定这是怎么回事。事实上，有4-5个小模板。是的，正在进行这方面的工作，希望这能提供清晰性。它归结为，当一个重复在每个对象中循环时，如果name属性是一件事（FSA），它会在某个数据点上呈现一个磁贴，如果该用户有另一个对象，那么它会呈现另一个磁贴，该磁贴看起来很相似，但显示内容不同。因此，用户可以有1个或9个互动程序。取决于返回的对象数量。

App.directive('card', function () {
    return {
        restrict: 'E',
        scope: {
            item: '=ngModel'
        }
    };
});

App.directive('template1', function (templates) {
    return {
        replace: true,
        template: templates.template1
    };
});

App.directive('template2', function (templates) {
    return {
        replace: true,
        template: templates.template2
    };
});

App.factory('templates', function () {
    return {
        template1: '<ng-include src="\'template1.html\'"></ng-include>',
        template2: '<ng-include src="\'template2.html\'"></ng-include>'
    };
});

<div ng-app="App" ng-controller="Controller">
....
 <!-- template1.html -->
<script type="text/ng-template" id="template1.html">
....
</script>

<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
....
</script>
</div>

<ul ng-repeat="item in data">
    <div ng-if="item.planTypeId==4">
        <card template1 ng-model="item"></card>
    </div>
    <div ng-if="item.planTypeId==6">
        <card template2 ng-model="item"></card>
    </div>
</ul>