ng-hide表达式结合&&与null条件时无法正常生效

先看你贴的代码：

<div ng-hide="textformField.DefaultValueQuery == null && textformField.PlaceHolderQuery == null"> Hello World
</div>

可能的失效原因及修复方案 #

• 表达式逻辑反转：ng-hide的规则是表达式为true时隐藏元素。如果你的需求是“只要两个字段有一个为null就隐藏”，那当前的逻辑（两个都为null才隐藏）完全不符，改成逻辑或即可：

  <div ng-hide="textformField.DefaultValueQuery == null || textformField.PlaceHolderQuery == null"> Hello World</div>
  

  也可以用更直观的ng-show替代，逻辑更符合“满足条件才显示”的思维：

  <div ng-show="textformField.DefaultValueQuery != null && textformField.PlaceHolderQuery != null"> Hello World</div>
  

• 变量未绑定到作用域：检查textformField是否正确挂载到当前AngularJS控制器的$scope上；如果用controllerAs语法，要加上对应别名（比如vm.textformField），变量不在作用域内的话，表达式永远为false，元素不会隐藏。

• null判断不严谨：AngularJS内置的angular.isNull()能更准确判断null，避免undefined的干扰，修改后：

  <div ng-hide="angular.isNull(textformField.DefaultValueQuery) && angular.isNull(textformField.PlaceHolderQuery)"> Hello World</div>
  

• TypeScript函数绑定问题：如果把判断逻辑写到TypeScript函数里，要确保函数返回正确布尔值，且挂载到作用域，同时用箭头函数避免this指向错误：

  // 假设用controllerAs，别名为vm
  vm.shouldHideHello = () => {
    return vm.textformField.DefaultValueQuery == null && vm.textformField.PlaceHolderQuery == null;
  };
  

  模板中调用函数：

  <div ng-hide="vm.shouldHideHello()"> Hello World</div>
  

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