简体   繁体   English

ng-click 和 ng-init 变量定义

[英]ng-click and ng-init variable definition

I am trying to make table header sorter work by using ng-click and ng-init.我正在尝试使用 ng-click 和 ng-init 使表 header 分拣器工作。

Examples in angular js documents require modules, and if I install and update that module, my SPA falls apart for some reason. angular js 文档中的示例需要模块,如果我安装和更新该模块,我的 SPA 会因某种原因而崩溃。 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.所以,我想到了绕过,想出了 ng-click 和 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 (eg one click - ascending - done for good no matter how much more I click) with (click).我可以使用 (click) 进行一次点击和一次排序(例如,一次点击 - 升序 - 无论我点击多少,都可以完成)。 But, when I used ng-click and ng-init, the variable inside ng-init is not recognized.但是,当我使用 ng-click 和 ng-init 时,无法识别 ng-init 中的变量。

<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.如果我在上面的代码中的 columnName 旁边插入 {{ count }} (或代码中的任何价值),它会给出错误说 count 未定义。

<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.我像上面的代码一样在 ng-click 中删除了额外的 function 调用,但即使是这个简单的代码也根本无法识别计数。

So, is there specific way to declare variables inside ng-init and ng-click?那么,有没有特定的方法在 ng-init 和 ng-click 中声明变量?

Why would this code not work the way it is?为什么这段代码不能按原样工作?

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.我建议保留一个 object 跟踪哪个 col 订单在 acs 或 des 订单上,您可以在 function 中使用它来调用相应的 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]
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM