AngularJS Вызов ng-размытие только один раз

У меня есть два поля ввода и вам нужно объединить значение из первого поля ввода в другое, как только значение вводится во второе поле ввода.AngularJS Вызов ng-размытие только один раз

Проблема Я столкнулся с этим с ng-размытием, он выполняет функцию многократного размытия. Я добавил счетчик для ng-blur с условием только для первого размытия, и он работал.

Я чувствую себя как-то неэффективным. Есть ли другой способ сделать это?

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
<meta charset="utf-8" /> 
<title>AngularJS Plunker</title> 
<script>document.write('<base href="' + document.location + '" />');</script> 
<link rel="stylesheet" href="style.css" /> 
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.1/angular.js" data-semver="1.4.1"></script> 
<script src="app.js"></script> 
</head> 

<body ng-controller="MainCtrl"> 
<input placeholder="sample" ng-model="input1"> 
<input ng-blur="counting(input2)" placeholder="sample" ng-model="input2"> 
count : {{count}} 
</body> 
</html>

Контроллер

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
$scope.name = 'World'; 
$scope.count =0; 
$scope.counting = function(value){ 

if($scope.count===0) 
{ 
    if($scope.input1 && $scope.input2){ 
     var val1=$scope.input1; 
     var val2=$scope.input2; 
     $scope.input2=val1+val2; 
    } 
    } 
    $scope.count++; 

    } 
});

См Plunkr

источник

2016-03-09 ronypatil

Что вы хотели достичь здесь? –

такой же результат другим способом, если это возможно, избегая, если условия – ronypatil

Я хочу спросить, ng-blur ведет себя правильно .. почему вы хотели запустить его только один раз? –

Поскольку это, скорее всего, поведение, это желательно (пожалуйста, более конкретно), то лучше добавить содержимое первого входа, когда второй вход завершен, и удалите приложенное содержимое при повторном вводе второго ввода.

ВАЖНО. Общее правило - если вы используете ng-модель во входном элементе, убедитесь, что переменная, на которую вы ссылаетесь, имеет точку в ней. Это странное правило звучащий из-за сильного, но общий вопрос, затрагивающий автоматически сгенерированные дочерние рамки в угловом 1. Я изменил код, чтобы учесть, что, как хорошо:

...

<input placeholder="sample" ng-model="inputs.input1"> 
<input ng-blur="appendText()" 
     ng-focus="restoreOriginalText()" 
     placeholder="sample" 
     ng-model="inputs.input2">

.. .

app.controller('MainCtrl', function($scope) { 
    $scope.inputs = { 
    input1: '', 
    input2: '' 
    }; 
    $scope.name = 'World'; // not used 
    $scope.originalText = $scope.inputs.input2; 

    $scope.appendText = function() { 
    $scope.originalText = $scope.inputs.input2; 
    $scope.inputs.input2 = $scope.inputs.input1 + $scope.inputs.input2; 
    } 

    $scope.restoreOriginalText = function() { 
    $scope.inputs.input2 = $scope.originalText; 
    } 

});

источник

2016-03-09 20:23:33

хорошо ... логика выглядит неплохо, но я использовал в своем приложении, удалив все значение из ввода2 и переключив его фокус на следующую вкладку – ronypatil

, когда она это делает? когда вы вводите input2? –

Да, как только я ввожу input2 – ronypatil

Используйте следующее: Plnkr

<input ng-change="counting(input2)"placeholder="sample" ng-model="input2" ng-model-options="{ debounce: 500 }">

Это будет срабатывать после половины секунды не типизации, в результате чего теперь ng-change огонь :

$scope.counting = function(value){ 
$scope.input2= $scope.input1 + $scope.input2; 
}

EDIT Если обеспокоены комментарий Элвина вы можете взломать его с помощью:

$scope.counting = function(value){ 
$scope.input2= $scope.input2.replace($scope.input1,''); 
$scope.input2= $scope.input1 + $scope.input2; 
}

источник

2016-03-09 19:59:57 KreepN

выглядит хорошо. Могу ли я узнать, как это дебютирование работает в этом контексте? – ronypatil

Дебокс полезен, но у вас все еще есть аналогичная проблема. Если пользователь продолжает печатать после задержки, содержимое первого ввода добавляется снова. –

@AlvinThompson адрес. – KreepN

Угловой JS имеет очень простой способ обработки форм.

ли что-то подобное -

Посмотреть

<form name="myForm"> 
     <input name="input1" 
       placeholder="sample" 
       ng-model="input1"> 
     <input name="input2" 
       ng-blur="updateValue()" 
       placeholder="sample" 
       ng-model="input2"> 
</form>

Контроллер

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 

    $scope.updateValue = function(){ 
    alert($scope.myForm.input2.$dirty); 
    // If input2 is dirty that means user has 
    // interected with that field concatenate value 
    if($scope.myForm.input2.$dirty){ 
     $scope.input2 = $scope.input1 +""+ $scope.input2; 
     // Set input2 to pristine so now on blur 
     // it will not execute it again 
     $scope.myForm.input2.$setPristine(); 
    } 
    } 
});

Смотрите этот обновленный plunker надеюсь, что это поможет.

P.S. - После изменения input2 после того, как будет вызвана функция размытия, но она не будет конкатенации снова, но если пользователь теперь изменит input2 снова, тогда конкатенация снова повторится, что вы должны обрабатывать отдельно. Мое предложение состоит в том, чтобы отключить input2 после изменения его значения один раз.

источник

2016-03-10 10:01:06

Это лишь частично устраняет проблему; input1 все равно будет добавляться к вводу2 несколько раз, если вы измените вход2, выйдите на вход2, снова измените входной сигнал2 и снова выйдите из входа2. Вам нужно сохранить исходное значение input2 где-нибудь. –

Кроме того, этот код страдает от проблемы с детской областью, о которой я упоминал в своем ответе. Посмотрите там, как это исправить. –

@AlvinThompson благодарит за ваше предложение, моя точка зрения, ss, которую я сказал после изменения ввода2, когда он может быть отключен, поэтому пользователь не может его изменить. Он снова будет включен, если пользователь снова изменит входной сигнал1. –

AngularJS Вызов ng-размытие только один раз

ответ

Смежные вопросы