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

Question

我正在使用 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);

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

Answer 1

您可以通过向 HTML 元素添加一个 ng-if 语句来实现预期的结果，当 ng-repeat 中的项目具有时，您只想在 DOM 中出现某些特征。例如：

<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>

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

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

adding custom element to ngRepeat list

html

javascript

angularjs

cordova

onsen-ui