AngularJS：如何通过ng-click实现对立ng-show的div从B切回A

你的需求本质是强制切换显示状态，而不是依赖tasks.length的自然变化，所以直接修改tasks数据（比如清空它）虽然能实现，但可能会破坏业务逻辑。更优雅的方式是新增一个视图控制变量，把显示逻辑和数据逻辑解耦：

步骤1：修改HTML中的ng-show条件 #

把原来依赖tasks.length的判断，改成基于新的控制变量（比如currentView）：

<!-- A区域 -->
<div ng-show="currentView === 'A'">
  <!-- A的原有内容 -->
</div>

<!-- B区域 -->
<div ng-show="currentView === 'B'">
  <!-- B的原有内容 -->
  <md-button ng-click="myFunc()">切换回A</md-button>
</div>

步骤2：在控制器中初始化控制变量并实现myFunc #

页面加载时，根据tasks.length的初始值设置默认显示的视图，同时写出切换逻辑：

// 假设这是你的控制器代码
app.controller('YourController', function($scope) {
  // 你的tasks数据源
  $scope.tasks = [...];

  // 初始化视图：默认根据tasks长度判断显示A还是B
  $scope.currentView = $scope.tasks.length > 0 ? 'B' : 'A';

  // 实现点击切换的myFunc函数
  $scope.myFunc = function() {
    // 强制切换到A视图
    $scope.currentView = 'A';
  };
});

额外优化：保持视图与数据的自动同步（可选） #

如果希望当tasks.length自然变化时（比如新增/删除任务），视图能自动切换，但用户手动切换到A后不会被自动覆盖，可以加一个监听：

$scope.$watch('tasks.length', function(newLength) {
  // 只有当用户没有手动切换到A时，才自动根据数据切换视图
  if ($scope.currentView !== 'A') {
    $scope.currentView = newLength > 0 ? 'B' : 'A';
  }
});

如果你确实不需要保留tasks数据，只是想通过清空它来触发A的显示，那myFunc可以这么写：

$scope.myFunc = function() {
  // 清空tasks，让tasks.length <=0，从而触发A的ng-show条件
  $scope.tasks = [];
};

但这种方法会丢失原有任务数据，仅适用于不需要保留tasks的场景。

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