Question

我正在他们的网站上关注Angular JS的教程。

我没有选择订单的下拉菜单[按字母顺序或最新]，而是为它制作了两个按钮，并定义了ng-点击它们。

这是我的代码：

HTML部分代码：

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

和我的控制者：

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

    $scope.orderProp= 'age';

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

路由器：

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函数，但我看不到订单列表中的更改。

我在这里做错了什么？

Answer 1

你的jsfiddle例子中有一些错字......

首先，您应该将过滤声明放入ng-repeat表达式...

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

第二，您按name订购，但您的对象没有name的字段，因此请将对象text字段更改为name或反转...

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

此处已修复JSFIDDLE ...

角度应用教程

1 个答案: