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

问题描述

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

某些项目可能有其他参数。在这种情况下，我想要显示项目的其他信息（全新的变形模式）

或在下方附加新的自订项目。

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

我的代码：
HTML

 < ons-page ng-controller =FiltersController> 
< ons-list> 
< ons-list-item modifier =tappableng-repeat =item in items> 
< label class =checkbox checkbox  -  list-item> 
< input type =checkboxng-model =item.selected> 
< div class =checkbox__checkmark checkbox  -  list-item__checkmark>< / div> 
< ons-icon icon =fa-commentsize =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}，
 //下一个项目理想情况下，我需要：
 //改变'repeat'元素的样式
 //或者在'item3'和'item4'之间添加新元素
 item3：{name：Potato，selected：false，type：u} ，
 // 
 item4：{name：Makaroni，selected：false}，
 item5：{name：Veg，selected：false} 
}; 
} 
 
 FiltersController（$ scope）; 
}，1000）; 
  

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

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

 < ons-list-item modifier =tappableng-repeat =item in items> 
< label class =checkbox checkbox  -  list-item> 
< input type =checkboxng-model =item.selected> 
< / label> 
< button ng-if =item.name =='Potato'>此按钮只会显示在item3< / button> 
< / ons-list-item> 
  

在上面的示例中，按钮如果 item.name 是 Potato ，则只会显示在DOM中。

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.

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)

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

解决方案

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>

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

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