为ng-repeat中的长引用名指定别名

时间:2014-09-15 20:21:59

标签: javascript angularjs

我希望能够在ng-repeat指令中为长引用名指定别名。

现在我有2个复杂的对象,一个作为另一个的分组索引。 ng-repeat模板代码工作正常,但它变得非常难以阅读,我害怕在几个月后返回它的想法。

如果可能的话,我想转换这样的东西

<div ng-repeat="a in apples">
    <div>
        <span>Type</span>
        <span>{{a.category[1].information.type}}</span>
    </div>
    <div>
        Don't you just love <span>{{a.category[1].information.type}}</span> apples. 
        My granny says {{a.category[1].information.type}} apples are the best kind. 
        I would pick {{a.category[1].information.type}} over {{apples[0].category[1].information.type}} apples any day of the week.
    </div>
</div>

进入这样的事情

<div ng-repeat="a in apples"
     ng-example-assign="ta = a.category[1].information.type">
    <div>
        <span>Type</span>
        <span>{{ta}}</span>
    </div>
    <div>
        Don't you just love <span>{{ta}}</span> apples. 
        My granny says {{ta}} apples are the best kind. 
        I would pick {{ta}} over {{apples[0].category[1].information.type}} apples any day of the week.
    </div>

</div>

我为这个例子编写的ng-example-assign指令。任何人都可以告诉我,如果使用角度或ng重复这样的事情是可能的吗?可能我需要重新考虑代码,但我想我会先问这里。 TIA!

2 个答案:

答案 0 :(得分:5)

您可以使用ng-init:

<div ng-controller="MyCtrl">
    <div ng-repeat="s in data" ng-init="address = s.address">
        {{ address }}
     </div>
</div>

<强>的jsfiddle: http://jsfiddle.net/5yfgLgr9/2/

答案 1 :(得分:1)

使用具有隔离范围的指令,这将是相当简单的。

模板HTML

<div assign="ta" source="data[0].items[0].subitems[0]">

指令

app.directive('assign',function(){
  return {
    scope:{'assign':'@', "source": '='},
    templateUrl: 'testTemplate',
    link:function(scope){
      scope[scope.assign]=scope.source;
    }
  }
});

通常最好避免使用ng命名自定义指令以避免与升级或可能也使用它们的第三方模块发生冲突

DEMO