Question

如何将输入文本的值复制到AngularJS 1.X中的其他输入文本元素

但是每个输入在控制器中都有自己的属性

到目前为止，我已经尝试过

 <div class="paramWrap"> // copy from here
    <label for="accoubntDis">Account Discount</label>
        <input id="accoubntDis" type="text" class="form-control" ng-model="accoubntDis">
 </div>

 <pre>{{accoubntDis}}</pre> // only this displayed

    <div class="space"></div>
    <div class="paramWrap">
        <label for="365Dis">O365 Exchange Unlicensed Discount</label>
        <input id="365Dis" type="text" class="form-control" value="{{accoubntDis}}" ng-model="accoubntDis12">
    </div>

    <div class="space"></div>
    <div class="paramWrap">
        <label for="gSuiteO365">G Suite / O365 Exchange Paused/Archived</label>
        <input id="gSuiteO365" type="text" class="form-control" value={{accoubntDis}} ng-model="gSuiteO365">
    </div>

我实际上看到的只是显示<pre>{{accoubntDis}}</pre>

为什么value/ng-value={{accoubntDis}}/"accoubntDis"在<input ....中不起作用？

我是否需要在控制器端使用任何JS函数？

Answer 1

我尝试使用“ ng-value”，它的工作角度为1.5及更高。如果角度小于1.5，则可以采用以下方法。

所以最好在输入字段1的变化上编写一个函数调用，然后在该函数将field1的值分配给field2。考虑下面的示例示例。

HTML：

<input type="text" ng-model="data" ng-change="updateField()">
<input type="text" ng-model="meta">

JS：

  $scope.data;
  $scope.meta;
  $scope.updateField= function(){
      $scope.meta=$scope.data;
  }

Answer 2

最简单和最佳的方法是使用 ng-change 而不是ng-value。

HTML代码：

<input type = "text" ng-model = "first" ng-change = "changeSecond()"/>
<input type = "text" ng-model = "second"/>

角度：js对应代码

$scope.changeSecond = function() {
    $scope.second = $scope.first;
}

Answer 3

输入中不需要{{}}，只需输入 value =“ accoubntDis” 就可以了。

        <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<div class="paramWrap"> // copy from here
    <label for="accoubntDis">Account Discount</label>
    <input id="accoubntDis" type="text" class="form-control" ng-model="accoubntDis" ng-change="calculate()">
</div>

 <pre>{{accoubntDis}}</pre> // only this displayed

    <div class="space"></div>
    <div class="paramWrap">
        <label for="365Dis">O365 Exchange Unlicensed Discount</label>
        <input id="365Dis" type="text" class="form-control" ng-value="accoubntDis2">
    </div>

    <div class="space"></div>
    <div class="paramWrap">
        <label for="gSuiteO365">G Suite / O365 Exchange Paused/Archived</label>
        <input id="gSuiteO365" type="text" class="form-control" ng-model="accoubntDis3">
</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.accoubntDis = "100";
  $scope.accoubntDis2 = $scope.accoubntDis * 2;
  $scope.accoubntDis3 = $scope.accoubntDis / 2;

  $scope.calculate = function(){
  $scope.accoubntDis2 = $scope.accoubntDis * 2;
  $scope.accoubntDis3 = $scope.accoubntDis / 2;
}
});
</script>

</body>
</html>

Answer 4

使用ng-value指令。

<input ng-value="accoubntDis" />

请参阅此API doc。

顺便说一句，当您使用ng-model时，value将被覆盖，因此似乎无法使用。

<input ng-model="accoubntDis" />

Answer 5

使用ng-value指令。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">


<div class="paramWrap"> 
    <label for="accoubntDis">Account Discount</label>
        <input id="accoubntDis" type="text" class="form-control" ng-model="accoubntDis">
 </div>

 <pre>{{accoubntDis}}</pre> 

    <div class="space"></div>
    <div class="paramWrap">
        <label for="365Dis">O365 Exchange Unlicensed Discount</label>
        <input id="365Dis" type="text" class="form-control" ng-value="accoubntDis" ng-model="accoubntDis12">
    </div>

    <div class="space"></div>
    <div class="paramWrap">
        <label for="gSuiteO365">G Suite / O365 Exchange Paused/Archived</label>
        <input id="gSuiteO365" type="text" class="form-control" value={{accoubntDis}} ng-model="gSuiteO365">
    </div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.accountDis = "Hello World!";
    $scope.accoubntDis=123;
});
</script>

<p>This example shows how to use AngularJS expressions to set the value of an input field.</p>

</body>
</html>

如何将输入文本的值复制到其他输入文本

5 个答案: