Two-way Data Binding Back

In this tutorial, we mainly discuss how to add a feature that allows users to control the order of items in the phone list.

Firstly, we may need to change the template:

<!-- phone-list.template.html -->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <!--Sidebar content-->
            <p>
                Search: <input ng-model="$ctrl.query" />
            </p>

            <p>
                Sort by:
                <select ng-model="$ctrl.orderProp">
                    <option value="name">Alphabetical</option>
                    <option value="age">Newest</option>
                </select>
            </p>
        </div>
        <div class="col-md-10">
            <!--Body content-->
            <ul class="phones">
                <li ng-repeat="phone in $ctrl.phones
                    | filter:$ctrl.query
                    | orderBy:$ctrl.orderProp">
                    <span>{% raw %}{{phone.name}}{% endraw %}</span>
                    <p>{% raw %}{{phone.snippet}}{% endraw %}</p>
                </li>
            </ul>
        </div>
    </div>
</div>

Comments Copyright © aleen42 all right reserved, powered by aleen42

Empty Comments

Sign in GitHub

As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.

Notice: This plugin has used Cookie to store your token with an expiration.

authorize