Question

我有两个输入框。一个用于当前地址，另一个用于永久性。
当我点击复选框时，当前地址值应显示在永久地址上。

同样当我取消选中permanantAddress时应该是空的。但是它没有工作。我在这里做错了什么？

var app=angular.module('myApp',[])
app.controller('myController',function($scope){
$scope.init = function(){
  $('.sameAddress').change(function () {debugger
            if ($(this).prop('checked')) {
             $scope.data.permanantAddress = $scope.data.address;
            }
            })
}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
<form id="myForm" >
<div>
  <input type="text" ng-model="data.address">
</div>
<div><input type="checkbox" class="sameAddress"/><span>Permanant Address same as Current Address</span></div>
<div>
  <input type="text" ng-model="data.permanantAddress">
</div>
</form>

</div>

Answer 1

在角度脚本

中不需要init函数和jquery

＆＃13;

  var app=angular.module('myApp',[])
app.controller('myController',function($scope){

$scope.copyaddress=function(){
    if($scope.sameaddress_data){
          $scope.data.permanantAddress1 = $scope.data.address1;
          $scope.data.permanantAddress2 = $scope.data.address2;
          $scope.data.permanantAddress3 = $scope.data.address3;
    }else{
          $scope.data.permanantAddress1 = ""
          $scope.data.permanantAddress2 = ""
          $scope.data.permanantAddress3 = ""
    }
}
   
})

＆＃13;

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <div ng-app="myApp" ng-controller="myController" ng-init="init()">
<form id="myForm" >
<div>
  <input type="text" ng-model="data.address1">
</div>
 <div>
  <input type="text" ng-model="data.address2">
</div>
 <div>
  <input type="text" ng-model="data.address3">
</div>
<div><input type="checkbox" ng-model="sameaddress_data" class="sameAddress"  ng-change="copyaddress()"/><span>Permanant Address same as Current Address</span></div>
<div>
  <input type="text" ng-model="data.permanantAddress1">
</div>
 <div>
  <input type="text" ng-model="data.permanantAddress2">
</div>
 <div>
  <input type="text" ng-model="data.permanantAddress3">
</div>
</form>
</div>

＆＃13;

Answer 2

这是一个使用JQuery（No Angular）的多个字段的简单实现：

＆＃13;

$(".sameAddress").on("click", function() {
  var ship = $(this).is(":checked");
  $("[id^='permanent_']").each(function() {
    var tmpID = this.id.split('permanent_')[1];
    $(this).val(ship ? $("#" + tmpID).val() : "");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <div>
    <input type="text" id="first_name">
    <input type="text" id="last_name">
    <input type="text" id="address">
  </div>
  <div><input type="checkbox" class="sameAddress" /><span>Permanant Address same as Current Address</span></div>
  <div>
    <input type="text" id="permanent_first_name">
    <input type="text" id="permanent_last_name">
    <input type="text" id="permanent_address">
  </div>
</form>

＆＃13;

将一个输入值绑定到另一个输入

2 个答案: