AngularJS ng-repeat combined with ng-click=orderByField

Question

AngularJS

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

View

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

This is my code, I'm trying to create all table headers from the list of keys in $scope.headers and make each header sortable.

for some reason this code doesn't work, I don't get any errors in web console either.

Answer 1

There is the problem with nested scopes. Read about the nested scope problem in https://github.com/angular/angular.js/wiki/Understanding-Scopes .

Regarding how you fix it to create an object and use values from there:

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

Now, use accordingly:

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

Like @VVK answered, there is a problem in your code. Not sure what you are trying to define an Array or an Object ,

Object should be defined like this: {'First Name':'firstName','Last Name':'lastName'} (they should start with { and end with } but not with [] );

Change your HTML code to use modelData and it will then work:

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

Answer 2

Your $scope.headers initialization is wrong. You should define it as

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