ng-click and ng-init variable definition

Question

I am trying to make table header sorter work by using ng-click and ng-init.

Examples in angular js documents require modules, and if I install and update that module, my SPA falls apart for some reason. I tried to make it work, but even with help from other colleagues, it failed.

So, I thought of by-passing and came up with ng-click and ng-init. If I count the number of clicks, then every even number of click, the table sorts by ascending and every odd number of click, the table sorts by descending.

I can do one click and one sorting (e.g. one click - ascending - done for good no matter how much more I click) with (click). But, when I used ng-click and ng-init, the variable inside ng-init is not recognized.

<th><button class="some-type" ng-click="count = count + 1; oddEven(count)? sortByAsc(column) : sortByDes(column)" ng-init="count = 0"><b>columnName</b></button></th>

If I insert {{ count }} right besides columnName in the above code (or anywhere in the code for what's worth), it gives error saying count is not defined.

<th><button class="some-type" ng-click="count = count + 1" ng-init="count = 0"><b>columnName</b></button></th>

I removed additional function calls in ng-click like in the above code, but even this simple code does not recognize count at all.

So, is there specific way to declare variables inside ng-init and ng-click?

Why would this code not work the way it is?

Does this answer your question? [Why is the variable set in ng-init undefined in $scope in AngularJS?](https://stackoverflow.com/questions/18608161/why-is-the-variable-set-in-ng-init-undefined-in-scope-in-angularjs) — Anurag Srivastava, Apr 10 '20 at 09:46
@AnuragSrivastava, in the link that you provided, they used ng-controller. So, basically, ng-click and ng-controller is the main "function" and ng-init is the variable setter in html? — beginnercoder, Apr 13 '20 at 00:07

score 0 · Answer 1 · edited Apr 12 '20 at 16:41

0

I suggest keeping an object tracking which col order is on acs or des order which you can use in function to call respective function. Here is the sample code.

var sortOrder = {
  column1: false,
  column2: false
}

$scope.sortBy = function(col) {
  if(sortOrder[col]) {
    sortByAsc(col)
  } else {
    sortByDes(col)
  }
  sortOrder[col] = !sortOrder[col]
}

edited Apr 12 '20 at 16:41

Moralde-Sama

154
10

answered Apr 10 '20 at 08:31

Kamran Qadri

144
6

Just wondering what $scope is for. I am just following what other colleague did and did not really have time to get into all the details of angularJS or JS for that matter. So, just briefly if you could explain what $scope is and how and where I should use $scope? – beginnercoder Apr 13 '20 at 00:04
Well, $scope is where you defined your models and methods which you will use in your view. Like you have sortByAsc in your controller function and using in view html. So what it does is when anything change in $scope angular will render that change in html, also when you define variable using var or const it will not be available in html. – Kamran Qadri Apr 13 '20 at 06:55
Thanks for the explanation. I was trying different approaches but it still uses $scope, so your explanation helped. But, does $scope apply only in Angular JS 1.x? Or does it apply in Angular JS 2.x as well? I just learned that I am most likely using Angular JS 2.x and that might be why properties are not recognized even after using $scope? – beginnercoder Apr 13 '20 at 08:26
Well, AngularJS 1.x and Angular is totally different frameworks, $scope is not available in Angular. Also, we call Angular to AngularJs x.x Your syntax is of angularjs not angular, you can double check which framework you are working. – Kamran Qadri Apr 17 '20 at 09:44

ng-click and ng-init variable definition

1 Answers1