AngularJS NG重複聯合NG單擊= orderByField

Question

AngularJS

$scope.orderByField = 'firstName'; 
$scope.reverseSort = false; 
$scope.headers = ['First Name':'firstName','Last Name':'lastName'] 

查看

<th 
    ng-repeat="(key,value) in headers" 
    ng-click="orderByField=value; reverseSort = !reverseSort"> 
    {{ key }} 
    <span ng-show="orderByField == value"> 
     <span ng-show="!reverseSort"> &#9652</span> 
     <span ng-show="reverseSort"> &#9662</span> 
    </span> 
</th> 

這是我的代碼，我試圖創建一個從所有table頭$scope.headers中的密鑰列表，並使每個頭可排序。

由於某些原因，此代碼不起作用，我也沒有在Web控制檯中發現任何錯誤。

Answer 1

存在嵌套作用域的問題。請閱讀https://github.com/angular/angular.js/wiki/Understanding-Scopes中的嵌套示波器問題。

關於你如何解決它從那裏創建一個對象和使用價值：

$scope.modelData = {}; 
$scope.modelData.orderByField = 'firstName'; 
$scope.modelData.reverseSort = false; 
$scope.headers = {'First Name':'firstName','Last Name':'lastName'} 

現在，相應地使用：

<th ng-repeat="(key,value) in headers" 
    ng-click="modelData.orderByField = value; modelData.reverseSort = !modelData.reverseSort"> 
    {{ key }} 
    <span ng-show="modelData.orderByField == value"> 
     <span ng-show="!modelData.reverseSort"> &#9652</span> 
     <span ng-show="modelData.reverseSort"> &#9662</span> 
    </span> 
</th> 

像@VVK回答，沒有在你的代碼中的問題。不知道你正試圖定義一個Array或Object，

對象應該像這樣定義的：{'First Name':'firstName','Last Name':'lastName'}（他們應該開始{與}結束，但不[]）;

更改HTML代碼中使用modelData，然後它會工作：

<tr ng-repeat="item in data | orderBy:modelData.orderByField:modelData.reverseSort"> 

Answer 2

你$scope.headers初始化是錯誤的。你應該把它定義爲

$scope.headers={'First Name':'firstName','Last Name':'lastName'}