Is there a "with... as..." clause in angular? - angularjs

Question

Here is my use case
<li ng-repeat="item in heterogeneousFruitArray">
<div ng-if="item.type == 'apple'">
... custom apple stuff ...
</div>
<div ng-if="item.type == 'orange'">
... custom orange stuff ...
</div>
... stuff for all fruits ...
</li>
It would increase readability if I could say
<li ng-repeat="item in heterogeneousFruitArray">
<div ng-if="item.type == 'apple'">
<span ng-with="item as apple">
<h1>{{apple.name}}</h1>
Crispness: {{apple.crispness}}
... and so on...
</span>
</div>
...
</li>
Is there a way to do this with angular?
I realize that this pattern could be me coding with an accent because of my django templates background. If I'm miles away from 'how it's done in angular', please let me know.

Answer 1

ngInit was designed with aliasing in mind, especially within an ngRepeat:
<li ng-repeat="item in heterogeneousFruitArray">
<div ng-if="item.type == 'apple'" ng-init="apple=item">
... custom apple stuff ...
</div>
<div ng-if="item.type == 'orange'" ng-init="orange=item"">
... custom orange stuff ...
</div>
... stuff for all fruits ...
</li>
Here is official documentation on ngInit:
The only appropriate use of ngInit is for aliasing special properties of ngRepeat. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
Demo Plunker

Answer 2

In tandem with ngInit for aliasing, you should also consider using ngSwitch, instead of having multiple ngIfs where only one is evaluated to true at a time.
Using ngSwitch has the same result, but increases readability and is more efficient as it evaluates the condition once in every digest loop (in contrast to multiple ngIfs where the same expression is evaluated once for every ngIf).
E.g.:
<li ng-repeat="item in heterogeneousFruitArray">
<div ng-switch="item.type">
<!-- Apple-specific template -->
<span ng-switch-when="apple" ng-init="apple=item">
<h1>{{apple.name}}</h1>
Crispness: {{apple.crispness}}
</span>
<!-- Orange-specific template -->
<span ng-switch-when="orange" ng-init="orange=item">
<h1>{{orange.name}}</h1>
Juicy-ness: {{orange.juicyness}}
</span>
<!-- Default template (used when `item.type` is unknown/unexpected) -->
<span ng-switch-default ng-init="unknown=item">
<h3>What kind of fruit is "{{unknown.type}}" ???</h3>
</span>
</div>
</li>

Answer 3

You can always use AngularJS Filters to implement that.
Html:
<div ng-app='myApp' ng-controller='myCtrl'>
<ul>
<li ng-repeat='item in items | filter:{name: "orange"}'>
{{item.id}} - {{item.name}}
</li>
</ul>
</div>
Js:
var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope){
$scope.items = [
{
id: 12,
name: 'apple'
},
{
id: 13,
name: 'orange'
},
{
id:14,
name:'grape'
}
];
});
JSFiddle.