在表單之外解析ng-model

Question

我有一個帶有2個表單元素的html文件，其中包含兩個輸入元素。我將使用ng-if來選擇我需要的表單元素。輸入元素綁定到相同的模型。但我無法在表單範圍之外解決它。

<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>