Question

如何简化angularjs中的模板？这里有三种不同的变体位于podgruzki数据对象中，但是根据不同的对象IF加载了不同的属性集。是否可以简化模板

<div class="suggest" ng-show="showSuggest" ng-if="$ctrl.Name == 'A'">
    <ul class="height-list">
        <li ng-repeat="node in $ctrl.Searched()"  ng-mousedown="add(this)">
            <span ng-attr-title="{{node.a}}">{{node.a}}</span>
        </li>
    </ul>
</div>
<div class="suggest" ng-show="showSuggest" ng-if="$ctrl.Name == 'B'">
    <ul class="height-list">
        <li ng-repeat="node in $ctrl.Searched() "  ng-mousedown="add(this)">
            <span ng-attr-title="{{node.b}}">{{node.b}}</span>
        </li>
    </ul>
</div>
<div class="suggest" ng-show="showSuggest" ng-if="$ctrl.Name == 'C'">
    <ul class="height-list">
        <li ng-repeat="node in $ctrl.Searched()"  ng-mousedown="add(this)">
            <span ng-attr-title="{{node.C}}">{{node.C}}</span>
        </li>
    </ul>
</div>

Answer 1

我们假设您将node和name规范化为1比1.因此，如果您的控制器名称为＆＃34; a＆＃34;或者＆＃34; Foo＆＃34;，那么您的node将拥有一个名为a或Foo的媒体资源。

然后您就可以将模板缩小为以下内容：

<div class="suggest" ng-show="showSuggest">
    <ul class="height-list">
        <li ng-repeat="node in $ctrl.Searched()"  ng-mousedown="add(this)">
            <span ng-attr-title="{{node[$ctrl.Name]}}">{{node[$ctrl.Name]}}</span>
        </li>
    </ul>
</div>

如何简化模板？

1 个答案: