添加自定义元素ngRepeat列表 [英] adding custom element to ngRepeat list

问题描述

我开发使用科尔多瓦+ onsenui + angularJs一个移动应用程序，并有用于填充ngRepeat列表特殊要求。

I am developing a mobile app using the cordova + onsenui + angularJs and there are special requirements for populating the ngRepeat list.

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

Some items could have additional parameters. In that case I want to either display additional information for item (substitude pattern completely with the new one)

或追加以下新的自定义项。

or append a new custom item below.

到目前为止，我只学会了如何填充一个模式（适用于所有项目，相同的HTML相同参数）列表项。我如何做出改变，使项目与参数类型= U有对子级的自定义模式？ （按钮和一个文本框，例如）

So far I have only learned how to populate list items with one pattern (same parameters for all items, same HTML). How do I make a change so that item with parameter "type = u" whould have a custom pattern? (button and a textbox, for example)

我的code：
HTML

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

P.S. I don't need to make any changes to list once controller is loaded. So maybe this will be a bit easier to implement.. No additional elements will be removed or added after that (but of course the user will be using the checkboxes and buttons inside ngRepeat generated list).

推荐答案

您可以通过添加达到预期的效果NG-如果语句为HTML，你只希望元素出现在DOM当 NG-重复该项目具有一定的特征。例如：

You can achieve the desired results by adding an ng-if statement to HTML elements that you only want to appear in the DOM when the item in ng-repeat has certain characteristics. For example:

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

在上面的例子中，按钮只会出现在DOM如果 item.name 是土豆。

In the above example, the button will only appear in the DOM if the item.name is Potato.

这篇关于添加自定义元素ngRepeat列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！