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

Posted 2023-05-08

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

【英文标题】：reflect first input value to second input field conditionally (based on checkbox)

【发布时间】：2016-08-09 18:54:18

【问题描述】：

第一个输入字段

<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"/>

如果复选框为真，则第一个输入值应反映到第二个输入字段。

【参考方案1】：

试试这个角码

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

【讨论】：

我已经尝试过了，但我必须再次设置所有字段。但想要一个最短的方法，比如 ng-attr-value=prmnt_a1

【参考方案2】：

如果您想纯粹从视图中执行此操作，则可以使用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"/>

【讨论】：

我会尝试，但如果我想在同一个元素上运行另一个方法，那么函数执行的顺序是什么。

@sumitchoudhary 不明白你的意思。你的意思是如果你也想在ng-change 中运行另一个方法吗？如果是这种情况，那么只要用; 将它们分开，就可以运行多个方法/函数。就像我在这里做的那样：ng-change="stateChanged(same); same ? prmnt_a2 = prmnt_a1 : false"

【参考方案3】：

试试这个：为复选框注册一个更改事件处理程序并设置/使用输入值

$(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('');
   
  );
);

【讨论】：

我同意你的方法，但我不想写太多代码。我认为在 Angular 中有一种更好的方法来做到这一点。

【参考方案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"/>

这个指令是相当基本的。如果您需要更复杂的东西，请查看网上的文档。

【讨论】：

但是在这种方法中，我必须为每个元素编写额外的代码

我刚刚添加了一个使用自定义指令的示例，请检查一下。