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

当ng-if中的项目具有某些特征时，您可以向仅在DOM中显示的HTML元素添加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为item.name，则Potato只会显示在DOM中。

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

1 个答案: