Question

如果选中复选框，我正在尝试复制input。如果不是，则不要在第二个checkbox上写任何内容。

这是引用这些元素的代码：

<form name="myCustomForm">
    <input type="checkbox" ng-model="checkDuplicate.value1" ng-true-value="{{myCustomForm.ownerName.$viewValue}}" ng-false-value="''"/>
    <input ng-model="ownerName" placeholder="Enter your name..." name="ownerName"  id="ownerName" disabled>
    <input ng-value="{{checkDuplicate.value1}}" placeholder="Enter the name of the house in which you live..." name="houseOwnerName" required>
</form>

在我的控制器上，我有以下内容来初始化复选框：

$scope.checkDuplicate = {
   value1 : true
};

我正在尝试做什么

如果选中了复选框，则第二个输入将使用第一个输入的值自动完成。如果没有，那么第二个输入将为空，直到用户给它一些值。

我有两个问题：

第一个

如果我手动设置true或false取决于复选框的状态（我的意思是ng-true-value="'true'"和ng-false-value="'false'"），它会很好地检索{{1}的值有}。

但是，如果我尝试检索我的checkbox值，如上所示，我得到一个空值（如果它有一些值没关系，它总是空的。）

第二个

如果我按照上面的说明放置我的代码，它只会在第一次（页面加载时）获取值，但不会在以下时间更改input值。

然而，如果我尝试从checkbox值中检索值，我可以正确获取复选框的值。我的意思是，如果我input它显示得恰到好处。

我尝试使用<span>{{checkDuplicate.value1}}</span>，但没有成功。

如何在检查ng-change时以正确的方式解决这些错误或如何复制input？

提前致谢！

Answer 1

您可以更改变量以跟踪输入。有一个工作的例子。

说明的

我更改了ng-true-value和ng-false-value复选框，它正在为我们提供您在ng-model ownerName input中使用的变量名称。然后我更改了重复输入ng-model变量。它正在改变取决于复选框值。如果选中复选框，则会跟踪$scope.inputs.name，如果它不是$scope.inputs.text

    var app = angular.module("app",[]);
    app.controller("ctrl", function($scope){

    $scope.inputs = {};

    $scope.checkDuplicate = {
       value1 : 'text'
    };

    })

    <html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      </head>
      <body  ng-app="app" ng-controller="ctrl" >
      
      
      <form name="myCustomForm">
        <input type="checkbox" ng-model="checkDuplicate.value1" ng-true-value="name" ng-false-value="text"/>
        <input ng-model="inputs.name" placeholder="Enter your name..." name="ownerName"  id="ownerName" >
        <input ng-model="inputs[checkDuplicate.value1]" placeholder="Enter the name of the house in which you live..." name="houseOwnerName" required>
    </form>


      </body>
    </html>

Answer 2

 <form name="myCustomForm">
  <input type="checkbox" ng-model="checkDuplicate.value1" ng-true-value="
        {{myCustomForm.ownerName.$viewValue}}" ng-false-value="''"
          ng-click="updateOwnerName()"/>
  <input ng-model="ownerName" placeholder="Enter your name..." 
         name="ownerName"  id="ownerName" disabled>
  <input ng-model="houseOwnerName" ng-value="{{checkDuplicate.value1}}" 
         placeholder="Enter the name of the house in which you live..." 
         name="houseOwnerName" required>

在复选框中添加点击事件。

将ng-model分配给第二个输入。

现在在控制器中

     $scope.checkDuplicate = {
          value1 : false   
      };

     $scope.updateOwnerName=function(){
         // write your auto complete logic here
         // let the value to be displayed in 2nd input is "MARS"
           if(checkDuplicate.value1){
                 $scope.houseOwnerName="MARS";
              }
           else{
                 $scope.houseOwnerName="";
               }

        }

如何在Angularjs上选中复选框时复制输入？

2 个答案: