Jak wyświetlić inną wartość elementu wejściowego przy pomocy ng-model?

W regulatorze jeśli mamy zmienną, która śledzi indeks (zaczynając od 0) strony na stole stronicowania:Jak wyświetlić inną wartość elementu wejściowego przy pomocy ng-model?

var page { 
    pageNumber: 0; 
}

Pytanie: Jak mogę pokazać pageNumber zmienną w html, ale zawsze zwiększany o +1? (Jak index = 0 strona jest oczywiście 1 stronie, a zatem powinny być pokazane jako Page 1)

<input type="text" ng-model="page.pageNumber">

Również, gdy model jest aktualizowany, wartość na wejściu powinien automatycznie zmienić (znowu: również zwiększany o + 1).

Źródło

2016-02-10 membersound

myślę to use-case do $ formatujących i $ parser. Działają na własności modelu i nie ma potrzeby tworzenia atrapowej właściwości w modelu. Dokumentacja here. Proszę poprawić mnie, jeśli nie jest to przypadek użycia dla formaterów $ i analizatorów $.

Patrz poniżej.

znaczniki HTML

<body ng-app="app" ng-controller="mainCtrl"> 
    {{page}} 
    <input paginated-index type="text" ng-model="page"> 
</body>

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

app.controller('mainCtrl', function($scope) { 
    $scope.page = 0; 
}); 

app.directive('paginatedIndex', function() 
{ 
    return{ 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModelController) 
     { 
      ngModelController.$formatters.push(function(value) 
      { 
       return value+1; 
      }) 

      ngModelController.$parsers.push(function(value) 
      { 
       return value-1; 
      }) 
     } 
    } 
});

Źródło

2016-02-10 12:11:44

Nie wiedziałem o tym mechanizmie, ale wydaje się, że jest to właściwe podejście do tego typu problemów. Działa zgodnie z oczekiwaniami. – membersound

Eleganckie rozwiązanie, które nie wymaga dodatkowych rzeczy w vm – Vee6

W kontrolerze, zmienić swój obiekt strony to:

$scope.page = { 
    displayedPage: function(num) { 
    if(arguments.length) { 
     $scope.page.pageNumber = num - 1; 
     return num; 
    } else { 
     return $scope.page.pageNumber + 1; 
    } 
    }, 
    pageNumber: 0 
}

a następnie yourelement do tego:

<input type="text" ng-model="page.displayedPage" ng-model-options="{ getterSetter: true}" />

ta wyświetli liczbę stronę plus 1, ale pozostawić właściwą stronę. Zmienna pageNumber tak jak powinna być.

Dodane przeze mnie opcje getterSetter: true wiążą model z funkcją getter/setter, która pozwala przekazać argument - w tym przypadku twój wprowadzony numer strony - i powrócić z tej funkcji. Możesz przeczytać więcej informacji na ten temat w dokumentacji dla ngModel

Źródło

2016-02-10 09:54:37 millerbr

powinienem powiedzieć, że muszę odwrócić wiążące, więc wartość powinny być aktualizowane w '$ scope.page.pageNumber' kiedy wartość wewnątrz elementu 'input' ulega zmianie. Dlatego użyłem 'ng-model', ponieważ jest on automatycznie przekazywany ręcznie. – membersound

Po prostu, aby było jasne - "" w oryginalnym pytaniu powinien wyświetlać numer strony, ale może być również używany do jej zmiany? – millerbr

Tak, użytkownik może mieć możliwość zmiany tego numeru. Ale ponieważ nakładka powinna pokazywać, że indeks strony zawsze jest zwiększany o +1, kiedy użytkownik zmienia ten numer, wartość w modelu powinna również zostać zmniejszona -1, aby to odzwierciedlić. – membersound

możesz spróbować użyć czegoś takiego.

$scope.data=$scope.page.pageNumber+1; 
    $scope.fuc=function(){ 
     $scope.page.pageNumber=$scope.data-1; 

    };

i HTML będzie jak

<input type="text" ng-model="data" ng-change="fuc()" >

check to rzucać Plunker

Źródło

2016-02-10 10:33:40 Viplock

Jak wyświetlić inną wartość elementu wejściowego przy pomocy ng-model?

Odpowiedz

Powiązane problemy