четверг, 30 апреля 2015 г.

Как решить проблему с input и ng-model в AngularJS

Недавно столкнулся с такой проблемой, заказчику нужно чтобы при редактировании поля инпут, можно было удалить полностью значение и вставить новое, а как мы знаем ng-model у нас меняется синхронно с тем что у нас в инпуте, и получается так что удаляя символы тут же меняется модель, а необходимо чтобы она менялась только при потере фокуса. Но также необходимо чтобы если что-то другое меняет эту же модель изменения сразу же применялись в в нашем инпуте. вот такая вот незадача.

Решение:

Создаем  для инпута отдельную модель, также создаем функцию которая будет менять основную модель при событии потери фокуса. То есть когда мы стираем значение ничего не происходит, но как только потеряли фокус  тут же основная модель перезаписывается. Для поведения в обратную сторону ставит наблюдателя на основную модель и как только она меняется, перепишем модель инпута. Вот и все.

$scope. money = {

    inputValue : 100,

    value : 100,

    inputChanged:  function(){

     this.value = this.inputValue;

    }

}



$scope.$watch('money.value', function(newValue){

    $scope.money.inputValue = newValue;

})



<input type="text" ng-blur="money.inputChanged()" ng-model="money.inputValue">

              <button ng-click="plus(money)">+</button>

              {{money.value}}

              <button ng-click="minus(money);">-</button>



Комментариев нет:

Отправить комментарий