Wie kann man den Wert eines Eingabeelements mit dem ng-Modell anzeigen?

In der Steuerung, wenn eine Variable, die den Index (beginnend mit 0) der Seite für eine Paginierung Tabelle verfolgt:Wie kann man den Wert eines Eingabeelements mit dem ng-Modell anzeigen?

var page { 
    pageNumber: 0; 
}

Frage: Wie kann ich zeigen diese pageNumber Variable im HTML, aber immer eins erhöht +1? (Als der Index = 0 Seite offensichtlich die erste Seite ist und somit als Page 1 angezeigt werden soll)

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

Auch wenn das Modell aktualisiert wird, wird der Wert in der Eingabe automatisch (wieder ändern: auch von + erhöht 1).

Quelle

2016-02-10 membersound

zupft ich denke, das eine für $ Formatierer Use-Case ist und $ Parser. Sie arbeiten mit der Eigenschaft des Modells, und es muss keine Dummy-Eigenschaft für das Modell erstellt werden. Dokumentation here. Bitte korrigieren Sie mich, wenn dies nicht der Anwendungsfall für $ formatters und $ parsers ist.

Bitte siehe unten.

HTML-Markup

<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; 
      }) 
     } 
    } 
});

Quelle

2016-02-10 12:11:44

Ich wusste nicht über diesen Mechanismus, aber es scheint der richtige Ansatz für diese Art von Problemen zu sein. Und funktioniert wie erwartet. – membersound

Eine elegante Lösung, die keine zusätzlichen Sachen in der VM beinhaltet – Vee6

In Ihrem Controller, ändern Sie Ihre Seite Objekt dazu:

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

Und yourelement dann diesen:

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

Dies wird die Seitenzahl plus 1, zeigt aber die aktuelle Seite verlassen. pageNumber variabel wie es sein soll.

Die von mir hinzugefügten Optionen getterSetter: true binden das Modell an eine Getter/Setter-Funktion, mit der Sie das Argument - in diesem Fall die eingegebene Seitenzahl - übergeben und von dieser Funktion zurückkehren können. Sie können weitere Informationen dazu in der Dokumentation für ngModel

Quelle

2016-02-10 09:54:37 millerbr

ich gesagt habe, dass ich sollte invers müssen verbindlich, so sollte der Wert in '$ scope.page.pageNumber' aktualisiert werden, wenn Der Wert innerhalb des Elements 'input' ändert sich. Daher habe ich 'ng-model' verwendet, da dies automatisch gehandhabt wird. – membersound

Also nur um klar zu sein - die '' in Ihrer ursprünglichen Frage sollte die Seitennummer anzeigen, sondern auch verwendet werden, um es zu ändern? – millerbr

Ja, der Benutzer kann diese Nummer möglicherweise ändern. Aber da das Frontend zeigen sollte, dass der Seitenindex immer um +1 inkrementiert wird, sollte der Wert im Modell, wenn er diese Zahl ändert, ebenfalls -1 dekrementiert werden, um dies widerzuspiegeln. – membersound

lesen Sie können versuchen, etwas wie dies zu verwenden.

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

    };

und Ihre Html wird wie

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

Kontrolle dieses Plunker

Quelle

2016-02-10 10:33:40 Viplock

Wie kann man den Wert eines Eingabeelements mit dem ng-Modell anzeigen?

Antwort

Verwandte Themen