Reaching out of my .net stomping grounds and can't seem to figure out if there's an equivalent to what you would use DataTemplateSelector for in .net, but for use in an ionic driven html5 and angularjs project. Could someone please point me in the right direction?
For example, I know I can go in and plop in an equivalent to ItemsControl with a quick angular hook into the ng-repeat
kind of like;
<ion-list>
<ion-item ng-repeat="blah in something | orderBy:'whatever'" href="#/my/crap/{{blah.blah}}">
<!-- stuff -->
</ion-item>
</ion-list>
Which of course I can supply a template with that is for every generated child but I need to flip it out for some different looking parts when needed.
I screwed around with ng-switch
but couldn't get what I was shooting for and I'd prefer not to re-invent the wheel if it's existing functionality that I'm just not finding.
Basic intent. Provide more than one item template within a repeated list to display items different based on some criteria. Any insight? Thanks
There are a number of ways to achieve the equivalent of DataTemplateSelector
- depending on your needs and view on "elegancy". Probably the closest one is with ng-include
, but for simple cases you could also use ng-if
and ng-switch
.
ng-include
<div ng-repeat="item in items">
<div ng-include="itemDataTemplateSelector(item)"></div>
</div>
$scope.itemDataTemplateSelector = function(item){
if (item.type === "foo" && item.something.else) return "/path/to/foo/template.html";
...
}
ng-if
s<div ng-repeat="item in items">
<div ng-if="item.type === 'foo'">
... foo template
</div>
<div ng-if="item.type === 'bar'">
... bar template
</div>
</div>
ng-switch
<div ng-repeat="item in items" ng-switch on="item.type">
<div ng-switch-when="foo">
... foo template
</div>
<div ng-switch-when="bar">
... bar template
</div>
</div>
Here's a plunker