创建一个切换 ng-click 事件

Question

我已经成功创建了一个函数来实现在单击时展开ng-table的行，但是当再次单击它们时它们将不会隐藏。JavaScript中的函数如下：

$scope.toggle = function() {
    return !this.booleanVal;
}; 

booleanVal 是从 json 文件中获取的值（每行对应一个值）。然后在 HTML 中使用。

<p class="row_description more" ng-click="row.booleanVal = toggle()">{{row.description}</p>
<div class="check-element animate-show" ng-show="row.booleanVal">

第一次点击可以正常工作，将之前的 false booleanVal 转换为 true，但是它无法切换回 false。有什么想法是出了什么问题吗？

- Kylie Moden

---

谢谢，那应该是toggle()。 - Kylie Moden

Answer 1

试试这个:

<p class="row_description more" ng-click="row.booleanVal = !row.booleanVal">
    {{row.description}
</p>
<div class="check-element animate-show" ng-show="row.booleanVal"></div>

- Mathew Berg

---

我通过一位导师离线了解到，你也可以这样做 TestCase.prototype.toggle = function() { this.showMe = !this.showMe; } 但是你的解决方案也是正确的，并且运行得很好。 - Kylie Moden

请确保不要像我一样意外地执行 row.value!=row.value，期望它能够工作10分钟，因为这只是在比较是否不相等 ;) - GONeale

Answer 2

嗨，请看这里：http://jsbin.com/hefeb/1/edit。这是一个链接。

  $scope.toogle = function(i)
  {
    i.booleanVal = !i.booleanVal 

  };

- sylwester

Answer 3

你还可以使用条件运算符。

试试这个：

<p class="row_description more" 
   ng-click="row.booleanVal =row.booleanVal?false:true">
   {{row.description}}
</p>
<div class="check-element animate-show" ng-show="row.booleanVal"></div>

- Fracedo

Answer 4

您可以选择以下操作之一：

• 在toggle()函数中使用this.row.booleanVal
• 直接在ngClick指令中切换布尔值：ng-click="row.booleanVal = !row.booleanVal"

- Thomas Roch