I am currently working on creating a dynamic table using an array of objects that can be sorted by clicking the headers. I have a specific question regarding how the sorting feature is implemented.
let myDirectiveTemplate = `
<table class="directiveTable">
<thead>
<th ng-repeat="(key,val) in tableObjectArray[0] track by $index">
<a href="" ng-click="changeCriteria(key)">
{{key}}
</a>
</th>
</thead>
<tbody>
<tr ng-repeat="object in tableObjectArray | orderBy:criteria track by $index">
<td ng-repeat="prop in object track by $index">
{{prop}}
</td>
</tr>
</tbody>
</table>
`
let app2 = angular.module('myDirectiveModule', []);
let myDirective = () => {
return {
restrict: 'E',
scope: {
tableObjectArray: '=objects',
},
controller: myDirectiveController,
template: myDirectiveTemplate,
}
};
let myDirectiveController = ($scope) => {
$scope.changeCriteria = criteria => {
$scope.criteria = criteria;
}
};
app2.directive('myDirective', myDirective);
app2.controller('myDirectiveController', myDirectiveController);
The current implementation works as expected. However, when I try to change the ng-click attribute in the template to
ng-click="criteria = key"
it doesn't seem to have any effect. Even when I try to display the variable using double curly braces, it does not update upon clicking. I have used variable assignment in an ng-click before without issues; so I'm curious why this behavior is occurring?