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

【问题标题】：AngularJS Orderby with Space in Property Name属性名称中带有空格的 AngularJS Orderby
【发布时间】：2014-05-02 03:59:55
【问题描述】：

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

当我单击标有“待办事项”的表头时，我在 Chrome 中收到此错误：错误：语法错误：标记“Do”是表达式 [To Do] 的第 4 列中的意外标记，从 [Do] 开始。

我看过其他几篇关于使用空格访问属性时遇到问题的帖子。我的问题类似，但我无法让他们的解决方案发挥作用。

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

在上面的代码中，keys 等于 [ "_id", "To Do", "description", "due", "link", "$$hashKey"]。 keys[1] 是“To Do”，它仍然不适用于 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 中被单击的任何列。

这是我的第一个 Angular 应用程序。我原本希望能够在 Jade 中使用 ng-click="predicate=column"，但我惊讶地发现它不起作用。这就是为什么我要发送到控制器功能。我不知道我是否会以正确的 Angular 方式进行整个过程。

【问题讨论】：

标签： javascript angularjs properties sql-order-by space

【解决方案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

【讨论】：