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

亚历克斯

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

PS:加载控制器后,我无需对列表进行任何更改。因此,也许这会更容易实现。。此后,不会删除或添加任何其他元素(但用户当然会使用ngRepeat生成的列表内的复选框和按钮)。

格朗伯特

您可以通过ng-if在HTML元素中添加仅在项目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>

在以上示例中,button如果item.nameis为则只会在DOM中显示Potato

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将自定义样式规则添加到列表中的偶数元素

来自分类Dev

将自定义样式规则添加到列表中的偶数元素

来自分类Dev

如何将自定义文件添加到自定义文章列表页面

来自分类Dev

Java 8将自定义元素添加到集合中的方法?

来自分类Dev

使用jQuery将自定义CSS类添加到动态创建的元素中

来自分类Dev

在Spring WS中将自定义元素添加到SOAP标头

来自分类Dev

将自定义元素添加到Froala编辑器的特定位置

来自分类Dev

sql server-对于XML Raw-将自定义属性添加到元素

来自分类Dev

将自定义CSS类添加到WFFM表单部分的图例元素

来自分类Dev

将自定义元素添加到 React Table pagination-top

来自分类Dev

将自定义文本添加到有序列表<li>

来自分类Dev

将自定义文本添加到MVC 5的下拉列表中

来自分类Dev

将自定义控制台添加到Eclipse控制台列表

来自分类Dev

通过API将自定义列名称添加到Sendgrid列表

来自分类Dev

将自定义ajax按钮添加到WooCommerce管理订单列表

来自分类Dev

如何将自定义html块添加到页脚选项列表中?

来自分类Dev

将自定义列表添加到Excel 2007中的单元格

来自分类Dev

将自定义文本添加到MVC 5的下拉列表中

来自分类Dev

通过API将自定义列名称添加到Sendgrid列表

来自分类Dev

将自定义菜单项添加到ToolStripMenuItem的集合列表中

来自分类Dev

将自定义对象添加到C#中的选中列表框中

来自分类Dev

将自定义快速列表条目添加到.desktop文件

来自分类Dev

将自定义标头添加到“请求”

来自分类Dev

Hibernate将自定义前缀添加到目录

来自分类Dev

将自定义函数添加到类

来自分类Dev

将自定义类添加到引导按钮

来自分类Dev

将自定义键绑定添加到XCode

来自分类Dev

无法将自定义字体添加到Xcode

来自分类Dev

将自定义属性添加到Serilog

Related 相关文章

  1. 1

    将自定义样式规则添加到列表中的偶数元素

  2. 2

    将自定义样式规则添加到列表中的偶数元素

  3. 3

    如何将自定义文件添加到自定义文章列表页面

  4. 4

    Java 8将自定义元素添加到集合中的方法?

  5. 5

    使用jQuery将自定义CSS类添加到动态创建的元素中

  6. 6

    在Spring WS中将自定义元素添加到SOAP标头

  7. 7

    将自定义元素添加到Froala编辑器的特定位置

  8. 8

    sql server-对于XML Raw-将自定义属性添加到元素

  9. 9

    将自定义CSS类添加到WFFM表单部分的图例元素

  10. 10

    将自定义元素添加到 React Table pagination-top

  11. 11

    将自定义文本添加到有序列表<li>

  12. 12

    将自定义文本添加到MVC 5的下拉列表中

  13. 13

    将自定义控制台添加到Eclipse控制台列表

  14. 14

    通过API将自定义列名称添加到Sendgrid列表

  15. 15

    将自定义ajax按钮添加到WooCommerce管理订单列表

  16. 16

    如何将自定义html块添加到页脚选项列表中?

  17. 17

    将自定义列表添加到Excel 2007中的单元格

  18. 18

    将自定义文本添加到MVC 5的下拉列表中

  19. 19

    通过API将自定义列名称添加到Sendgrid列表

  20. 20

    将自定义菜单项添加到ToolStripMenuItem的集合列表中

  21. 21

    将自定义对象添加到C#中的选中列表框中

  22. 22

    将自定义快速列表条目添加到.desktop文件

  23. 23

    将自定义标头添加到“请求”

  24. 24

    Hibernate将自定义前缀添加到目录

  25. 25

    将自定义函数添加到类

  26. 26

    将自定义类添加到引导按钮

  27. 27

    将自定义键绑定添加到XCode

  28. 28

    无法将自定义字体添加到Xcode

  29. 29

    将自定义属性添加到Serilog

热门标签

归档