Question

我有两个输入字段。我想根据复选框点击事件将我的第一个文本字段值分配给第二个文本字段值。因此，在我的html中，单击“显示我输入密码”复选框将显示用户在textfield one到我的第二个文本字段中输入的密码。

我的HTML看起来像下面的内容。

<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Password :</span>
<input type="password" name="itemname" id="contactno" class="form-control" placeholder="password" ng-model="password" >
</div>
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Show me Password <input type="checkbox" ng-model="checkboxModel.value" /></span>
<input type="text" name="itemname" id="contactno" class="form-control" placeholder="password"  readonly="readonly" >
</div>

Answer 1

在ng-click上使用checkbox函数，如果选中复选框，则将值绑定到第二个输入框，因此当用户单击复选框时，第一个复选框的值绑定到第二个输入，未选中的第二个输入设置为空字符串。

请记住，值是从第一个输入复制到第二个，因此当用户单击复选框时，如果密码可见且用户更改输入，则值不会更新。

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.showPassword = '';
  $scope.password = '';
  $scope.checkboxModel = false;
  $scope.showHidePassword = function(checkboxModel) {
    $scope.showPassword = checkboxModel ? '' : $scope.password;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="input-group bmargindiv1 col-md-12">
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Password :</span>
    <input type="password" name="itemname" id="contactno" class="form-control" placeholder="password" ng-model="password">
  </div>
  <div class="input-group bmargindiv1 col-md-12">
    <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Show me Password <input type="checkbox" ng-model="checkboxModel" ng-click="showHidePassword(checkboxModel)" /></span>
    <input type="text" name="itemname" id="contactno" class="form-control" placeholder="password" ng-model="showPassword" readonly="readonly">
  </div>
</div>

＆＃13;

Answer 2

<input type="checkbox" ng-model="checkboxModel.value2"
       ng-true-value="password" ng-false-value="''">

<input ng-model="checkboxModel.value2" type="text" name="itemname" id="contactno" class="form-control" placeholder="password"  readonly="readonly">

这样的事可能吗？

当您选中该复选框时，该框的值将变为＆＃39;密码＆＃39;的值，并且第二个输入字段的值等于该复选框的值，因此第二个输入字段为当复选框被选中时，它等于第一个字段。我认为：）

好像你无法设定真正的价值＆＃39;到动态值，所以我的解决方案不起作用，但你可以使用ng-change（当更改值运行函数时）

        <input type="checkbox" ng-model="checkboxModel.value2" ng-change="showPassword()"
           ng-true-value="'true'" ng-false-value="'false'">

    <input ng-model="passwordValue" type="text" name="itemname" id="contactno" class="form-control" placeholder="password"  readonly="readonly">

控制器中的

    $scope.showPassword = function(){
    $scope.passwordValue = 'valueFromFieldOne';
    console.log('yep');
};

当您勾选复选框并将密码字段设置为第一个输入值时，此功能应该会运行（我的代码不完整，但我想你会得到图片）

Answer 3

以这种方式使用angularjs copy。您的复选框将如下所示。

<input type="checkbox" ng-model="checkboxModel.value" ng-click="ShowMePass(password) /></span>

你的angularjs功能。

$scope.ShowMePass= function(password) {
       $scope.passwordCopy= angular.copy(password);
     };

最后，您可以使用passwordCopy显示在第二个文本字段中。

工作代码。

Codepen

Answer 4

简短而有效的例子：

<div ng-app="myApp" ng-controller="myCtrl">
              <div class="input-group bmargindiv1 col-md-12">
                <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Password :</span>
                <input type="password" name="itemname" id="contactno" class="form-control" placeholder="password" ng-model="password" >
            </div>
            <div class="input-group bmargindiv1 col-md-12">
                <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Show me Password <input type="checkbox" ng-model="checkboxModel" ng-click="showPasswordQuick(password)"/></span></span>
                <input type="text" name="itemname" id="contactno" class="form-control" placeholder="password"  readonly="readonly" ng-model="passwordCopy">
            </div>

然后将其粘贴到您的JS：

中

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.showPasswordQuick = function(password) {
        $scope.checkboxModel ? $scope.passwordCopy = angular.copy(password) : $scope.passwordCopy = '';
    };
});

根据使用angular.js的复选框单击，将一个文本字段值分配给另一个

4 个答案: