2017-03-18 74 views
0

我有兩個輸入框。無論第一個輸入框輸入什麼,都應該顯示在第二個輸入框中,這很容易。但是,如果我在第二個輸入框中輸入了某些內容並嘗試首先顯示它不起作用。AngularJs中的反向綁定

這是代碼。

<div ng-app=""> 
    <input type="text" ng-model="first" value={{second}}> 
    <input type="text" value={{first}} ng-model="second"> 
</div> 

是不是允許使用Angular?

回答

1

如果有兩個輸入框共享相同的值是你想要的,那麼爲ng模型分配相同的範圍變量也可以。

<div ng-app=""> 
    <input type="text" ng-model="form.sameName"> 
    <input type="text" ng-model="form.sameName"> 
</div> 

並建議對ng模型變量使用點符號。

+0

你能解釋爲什麼我的代碼不工作? – WeAreRight

+0

如果我有四個輸入框,前兩個具有相同的值綁定,另外兩個具有相同的值綁定,會怎樣?那麼這些輸入框的「ng-model」是什麼。 – WeAreRight

1

你更接近,使用相同的NG-模型兩個輸入,

<input type="text" ng-model="data"> 
<br> 
    <input type="text" ng-model="data"> 
<br> 

DEMO

var myApp = angular.module('myApp', []); 
 
myApp.controller('TestCtrl', ['$scope', function($scope) { 
 

 
}]);
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script data-require="[email protected]*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> 
 
<link rel="stylesheet" href="style.css" /> 
 
</head> 
 
<body ng-app="myApp"> 
 
<div ng-controller="TestCtrl"> 
 
    <input type="text" ng-model="data"> 
 
    <br> 
 
    <input type="text" ng-model="data"> 
 
    <br> 
 
    </div> 
 
</body>

+0

你能解釋我的代碼不工作的原因嗎? – WeAreRight

+0

@WeAreRight,因爲您有兩種不同的型號 – Sajeetharan

+0

@ 32theeths提供的解決方案如何?它看起來有點容易記住。 – WeAreRight