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

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

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

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

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

我的代码： 超文本标记语言

<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 生成的列表中的复选框和按钮）。

您可以通过添加一个来达到预期的结果ng-if对 HTML 元素的声明，表明您只想在该项目出现在 DOM 中时ng-repeat具有一定的特点。例如：

<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仅当以下情况时才会出现在 DOM 中item.name is Potato.