2016-04-18 4 views
5

pierwszego pola wejściowegoodzwierciedlają pierwszej wartości sygnału wejściowego na drugim polu wejściowym warunkowo (na podstawie wyboru)

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

pole

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

Drugie wejście

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

jeżeli pole jest prawdziwe wtedy pierwszy wartość wejściowa powinna odzwierciedlać drugie pole wejściowe.

Odpowiedz

1

Jeśli chcesz to zrobić wyłącznie z punktu widzenia wtedy można użyć 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"/> 

Należy pamiętać, że będzie to ustawić tylko v alue z drugiego wejścia raz (gdy pole wyboru jest zaznaczone), jeśli użytkownik wróci do pierwszego wejścia i zmieni je ponownie, drugie wejście nie zostanie zaktualizowane, jeśli chcesz drugie wejście do aktualizacji również w tym przypadku, to będzie musiał dodać ng-change do pierwszego wejścia zbyt:

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

spróbuję tego, ale na wypadek, gdy chcę uruchomić inną metodę na tym samym elemencie, to jaka będzie kolejność wykonywania funkcji. –

+0

@ Sumitchoudhary nie rozumiem, co masz na myśli. Masz na myśli, jeśli chcesz uruchomić inną metodę wewnątrz 'ng-change'? jeśli tak, to możesz uruchomić wiele metod/funkcji, o ile oddzielisz je od ';'. Tak jak tutaj: ng-change = "stateChanged (samo), to samo? Prmnt_a2 = prmnt_a1: false" ' –

1

Spróbuj tego: Zarejestruj obsługi zmiana zdarzeń dla wyboru i ustawić wejście/Uset wartości

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

Zgadzam się z twoim podejściem, ale nie chcę pisać za dużo kodu. Sądzę, że w Angularu jest taki sposób na zrobienie tego. –

3

Spróbuj kod kątową

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

próbowałem tego, ale znowu muszę ustawić wszystkie pola. ale chcę najkrótszy sposób jak ng-attr-value = {{prmnt_a1}} –

1

nie jestem pewien, ale tutaj jest wszystko SOE można spróbować:

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

tutaj jest trudne, ale pełne sposób HTML, który powinien praca:

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

Uwaga: Ng-init nie jest zwykle używany do tego celu i pamiętaj, aby użyć polecenia ng-if and not ng-show/hide.

W przeciwnym razie, jeśli to nie zadziała: dyrektywa własna lub funkcja/$ watch w kontrolerze. ng-attr po prostu tu nie zadziała.

EDIT: dotyczący dyrektywy niestandardowego jest to, co będzie wyglądać kod:

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

Dyrektywa ta jest dość proste. Jeśli potrzebujesz bardziej skomplikowanych rzeczy, sprawdź dokumentację w sieci.

+0

ale w tym podejściu muszę jeszcze napisać dodatkowy kod dla każdego elementu –

+0

Właśnie dodałem próbkę tego co będzie wyglądać jak z niestandardową dyrektywą, sprawdź to. – Walfrat

Powiązane problemy