Question

我在ng-model标记中使用input，例如

<input ng-model="someModel" type="file" />

在执行的某个时刻，我有兴趣禁用/删除ng-model，以便input的更改不会再影响someModel。

我尝试选择输入元素，然后应用element.removeAttr("ng-model")，但该元素似乎仍然对someModel的更改作出反应。

我的猜测是，由于摘要周期，这种情况正在发生。那么如何禁用/删除ng-model？

Answer 1

有两个带ng-if条件的输入。 ng-if可以从DOM中删除元素。

<input ng-model="someModel" type="file" ng-if="condition1" />
<input ng-model="" type="file" ng-if="!condition1" />

Answer 2

以下是使用控制器执行此操作的一种方法示例。它基本上将输入绑定到虚拟变量并调用ng-change函数。在控制器中，您可以根据是否希望输入更新someModel来放置逻辑。在该示例中，复选框确定是否更新。

var app = angular.module('app', []);
app.controller('controller', ['$scope',
  function($scope) {
    $scope.update = true;
    $scope.dummyChanged = function(dummy) {
      if ($scope.update) {
        $scope.someModel = dummy;
      }
    }

  }
])

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="controller">
    Type value in here
    <input ng-model="dummy" ng-change="dummyChanged(dummy)" />
    <br />Click here to allow updates to model
    <input ng-model="update" type="checkbox" />

    <pre>
        someModel: {{someModel}}
        update: {{update}}
      </pre>
  </div>
</body>

</html>

如何动态禁用ng-model

2 个答案: