Angular ng-repeat 根据发回的 JSON 在 html 上呈现视图

Question

所以我正在尝试渲染我称之为图块的东西。现在所有这些图块看起来都一样，但显示的数据点将根据特定的属性称为 "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"
}

所以您可以看到数据点有何不同，其中一个数据具有某些属性而另一个数据没有（非常轻微）。所以渲染视图看起来像这样：

您会看到一个显示的位置 'last date to incur'，另一个不显示的位置，依此类推。好吧，登录用户可能有几个或两个磁贴。因此，当呈现这些节目的页面时，它需要循环执行此操作，我相信 angular 有一个简单的方法可以完成，但我没有成功，所以希望能在这里得到一些帮助。

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

有什么想法和帮助吗？

如果不清楚，请告诉我。我相信我看到的是模板之类的。

非常感谢。

Answer 1

您正在寻找这样的东西吗？ https://jsfiddle.net/leojavier/eb20ar4L/

<div ng-app="App" ng-controller="Controller">
    <div>
        <ul ng-repeat="item in data">
            <li class="title">{{item.name}}</li>
            <li>
                <p>Plan:{{item.benefit}}</p>
                <p class="id">Customer ID:<br/><span>{{item.id}}<span></p>
            </li>
            <li ng-show="item.balance>0">
                <strong>Current balance: </strong>
                <p class="numbers">{{item.balance | currency:"USD$"}}</p>
            </li>
            <li ng-show="item.annualAmt>0">
                <strong>Current balance: </strong>
                <p class="numbers">{{item.annualAmt | currency:"USD$"}}</p>
            </li>
            <li class="date" ng-show="item.lastUpdateDay">
                <p><strong>Date: </strong>{{item.lastUpdateDay}}</p>
            </li>
        </ul>
    </div>
</div>

CSS

body{
    background:#F2F2F2;;
}
.title{
    background:#333;
    color:#FFF;
    padding:10px;
    text-transform:uppercase;
    font-size:0.8em;
    margin:-20px -20px 20px -20px;
}
ul {
    position:relative;
    height:350px;
    display:block;
    float:left;
    list-style-type: none;
    padding:20px;
    display:inline-block;
    border:thin solid #CCC;
    background:#FFF;
    margin:5px;
    font-family:arial;
}
li{;
    line-height:30px;

}
.numbers{
    margin:0;
    color:#F00;
    font-size:1.5em;
}
.id span{
    background:#E2E2E2;
    color:#555;
    padding:10px;
    font-size:0.8em;
}

.date{
    position: absolute;
    bottom:0;
}

JS var App = angular.module('App', []);

App.controller('Controller', function($scope){

    $scope.data = [
{
  "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"
}];

});

我希望这对男人有帮助... https://jsfiddle.net/leojavier/eb20ar4L/

Answer 2

在分叉由@LeoJavier 提供的 fiddle 并研究模板的想法后，我想出了一个可行的示例，它可以作为您所追求的基础。

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

第一个指令 <card> 有一个非常基本的目的，即通过 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>'
    };
});

同样，在我们的例子中，模板内嵌在 HTML 中。重要的是，模板的 <script> 标签位于内 ng-app 所在的元素，如下所示：

<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>

至于用法，一个简单的循环遍历数组中的每个对象，使用 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>

https://jsfiddle.net/d0x460ge/

请注意，这只是实现此目的的众多方法之一，此代码只是概念证明，因此可以进行一些重构。话虽这么说，但我希望这能让您了解可以采取的可能方向。

Angular ng-repeat 根据发回的 JSON 在 html 上呈现视图

Angular ng-repeat renders view on html based on JSON sent back

javascript

html

json

angularjs

tile