Question

我遇到了障碍。我有一段简单的代码：

<div ng-app>
    <input type="checkbox" ng-model="element" />Hide Element
    <div ng-if="!element">
        <input type="text" ng-disabled="disable" />       
        <input type="checkbox" ng-model="disable" />Disable
    </div>
</div>

这很好用，但我希望文本和第二个复选框分成多个div，两者都依赖于第一个复选框，如：

<div ng-app>
    <input type="checkbox" ng-model="element" />Hide Element
    <div ng-if="!element">
        <input type="text" ng-disabled="disable" />
    </div>
    <div ng-if="!element">        
        <input type="checkbox" ng-model="disable" />Disable
    </div>
</div>

执行此操作时，模型未正确应用，并且我无法使用第二个复选框禁用文本框。我误解了范围，还是这个错误？

我知道这个例子，我可以将两个包装在外部div中，但我的问题是我的结构是一个表结构（是的，它的表格数据），我不想要隐藏整行，同时尽可能保持标记语义。

<table>
    <tr>
        <td></td> //this does not get hidden
        <td></td> //this does not get hidden
        <td></td> //this does not get hidden
        <td></td> //THIS GETS HIDDEN
        <td></td> //THIS GETS HIDDEN
    </tr>
</table>

如果你想玩，我会设置一个基本的小提琴：http://jsfiddle.net/qkmv6wfh/

Answer 1

这不是一个错误。您看到的行为是由于ng-if创建的子范围。在您的情况下，范围属性disable中设置的值仅在第二个ng-if="!element"创建的子范围内可用，而另一个块内的disable位于其自己的子范围内。您可以通过在任何这些子范围（ex ng-init="action ={}"）之前将对象初始化的对象引用上设置它来解决它，在这种情况下，两个子范围都引用相同的对象引用action（因为它们是原型继承的）并且对属性action.disabled的修改会在两个地方都得到反映。

这不仅适用于ng-if任何创建子范围的指令，如ng-repeat，ng-switch等。

Read this well explained answer

尝试：

<div ng-app ng-init="action ={}">
  <input type="checkbox" ng-model="element" />Hide Element
  <div ng-if="!element">
    <input type="text" ng-disabled="action.disable" />
  </div>
  <div ng-if="!element">
    <input type="checkbox" ng-model="action.disable" />Disable
  </div>
</div>

错误代码警告：我仅将ng-init用于此演示目的，您不应使用ng-init进行初始化。始终使用控制器初始化示波器上的值。

<强>演示

angular.module('app', []).controller('Controller1', function() {

}).controller('dummy', function() {}).controller('Controller2', function($scope) {
  $scope.action = {};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <p>With ng-init</p>
  <div ng-init="action ={}" ng-controller="dummy">
    <input type="checkbox" ng-model="element" />Hide Element
    <div ng-if="!element">
      <input type="text" ng-disabled="action.disable" />
    </div>
    <div ng-if="!element">
      <input type="checkbox" ng-model="action.disable" />Disable
    </div>
  </div>

  <p>With Controller As</p>
  <div ng-controller="Controller1 as ctrl">
    <input type="checkbox" ng-model="ctrl.element" />Hide Element
    <div ng-if="!ctrl.element">
      <input type="text" ng-disabled="ctrl.disable" />
    </div>
    <div ng-if="!ctrl.element">
      <input type="checkbox" ng-model="ctrl.disable" />Disable
    </div>
  </div>

  <p>With Controller and dot in the binding</p>
  <div ng-controller="Controller2">
    <input type="checkbox" ng-model="element" />Hide Element
    <div ng-if="!element">
      <input type="text" ng-disabled="action.disable" />
    </div>
    <div ng-if="!element">
      <input type="checkbox" ng-model="action.disable" />Disable
    </div>
  </div>
</div>

Answer 2

尝试使用ng-show / hide：

  <div ng-app>
    <input type="checkbox" ng-model="element" />Hide Element
    <div ng-hide="element">
        <input type="text" ng-disabled="disable" />
    </div>
    <div ng-hide="element">        
        <input type="checkbox" ng-model="disable" />Disable
    </div>
</div>

ngIf内禁用Angular ng

2 个答案: