nur die ‚view‘ Wert aktualisieren Winkel Direktive

So einen Dezimalwert in der Steuerung wie diese habe ich:nur die ‚view‘ Wert aktualisieren Winkel Direktive

// Controller 
var MyController = function($scope) { 
    ... 
    $scope.percentValue = 0.05; // can be stored 
    ... 
}; 

<!-- View --> 
<span>{{percentValue}}</span> 
<input ng-model="percentValue" />

Mit dem obigen Code, der Wert im input Element ist 0.05 - aber ich will erlauben Sie einem Benutzer, einen ganzzahligen Wert wie 5 einzugeben.

Wenn also die $ scope.percentValue ist 0.05, möchte ich es als 5 in dem Eingangselement zeigen. Und wenn ein Benutzer 5 eingibt, sollte der $ scope.percentValue0.05 sein.

jedoch hier das heikle Sache ist ich nur die Ansicht Wert aktualisieren wollen - was bedeutet, dass das span Element noch 0.05 zeigen. Nur der Wert im Eingabeelement sollte 5 sein.

Ich versuche, dies mit ngModel zu erreichen, aber ich kämpfe immer noch. Diese

ist, was ich habe jetzt:

var MyDirective = function() { 
    function link(scope, element, attrs, ngModel) { 
     ngModel.$render = function() { 
      element.val(ngModel.$viewValue || ''); 
     }; 

     ngModel.$formatters.push(function (value) { 
      return value * 100; 
     }); 

     element.on('change blur', function() { 
      ngModel.$setViewValue(element.val()); 
     }); 
    } 

    return { 
     restrict: 'A', 
     require: '?ngModel', 
     scope: {}, 
     link: link 
    }; 
};

Bitte geben !!

Quelle

2017-06-14 Kimchi Man

versuchen Sie stattdessen einen Filter. – Claies

@KimchiMan, Sie verwenden bereits '$ formatters', um die Modelldarstellung für die Anzeige zu transformieren. Definieren Sie einfach einfach' $ parsers', um es auf die andere Art zu tun, so wie http: //plnr.co/edit/ lB6GaT1ZSrVsOi9PS1u9? p = Vorschau – miqid

@miqid, Ihre Antwort ist genau das, was ich will - könnten Sie den Code im Antwortabschnitt hinzufügen? Ich werde es als Antwort –

Einschließlich mein Kommentar als Antwort, weil es zu helfen schien. :-)

Fassen wir zusammen: Da Sie bereits eine $formatters Funktion für Ihre Richtlinie vorgesehen, die einen Modellwert ($modelValue) darzustellenden Form umwandelt ($viewValue), dann ist es einfach eine Frage eine $parsers Funktion der Bereitstellung der tun umkehren und alle Benutzereingaben zurück in den Modellwert konvertieren.

Example Plunker

Quelle

2017-06-15 14:59:12 miqid

Was Sie erreichen wollen, ist wahrscheinlich möglich, aber ich würde es wirklich verwirrend finden, den Code zu lesen. Die einfachste Lösung, die Ihr Problem lösen und die Lesbarkeit erhalten könnte, besteht darin, einen ganzzahligen Wert (5) in $scope.percentValue zu speichern, so dass ng-model immer eine Ganzzahl behandelt, wenn Sie den Wert in <input> eingeben und anzeigen. Dann erstellen Sie ein custom filter und verwenden Sie es, um den Wert als 0.05 in <span> auszugeben.

Bearbeiten: Hinzufügen eines konkreten Codebeispiels. Spielen Sie mit ihr hier: https://plnkr.co/edit/C1cX2L9B2GM2yax1rw7Z?p=preview

JS:

var MyController = function ($scope) { 
    $scope.percentValue = 5; 
}; 

function formatPercent (input) { 
    return input/100; 
} 

var myApp = angular.module('MyApp', []); 
myApp.filter('percent', function() { return formatPercent }); 
myApp.controller('MyController', ['$scope', MyController]);

HTML:

<body ng-controller="MyController"> 
    <span>{{ percentValue | percent }}</span> 
    <input ng-model="percentValue"> 
</body>

Quelle

2017-06-15 00:18:12 bkbooth

ich einen Filter für Prozentsatz schaffen würde:

angular.module('myModule') 
.filter('percentage', ['$filter', function($filter) { 
    return function(input, decimals) { 
     return $filter('number')(input*100, decimals)+'%'; 
    }; 
}]);

Die Eingabe wird integer speichern (wie 5)

<input ng-model="percentValue" />

Aber ich werde einen Filter auf dem Überspannungsteil hinzufügen:

<span>{{percentValue | percentage:2}}</span>

Credit https://stackoverflow.com/a/21727765/3687474 für die Filterrichtlinie.

Quelle

2017-06-15 01:25:30 aorfevre

Andere als ein Filter zu schaffen Sie auch auf der Vorlage berechnen

<span>{{percentValue * 100}}</span>

Quelle

2017-06-15 04:59:21 Icycool

nur die ‚view‘ Wert aktualisieren Winkel Direktive

Antwort

Verwandte Themen