AngularJS Orderby with Property Name

我正在使用MEAN堆棧和jade。我遇到了AngularJS的一個問題，使用ng-repeat，ng-click和orderby對錶中的列進行排序。只要在orderBy中使用的屬性名稱中沒有空格，它就可以正常工作。我遇到的屬性名稱是「待辦事項」。AngularJS Orderby with Property Name

當我點擊標題爲「待辦事項」的表格標題時，我在Chrome中出現此錯誤：錯誤：語法錯誤：令牌「做」是表達式[待辦事項]第4列處的意外標記，起始於[Do ]。

我已經看到了其他一些關於使用空間訪問屬性的麻煩。我的問題是相似的，但我無法讓他們的解決方案工作。

玉：（這是我如何設定了NG-點擊，排序依據，和NG-重複它工作正常，除非在列的空間。）

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 ：（這是如何角爲列和行接收數據納克點擊另外如何改變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」，「待辦事項」，「描述「，」到期「，」鏈接「，」$$散列鍵」]。 keys [1]是「待辦事項」，它仍然不適用於orderBy謂詞。我嘗試了其他的變體，比如上面的兩個註釋嘗試。

的NodeJS index.JS：（這是列排列，行如何從MongoDB中檢索文檔後發送到角）

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」，但是我驚訝地發現它不起作用。這就是爲什麼我要發送到控制器功能。我不知道我是否正在以這種正確的角度來討論整個過程。

來源

2014-05-02 user3594844

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

來源

2014-05-02 06:36:36 tasseKATT

AngularJS Orderby with Property Name

回答

相關問題