属性名称中带有空格的AngularJS Orderby

Question

我正在使用MEAN堆栈和翡翠。 我在使用ng-repeat，ng-click和orderby对表中的列进行排序时遇到了AngularJS的问题。 只要用于orderBy的属性名称中没有空格，它就可以正常工作。 我遇到麻烦的属性名称是“待办事项”。

单击标题为“ To Do”的表标题时，我在Chrome中收到此错误：错误：语法错误：令牌'Do'是从[Do]开始的表达式[To Do]的第4列的意外令牌。

我还看过其他几篇关于使用空格访问属性的麻烦的文章。 我的问题很相似，但是我无法获得他们的解决方案。

Jade ：（这是我设置ng-click，orderBy和ng-repeat的方式。除非列中没有空格，否则它可以正常工作）

table
  caption {{collectionName}}
  thead
    tr
      th(ng-repeat="column in columns" ng-click="setPredicate(column);")
        {{column}}
  tbody
    tr(ng-repeat="row in rows | orderBy:predicate:reverse")
      td(ng-repeat="column in columns")
        {{row[column]}}

Controllers.JS ：（这是Angular接收列和行数据的方式。也是ng-click如何更改orderBy谓词的方式）

$http.get('/api/collection/' + $routeParams.collectionName)
  .success(function(data){
    $scope.collection = data;
    $scope.columns = data.columns;
    $scope.rows = data.rows;
    console.log(data);
  });


$scope.setPredicate = function(column){
  if (column === "To Do"){
    var keys = Object.keys($scope.rows[0])
    $scope.predicate = keys[1]; 
    // $scope.predicate = "To Do"; 
    // $scope.predicate = column[$scope.columns];
  }else{
    $scope.predicate = column;
  }
  $scope.reverse = !$scope.reverse;
}

在上面的代码中，键等于[[_id]，“ To Do”，“ description”，“ due”，“ link”，“ $$ hashKey”]。 keys [1]是“待办事项”，对于orderBy谓词仍然不起作用。 我尝试了其他变体，例如上述两个注释掉的尝试。

NodeJS index.JS ：（这是从MongoDB中检索文档后，如何将列数组和行发送到Angular的方法。）

router.get('/api/collection/:collectionName', function(req, res){
  collectionProvider.findCollection(req.param('collectionName'), function(error, documents){
    var keys;
    if(documents[0]){
      keys = Object.keys(documents[0]);
      remove(keys,'_id');
    }
    res.json({
      columns: keys,
      title: req.param('collectionName'),
      rows:documents,
      collectionName: req.param('collectionName')
    });
  });
});

总而言之，表中的列标题以代表列中数据的属性命名。 我不知道哪个表将被拉出或它将具有哪些列，因此节点检查第一条记录的所有属性并将属性名称数组发送到$ scope.columns。 我使用谓词将orderBy排序切换到$ scope.columns中被单击的任何列。

这是我的第一个有角度的应用程序。 我原本希望能够在Jade中使用ng-click =“ predicate = column”，但令我惊讶的是它没有用。 这就是为什么我要发送至控制器功能的原因。 我不知道我是否要按照正确的Angular方法进行整个过程。

Answer 1

orderBy谓词应该是一个传递给集合的函数，该函数使用括号表示法访问属性并返回值。

在您的情况下， setPredicate函数应设置谓词使用的属性的值。

尝试这样的事情：

JS：

// Default orderBy
$scope.orderBy = $scope.columns[0];

$scope.setOrderBy = function (column) {
  $scope.orderBy = column;
}

$scope.predicate = function(rows) {
  return rows[$scope.orderBy];
}

HTML：

<th ng-repeat="column in columns" ng-click="setOrderBy(column)">{{ column }}</th>

和：

<tr ng-repeat="row in rows | orderBy:predicate:reverse">

演示 ： http : //plnkr.co/edit/2Mlc2lBf0wRVicfcfYZO?p=preview