能否在ng-click中判断条件并修改变量值？附两种实现代码示例

当然可以在ng-click指令里实现条件判断并修改变量的值，但你当前的写法有两个明显的问题，咱们来捋清楚：

问题1：直接操作DOM不符合AngularJS的设计理念 #

你用document.getElementById('procheck1')直接获取DOM元素，这会绕过AngularJS的数据绑定机制，可能导致视图和数据不同步，而且也不符合AngularJS推崇的"数据驱动视图"的思路。

问题2：ng-click里直接写if语句语法不合法 #

AngularJS的指令表达式（比如ng-click里的内容）只支持表达式，不支持完整的JS语句块，所以直接写if{...}else{...}会报错；三元表达式是可行的，但还是要避免操作DOM。

正确的实现方式有两种，推荐优先第二种： #

方式1：简化的三元表达式（配合ng-model绑定）

先把复选框的状态绑定到scope变量上，然后在ng-click里直接用这个变量做判断：

<!-- 给复选框加上ng-model，绑定到scope变量 -->
<input type="checkbox" id="procheck1" ng-model="isProChecked">
<!-- 直接用绑定的变量判断，甚至可以简化成showme = isProChecked -->
<button ng-click="showme = isProChecked ? true : false">切换显示状态</button>

因为isProChecked本身就是布尔值，完全可以简化成ng-click="showme = isProChecked"，效果是一样的。

方式2：把逻辑放到控制器中（更推荐）

复杂一点的逻辑（哪怕现在简单，以后可能扩展）都应该放到控制器里，和视图分离，方便维护和测试：

模板代码：

<input type="checkbox" id="procheck1" ng-model="isProChecked">
<button ng-click="toggleShowStatus()">切换显示状态</button>

控制器代码：

angular.module('yourApp', [])
.controller('yourController', function($scope) {
  // 初始化变量
  $scope.isProChecked = false;
  $scope.showme = false;

  // 定义点击事件的处理函数
  $scope.toggleShowStatus = function() {
    // 这里可以写任意复杂的逻辑
    if ($scope.isProChecked) {
      $scope.showme = true;
    } else {
      $scope.showme = false;
    }
    // 同样可以简化成：$scope.showme = $scope.isProChecked;
  };
});

总结一下：

• 尽量用ng-model绑定DOM元素的状态，不要直接操作DOM
• 简单逻辑可以用三元表达式写在ng-click里，但复杂逻辑一定要放到控制器/服务中
• ng-click里的内容是AngularJS表达式，不是完整的JS语句，所以不能直接写if语句块

内容的提问来源于stack exchange，提问作者Godwin