AngularJS取消multiselect多选框所有选项后如何重置header属性

• 首先修改multiselect模板的header属性为动态绑定，将静态值替换为控制器变量绑定：
  把原代码中的header="Environments"修改为ng-attr-header="{{envHeader}}"，若所用指令支持header属性的双向绑定，可直接写为header="envHeader"。
• 控制器初始化时定义初始值：

  $scope.envHeader = "Environments";
  

• 在你现有的清空选中项逻辑后，新增header重置代码，修改后的控制器代码如下：

  if(typeof item === 'object' && item !== null) {
      objectLength = Object.keys(item).length;
      if(objectLength > 0) {
          angular.forEach($scope.projects, function(reference) {
            if(item.id != reference.id) {
               angular.forEach($scope.selectedEnv, function(check) {
                 check.checked = false;
               });
               // 新增：重置header为初始值
               $scope.envHeader = "Environments";
               // 可选：若视图未自动更新，主动触发脏检查
               if(!$scope.$$phase) $scope.$apply();
            }
          });
      }
  }
  

如果所用的multiselect指令不允许外部直接修改header属性，可通过获取指令隔离作用域调用内置方法完成重置：

• 你已经给组件设置了id="env"，可直接通过该id获取指令作用域，在清空选中项后添加以下代码：

  // 获取multiselect的隔离作用域
  const multiSelectScope = angular.element('#env').isolateScope();
  // 优先调用指令公开的清空方法，大多数multiselect指令都内置clearSelection或reset方法
  if(multiSelectScope && typeof multiSelectScope.clearSelection === 'function') {
      multiSelectScope.clearSelection();
  } 
  // 无公开方法时直接修改指令内部的header变量
  else if(multiSelectScope) {
      multiSelectScope.header = "Environments";
      multiSelectScope.$apply();
  }
  

如果你的multiselect组件是基于官方angular-multiselect库实现，自带的reset()方法可同时完成清空选中项、重置header为初始值的操作，无需手动遍历修改selectedEnv的checked属性。

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