Angular 1 ng-Modell arbeitet nicht auf dem zweiten Eingabefeld

Question

Bitte helfen Sie mir in diesem Zusammenhang

Ich habe zwei Eingabefelder dynamisch in AngularJS Controller erzeugt. Ich werde den ersten Eingabewert in den zweiten eingeben und das zweite Eingabefeld wird nur gelesen.

Wenn der zweite Eingabewert größer als 50 ist, sollte eine Teilung sichtbar sein.

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

Hier muss ich die div ng-if mit dem zweiten Eingabemodell überprüfen, nicht von der ersten Eingabe.

Answer 1

Versuchen Sie, diese

<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

Wenn Sie zwei Variablen verwenden möchten, können Sie den Wert der ersten Eingang zum zweiten Eingang $watch wie dies in Ihrem Controller,

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

verwenden zuweisen