Question

第一个输入字段

<input type="text" id="prmnt_a1" ng-model="prmnt_a1" class="customInput" placeholder="Address Line 1"/>

复选框

<input type="checkbox" id="same" ng-model="same" ng-change="stateChanged(same)"/>

第二次输入

 <input type="text" id="prmnt_a2" ng-model="prmnt_a2" class="customInput" placeholder="Address Line 2"/>

如果checkbox为true，则第一个输入值应反映到第二个输入字段。

Answer 1

试试这个角度代码

$scope.stateChanged = function(same){
    if(same == true){
        $scope.prmnt_a2 = $scope.prmnt_a1;
    }else {
        $scope.prmnt_a2 = '';
    }
}

Answer 2

尝试此操作：为复选框和set / uset输入值注册更改事件处理程序

$(function(){
  $('#same').change(function(){
    //set input value for checkbox true
    if($(this).is(':checked'))
   {
     $('#prmnt_a2').val($('#prmnt_a1').val());
   }
   else
   {
    //clear input box value
    $('#prmnt_a2').val('');
   }
  });
});

Answer 3

如果您想纯粹从视图中进行操作，那么您可以使用ng-change：

<input type="text" id="prmnt_a1" ng-model="prmnt_a1" class="customInput" placeholder="Address Line 1"/>

<input type="checkbox" id="same" ng-model="same" ng-change="stateChanged(same); same ? prmnt_a2 = prmnt_a1 : false"/>

<input type="text" id="prmnt_a2" ng-model="prmnt_a2" class="customInput" placeholder="Address Line 2"/>

请注意，这只会设置第二个输入的值一次（选中复选框时），如果用户返回第一个输入并再次更改，则第二个输入不会更新，如果您需要在这种情况下要更新的第二个输入，那么你也必须在第一个输入中添加ng-change：

<input ng-change="same ? prmnt_a2 = prmnt_a1 : false" type="text" id="prmnt_a1" ng-model="prmnt_a1" class="customInput" placeholder="Address Line 1"/>

Answer 4

我不确定，但是你可以试试这些事情：

ng-change="prmnt_a2 = (same)?prmnt_a1:''"

这是一个棘手但完整的HTML方式应该可行：

<div ng-if="same==false">
    <input type="text" id="prmnt_a2" ng-model="prmnt_a2" class="customInput"      placeholder="Address Line 2"/>
</div>
<div ng-if="same==true">
    <input type="text" id="prmnt_a2" ng-init="prmnt_a2=prmnt_a1" disabled ng-model="prmnt_a2" class="customInput" placeholder="Address Line 2"/>
</div>

注意：ng-init通常不会像这样使用，并且一定要使用ng-if而不是ng-show / hide。

否则，如果这不起作用：自定义指令或控制器中的函数/ $ watch。 ng-attr刚刚在这里工作。

编辑：对于自定义指令，这就像代码：

.directive('myDirective', function(){
   return{
      restrict : 'A',
      scope:{
         same:'=myBoolean'
         value:'=myValue'
      },
      require:'ngModel',
      link:function(scope, element, attr, ngModelCtrl){
          scope.$watch('same', function(newValue){
             if(newValue){
                ngModel.setViewValue(scope.value);          
             }
          });
      }
   }
}

<input type="text" id="prmnt_a2" ng-init="prmnt_a2=prmnt_a1" ng-disabled="same" ng-model="prmnt_a2" my-directive my-boolean="same" my-value="prmnt_a1" class="customInput" placeholder="Address Line 2"/>

该指令相当基础。如果您需要更复杂的东西，请查看网络上的文档。

有条件地将第一个输入值反映到第二个输入字段（基于复选框）

4 个答案: