Angular ng-repeat在基于JSON的HTML上呈现视图

Question

所以我想呈现我称之为瓦片的东西。现在所有这些瓷砖看起来都是一样的，但显示的数据点将根据称为“名称”的特定属性而有所不同。因此，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" 
} 

所以你可以看到的数据点之间的区别，其中一个数据有一定的性能，而另一个不（很轻微的）。因此，渲染视图那种看起来像这样：

你看到一个节目的最后日期招致“，另一个没有，等等。那么登录的用户可以有几个瓦片或两个。因此，当这些节目呈现的页面需要循环播放时，我确信angular有一个简单的方法来完成，但我没有打它，所以希望在这里获得一些帮助。

所以基本上，所有的JSON检索，一些会显示，大多数不会，然后基于属性“名称”，不同将显示或类似的东西。

对此有何想法和帮助？

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

非常感谢。

Answer 1

分叉由@LeoJavier提供，并在模板的思想工作的小提琴后，我想出了一个可行的例子，这可以作为一个根据你以后的样子。

关键概念是两个指令和管理模板的工厂。在这个微不足道的的例子中，模板是内联存储的，但是在生产应用程序中，这些模板可能每个都驻留在它们自己的文件中。

第一个指令<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/

请注意，这只是许多方面，这可能完成一个，而这个代码仅是一种概念证明，这样可以用一些重构服务。这就是说，我希望这给你一个可能的方向，你可以采取的想法。

Answer 2

你在找这样的事吗？ 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 变种应用= angular.module（ '应用'，[]）;

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/