Angular js - 克隆數據實時從一個字段到另一個字段

試圖找出窗體相關的角度技術。我是angularjs的新手，並開始深入研究它。Angular js - 克隆數據實時從一個字段到另一個字段

嗯即時嘗試獲取當前和永久地址的形式。當選中「與當前一樣」複選框時，當前地址字段的值將被寫入永久地址字段的ng值中。

雖然永久地址字段先輸入，然後我們檢查「與當前相同」而不是覆蓋當前地址ng值的字段。

當前地址字段

<input type="text" class="h-textform form-control" id="exampleInputEmail3" name="current_address_line1" ng-model="contacts.current_address_line1" placeholder="House Number">

複選框：

<input type="checkbox" value="disable" checked="checked" ng-model="sameascurrent">Same as Current

Permenent地址：

<input type="text" class="h-textform form-control" ng-if="sameascurrent" id="exampleInputEmail3" ng-value="contacts.current_address_line1" name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number"> 
    <input type="text" class="h-textform form-control" ng-if="!sameascurrent" id="exampleInputEmail3" name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">

任何幫助，將不勝感激。從輸入

http://plnkr.co/edit/rX3iT5lX2JEIArvxL8SK?p=preview

來源

2016-06-14 Ram Kannan Raj

對不起，沒有檢查'與當前'相同的默認值，所以我使用'ng-value'來實時輸入永久字段。 –

<input type="text" class="h-textform form-control" ng-if="sameascurrent" id="exampleInputEmail3" !!ng-value="contacts.current_address_line1"!! name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">

刪除NG-值。 Ng值用於設置像收音機對象的值，或者像這樣。

UPD：請記住。當您使用ng模型時，這意味着來自輸入的值將動態設置爲您的模型。所以你可以將它從模型綁定到你想要的任何地方

來源

2016-06-14 06:43:55 Vitalii

將覆蓋邏輯移到控制器。對於永久地址，請使用與電流類似的輸入（否ng-value僅限ng-model）加ng-disabled。

<input type="text" class="h-textform form-control" id="exampleInputEmail3" name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number"> 

<input type="text" class="h-textform form-control" id="exampleInputEmail3" name="permenent_address_line2" ng-model="contacts.permenent_address_line2" ng-disabled="sameascurrent" placeholder="Street Name">

添加ng-change到複選框輸入：

<input type="checkbox" ng-change="change()" value="disable" checked="checked" ng-model="sameascurrent">Same as Current

和功能時，在複選框控制器被改變調用。如果sameascurrent爲真，此函數將覆蓋永久地址的模型。

$scope.change = function() { 
    if ($scope.sameascurrent) { 
     $scope.contacts.permenent_address_line1 = $scope.contacts.current_address_line1; 
     $scope.contacts.permenent_address_line2 = $scope.contacts.current_address_line2; 
    } 
}

見http://plnkr.co/edit/aEuG62gaUh5U4Xl5ZUTv?p=preview

來源

2016-06-14 07:07:19

ng-value剛纔設置的申請一次，實時數據克隆，你可以寫在控制器內部自己$watch方法：

function sync(){ 
if($scope.sameascurrent){ 
    var contacts = $scope.contacts; 
    contacts.permenent_address_line1 = contacts.current_address_line1; 
    contacts.permenent_address_line2 = contacts.current_address_line2; 
} 
} 
$scope.$watch('contacts',sync,true); 
$scope.$watch('sameascurrent',sync);

http://plnkr.co/edit/EPoprBLeNxlwDlklWuiC?p=preview

更多有關$watch的詳細信息，可以參考angular docs for $scope

來源

2016-06-14 07:10:54

Angular js - 克隆數據實時從一個字段到另一個字段

回答

相關問題