将自定义元素添加到 ngRepeat 列表

Posted 2023-03-05

【中文标题】将自定义元素添加到 ngRepeat 列表

【英文标题】：adding custom element to ngRepeat list

【发布时间】：2016-05-26 23:59:18

【问题描述】：

我正在使用 cordova + onsenui + angularJs 开发一个移动应用程序，并且对填充 ngRepeat 列表有特殊要求。

有些项目可能有额外的参数。在这种情况下，我想显示项目的附加信息（完全用新的替代模式）

或在下面附加一个新的自定义项。

到目前为止，我只学习了如何使用一种模式填充列表项（所有项的参数相同，html 相同）。如何进行更改以使带有参数“type = u”的项目具有自定义模式？ （例如按钮和文本框）

我的代码： HTML

<ons-page ng-controller="FiltersController">
            <ons-list>
                <ons-list-item modifier="tappable" ng-repeat="item in items">
                    <label class="checkbox checkbox--list-item">
                        <input type="checkbox" ng-model="item.selected">
                        <div class="checkbox__checkmark checkbox--list-item__checkmark"></div>
                        <ons-icon icon="fa-comment" size="20px"></ons-icon>
                        item.name
                    </label>
                </ons-list-item>
            </ons-list>
        </ons-page>

JS：

app.controller('FiltersController', function ($scope, $timeout) 
    function FiltersController($scope) 
        $scope.items = 
            item1:  name: "Hamburgar", selected: false ,
            item2:  name: "Pasta", selected: false ,
            // for next item ideally I need to either:
            // change how the 'repeat' element looks like
            // or append new element between 'item3' and 'item4'
            item3:  name: "Potato", selected: false, type: "u" ,
            //
            item4:  name: "Makaroni", selected: false ,
            item5:  name: "Veg", selected: false 
        ;
    

    FiltersController($scope);
, 1000);

附：加载控制器后，我不需要对列表进行任何更改。所以也许这会更容易实现.. 之后不会删除或添加其他元素（但当然用户将使用 ngRepeat 生成的列表中的复选框和按钮）。

【参考方案1】：

您可以通过将ng-if 语句添加到您只希望在ng-repeat 中的项目具有某些特征时出现在DOM 中的HTML 元素来实现所需的结果。例如：

<ons-list-item modifier="tappable" ng-repeat="item in items">
    <label class="checkbox checkbox--list-item">
        <input type="checkbox" ng-model="item.selected">
    </label>
    <button ng-if="item.name=='Potato'">This button will only appear for item3</button>
</ons-list-item>

在上面的例子中，button 只有在 item.name 是 Potato 时才会出现在 DOM 中。

【讨论】：

完美运行！虽然最后我使用了switch 语句，因为ng-if 没有ng-else 条件......在switch 情况下 - 可以设置默认行为（即else）。

好东西 - 很高兴能提供帮助