adding custom element to ngRepeat list

Question

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

Answer 1

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.