javascript - 解析表单之外的 ng-model

Question

我有一个 html 文件，其中有 2 个表单元素，其中都包含输入元素。我将使用 ng-if 来选择我需要的表单元素。输入元素绑定(bind)到同一模型。但我无法在表单范围之外解决它。

<form ng-if="some_name == '1'">
 <input ng-model="model_name">
</form>

<form ng-if="some_name == '2'">
 <input ng-model="model_name">
</form>

{{model_name}} //This is different from the value of either of the input elements
//it has the initial value which i would assign : $model_name = "xyz"; in my associated js file

Answer 1

您无法在表单外部看到这些更改的原因是您正在使用“ngIf”指令添加/删除 DOM，并且“ngIf”指令创建了一个新范围。

有两种快速方法可以解决此问题:1)使用“ngShow”。看下面的例子:

angular.module('app', [])
  .controller('HomeController', function($scope) {
    $scope.model_name = 'Hi';
    $scope.some_name = '1';
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div data-ng-app="app" data-ng-controller="HomeController">

  <form ng-show="some_name == '1'">
    <input ng-model="model_name">
  </form>

  <form ng-show="some_name == '2'">
    <input ng-model="model_name">
  </form>

  {{model_name}}

</div>

2)使输入模型成为一个对象，而不是基元。

angular.module('app', [])
  .controller('HomeController', function($scope) {
    $scope.model_name = {
      value: 'Hi'
    };
    $scope.some_name = '1';
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div data-ng-app="app" data-ng-controller="HomeController">

  <form ng-if="some_name == '1'">
    <input ng-model="model_name.value">
  </form>

  <form ng-if="some_name == '2'">
    <input ng-model="model_name.value">
  </form>

  {{model_name.value}}

</div>