AngularJS orderby /控制器行为：控制器在订单上执行

我拿了一个示例AngularJS应用程序，并开始改变它以适应我的需要。现在点击更改orderby会导致整个控制器重新加载。那么这就是我初始化默认orderby的地方。所以当我点击一个新的订单时，我得到的是一个正确顺序的闪光，然后快速返回到默认状态。警告显示控制器正在执行，但我不知道为什么或如何解决它。AngularJS orderby /控制器行为：控制器在订单上执行

Plunker here

的index.html

<!DOCTYPE html> 
<html data-ng-app="promptsApp"> 
<head> 
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
    <link href="style.css" rel="stylesheet" /> 
</head> 
<body> 
    <div ng-view></div> 

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 

    <script src="app.js"></script> 
    <script src="controllers.js"></script>  
    <script src="promptsService.js"></script> 
</body> 
</html>

app.js

var app = angular.module('promptsApp', []); 

app.config(function ($routeProvider) { 
    $routeProvider 
    .when('/prompts', 
    { 
     controller: 'PromptsController', 
     templateUrl: 'partial.html' 
    }) 
    .otherwise({ redirectTo: '/prompts' }); 
});

controllers.js

app.controller('PromptsController', function ($scope, promptsService) 
{ 
    init(); 

    function init() 
    { 
    $scope.prompts = promptsService.getPrompts(); 
    $scope.orderby='TRANSFEREE'; 
    $scope.reverse = false; 
    //alert('Hi'); 
    } 

    $scope.setOrder = function (orderby) { 
    if (orderby === $scope.orderby) 
    { 
     $scope.reverse = !$scope.reverse; 
    } 
    $scope.orderby = orderby; 
    }; 
});

promptsService.js

app.service('promptsService', function() 
{ 
    this.getPrompts = function (user) 
    { 
    var prompts = [ 
     { 
      id: 1, NOTE: 'Call client about something', CALLBACK_DATE: '12-01-2013', TRANSFEREE: 'Tom Tuttle', REG_NUM: '123456' 
     }, 
     { 
      id: 2, NOTE: 'Notify client of delay', CALLBACK_DATE: '12-10-2013', TRANSFEREE: 'Eddie Munster', REG_NUM: '101314' 
     }, 
     { 
      id: 3, NOTE: 'Complete paperwork', CALLBACK_DATE: '12-12-2013', TRANSFEREE: 'Mary Tyler Moore', REG_NUM: '998877' 
     } 
     ]; 

    return prompts; 
    }; 
});

partial.html

<div class="prompts"> 
    <div class="container"> 
    <header> 
     <h3>Prompts</h3> 
     <ul class="nav nav-pills"> 
     <li ng-class="{'active': orderby=='CALLBACK_DATE'}"><a href="#" ng-click="setOrder('CALLBACK_DATE')">Date</a></li> 
     <li ng-class="{'active': orderby=='TRANSFEREE'}"><a href="#" ng-click="setOrder('TRANSFEREE')">Transferee</a></li> 
     <li> (Currently: {{orderby}})</li> 
     </ul> 
    </header> 

    <div> 
     <div class="row cardContainer"> 
     <div class="span3 card" data-ng-repeat="prompt in prompts | orderBy:orderby:reverse"> 
      <div class="cardHeader">{{prompt.TRANSFEREE}}</div> 
      <div class="cardBody">{{prompt.NOTE}} 
     <br># <a href="#">{{prompt.REG_NUM}}</a> {{prompt.CALLBACK_DATE}} 
      </div> 
     </div> 
     </div> 
    </div> 
    <br /> 
    {{prompts.length}} prompts 
    </div> 
</div>

见Plunker here

来源

2013-05-31 James Bell

<li ng-class="{'active': orderby=='CALLBACK_DATE'}"> 
    <a href="" ng-click="setOrder('CALLBACK_DATE')">\ 
     CallBack Date 
    </a> 
</li> 
<li ng-class="{'active': orderby=='TRANSFEREE'}"> 
    <a href="" ng-click="setOrder('TRANSFEREE')"> 
     Transferee 
    </a> 
</li> 
<li>> Currently: {{orderby}}</li>

取出href="#"与href=""更换，以获得所需的结果。拥有href="#"会导致路由改变（并且与以前一样），但会再次触发控制器的初始化。

来源

2013-05-31 05:08:28 callmekatootie

完美！谢谢你，让我坚持了3天。 –

AngularJS orderby /控制器行为：控制器在订单上执行

回答

相关问题