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

【问题标题】：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"/>

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

【问题讨论】：

标签： jquery angularjs twitter-bootstrap

【解决方案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"/>

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

【讨论】：

但是在这种方法中，我必须为每个元素编写额外的代码
我刚刚添加了一个使用自定义指令的示例，请检查一下。