AngularJS orderBy - 如何反映在父范围内?

时间:2014-07-07 19:28:30

标签: angularjs angularjs-scope angularjs-orderby

如何在父范围内反映orderby?此外,我已经尝试使用原型继承而没有成功使用sortorder.val作为ng-model。帮忙?

<body ng-controller="parentCtrl">
   <table style="width:300px">
      <tr>
        <td>Name</td>
        <td>Age</td>      
      </tr>
      <tr ng-repeat="contact in contacts | orderBy:sortorder">
        <td>{{contact.name}}</td>     
        <td>{{contact.age}}</td>
      </tr>
  </table> 
  <br/>
<div ng-controller="childCtrl">
  Order By:
  <select ng-model="sortorder">
      <option selected value="name">Name</option>
      <option value="age">Age</option>
  </select>
</div>  
</body>

var app = angular.module('plunker', []);
app.controller('parentCtrl', ['$scope', function ($scope) {
$scope.sortorder = ['name'];
$scope.contacts = [
    {name: 'Alfred', age: 37},
    {name: 'Allan', age: 21},
    {name: 'Dimmi', age: 17},
    {name: 'Berta', age: 65},
    {name: 'Chris', age: 25},
    {name: 'Dora', age: 12}
];
app.controller('chilCtrl', function($scope) {

});
}]);

普兰克:http://plnkr.co/edit/bXGyund8v78Tal7lZ76O?p=preview

1 个答案:

答案 0 :(得分:1)

您的代码中有几个错误,由浏览器控制台发出信号:

  • 子控制器在父控制器内声明:在浏览器控制台中发出信号
  • 它被声明为chilController而不是childController:在浏览器控制台中发出信号
  • 它使用其范围的属性,而不是使用父范围中声明的对象的属性

这是一个有效的傻瓜:http://plnkr.co/edit/KhOpx4nwezXHRAZr3nOl?p=info

var app = angular.module('plunker', []);
app.controller('parentCtrl', ['$scope', function ($scope) {
  $scope.order = {
    sortorder: 'name'
  };
  $scope.contacts = [
    {name: 'Alfred', age: 37},
    {name: 'Allan', age: 21},
    {name: 'Dimmi', age: 17},
    {name: 'Berta', age: 65},
    {name: 'Chris', age: 25},
    {name: 'Dora', age: 12}
    ];
}]);
app.controller('childCtrl', function($scope) {

});

并在视图中:

<tr ng-repeat="contact in contacts | orderBy:order.sortorder">
...
<select ng-model="order.sortorder">