Angular Application tutorial

Question

I am following tutorial for Angular JS on their website.

Instead of the dropdown for selecting the order[Alphabetically or Newest], I made two buttons for it and defined ng-click on them.

Here is my code:

HTML Partial CODE:

<nav class="top-bar" data-topbar>
    <ul class="title-area">
        <li class="name">
            <h1><a href="#">My Site</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
    </ul>

    <section class="top-bar-section">
        <ul class="right">
            <li>Sort by: </li>
            <li class="active"><a href="#" ng-click="setOrder('age')">Newest</a></li>
            <li><a href="#" ng-click="setOrder('name')">Alphabetical</a></li>
        </ul>
        <ul class="left">
            <li class="divider"></li>
            <li class="has-form">
            <input type="text" ng-model="query" placeholder="Find Stuff"> </li>
        </ul>
    </section>
</nav>

<div class="row">
    <ul class="phones">
        <li ng-repeat="phone in phones | filter: query | orderBy: orderProp"  class="thumbnail">
            <a href="#/phones/{{phone.id}}" class="thumb"><img src="" alt="" ng-src="{{phone.imageUrl}}"></a>
            <a href="#/phones/{{phone.id}}" class="thumb">{{phone.name}}</a>
            <p>{{phone.snippet}}</p>
        </li>
    </ul>
</div>

AND MY CONTROLLER:

phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone', function($scope, Phone) {
    $scope.phones= Phone.query();

    $scope.orderProp= 'age';

    $scope.setOrder= function(order) {
        $scope.orderProp= order.toString();
    }
}]);

Routers:

phonecatApp.config(['$routeProvider',
    function($routeProvider) {

        $routeProvider.
            when('/phones', {
                templateUrl: 'partials/phone-list.html',
                controller: 'PhoneListCtrl'
            }).
            when('/phones/:phoneId', {
                templateUrl: 'partials/phone-details.html',
                controller: 'PhoneDetailCtrl'
            }).
            otherwise({
                redirectTo: '/phones'
            });
}]);

Setorder function is being called when I am clicking on Link, however I cannot see changes in Order listing.

What I am doing wrong here?

Hi, here is the fiddle: jsfiddle.net/HB7LU/3006 The fiddle is still not working, my problem is i cant set Order through click on link. Please help :) — xTMNTxRaphaelx
– xTMNTxRaphaelx, Commented Apr 7, 2014 at 5:31

Poyraz Yilmaz · Accepted Answer · 2014-04-07 05:53:29Z

3

there is some typo in your jsfiddle example...

first you should put filter statement into ng-repeat expression...

<li ng-repeat="todo in todos | orderBy: order">

second, you order by name but your object has no field with the name so change your object text field to name or reverse...

$scope.todos = [
    {name:'learn angular', done:true, age: 0},
    {name:'build an angular app', done:false, age: 1}];

here is fixed JSFIDDLE...

answered Apr 7, 2014 at 5:53

Poyraz Yilmaz

5,8671 gold badge28 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

xTMNTxRaphaelx Over a year ago

Hi, thanks for the solution. However, i have a question. I am using Angular Routers in the sample application, now if i click on the a href link, it will load the same URL again and hence will invoke the same router again which is listening to that URL?

Poyraz Yilmaz Over a year ago

@xTMNTxRaphaelx it is hard to say something before seeing you router config... so if you can post it I ll try to help you...

xTMNTxRaphaelx Over a year ago

i editted my code to add router too. Please check :)

Poyraz Yilmaz Over a year ago

@xTMNTxRaphaelx anchor extended as directive of angularjs you can see docs here docs.angularjs.org/api/ng/directive/a ... if you do not want to link somewhere else you can just delete href attribute from anchor... I think you do not want to reload page so just remove href...

xTMNTxRaphaelx Over a year ago

Wow Sugoi, thank you. Yes, It worked. I understood why my code was not working, removing the href did the work. Thank you again :D

Collectives™ on Stack Overflow

Angular Application tutorial

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related