屬性名稱中帶有空格的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