Angular1ngモデルが2番目の入力フィールドで機能しない

Question

私はAngularJSコントローラで2つの入力フィールドを動的に生成しました。私は最初の入力値を2番目の入力値に取り込み、2番目の入力フィールドは読み込み専用です。

2番目の入力値が50より大きい場合、除算が表示されます。ここで

<input type="number" ng-model="firstInput"><br/> 
 
<!--Some code depend on input value --> 
 
<input type="number" ng-value="firstInput" ng-model="secondInput" readonly><br/> 
 
<div ng-if="secondInput>50">Hello</div>

、私がいない最初の入力から、第二の入力モデルとのdiv ng-ifをチェックする必要があります。

Answer 1

は、それが読み取り専用にする必要があります。この

<input type="number" ng-model="firstInput"><br/> 
<input type="number" ng-value="secondInput = firstInput" ng-model="secondInput" readonly><br/> 
<div ng-if="secondInput > 50">Hello</div> 

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

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="AppCtrl"> 
 
<input type="number" ng-model="firstInput"><br/> 
 
<!--Some code depend on input value --> 
 
<input type="number" ng-value="secondInput = firstInput" ng-model="secondInput" readonly><br/> 
 
<div ng-if="secondInput>50">Hello</div> 
 
</div>

Answer 2

あなたは2つの変数を使用したい場合は、あなたがsecondInputへの第1入力の値を代入して、コントローラでは、このような$watchを使用することができ、

$scope.$watch('firstInput', function() { 
      $scope.secondInput = $scope.firstInput; 
    }); 

DEMO

var app = angular.module('myApp', []); 
 
app.controller('AppCtrl', function($scope) { 
 
$scope.$watch('firstInput', function() { 
 
     $scope.secondInput = $scope.firstInput; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="AppCtrl"> 
 
<input type="number" ng-model="firstInput"><br/> 
 
<!--Some code depend on input value --> 
 
<input type="number" ng-model="secondInput" readonly><br/> 
 
<div ng-if="secondInput>50">Hello</div> 
 
</div>