Question

我使用MEAN堆栈和玉器。我使用ng-repeat，ng-click和orderby对表中的列进行排序时遇到了AngularJS的问题。只要在用于orderBy的属性名称中没有空格，它就可以正常工作。我遇到问题的财产名称是＆＃34; To Do＆＃34;。

当我点击标有＆＃34; To Do＆＃34;的表格标题时，我在Chrome中收到此错误：错误：语法错误：令牌＆＃39;做＆＃39;是从[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;
}

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

这是我的第一个角度应用。我原本希望能够使用ng-click =＆＃34; predicate = column＆＃34;在玉，但我很惊讶地发现它不起作用。这就是我发送到控制器功能的原因。我不知道我是否以正确的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

AngularJS Orderby with Property in Property Name

1 个答案: