2016-09-07 3 views
1

Ich benutze eckige js, kombiniert mit eckigen ui, um modale Fenster in meiner Website zu zeigen. Mein HTML-Code ist:eckig js: ng-min ng-max

<script type="text/ng-template" id="myModalContent.html"> 
    <div class="modal-header text-center"> 
     <h3 class="modal-title" id="modal-title">Jump to page</h3> 
    </div> 
    <div class="modal-body text-center" id="modal-body"> 
     <input type="number" ng-model="info.page" class="text-center" ng-enter="ok()" ng-min="{{info.min}}" ng-max="{{info.max}}" /> 
     <div>MAX: {{info.max}}</div> 
     <div>MIN: {{info.min}}</div> 
     <button class="btn btn-primary" type="button" ng-click="ok()" style="margin-top: 20px;">OK</button> 
    </div> 
</script> 

Die Nutzer haben eine Eingangsnummer in einem Bereich von info.max-info.min zu füllen.

Hier den entsprechenden Winkelcode - Auslösen die modale Fensteröffnung:

function gotoPageDialog(fileNo, current, max) 
{ 
    var modalInstance = $uibModal.open({ 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalInstanceCtrl', 
     size: 'sm', 
     resolve: { 
      current_info: function() 
      { 
       return { 
        fileNo: fileNo, 
        page: current, 
        max: max, 
        min: 1 
       } 
      } 
     } 
    }); 

    modalInstance.result.then(function (result) 
    { 
     //... 
    }; 
} 

Und das modale Fenster, um es selbst:

app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, current_info) 
{ 
    $scope.info = current_info; 

    $scope.ok = function() 
    { 
     $uibModalInstance.close($scope.info); 
    }; 

    $scope.cancel = function() 
    { 
     $uibModalInstance.dismiss('cancel'); 
    }; 
}); 

Das Ergebnis ist:

enter image description here

Der Eingabewert ist "-1", was bedeutet, dass der ng-min und ng-max Bereich funktioniert nicht.

Was mache ich falsch?

Vielen Dank.

+0

Ich dachte nicht, dass ng-min/ng-max die HTML5-Validierung anwendet? Überprüfen Sie Ihr '$ form' -Objekt und ich würde mir vorstellen, dass es' $ form. $ Valid' als false zurückgibt. –

Antwort

3

ändern ng-min und ng-max zu

min = "{{info.min}}"

max = "{{info.max}}"

2

ändern ng-min und ng-max sintax zu

ng-min="{{info.min}}"

ng-max="{{info.max}}"

+0

Sie haben Recht. Ich habe es geändert. Aber das war nicht das Problem zu lösen. Gleiches Verhalten. – No1Lives4Ever

+1

Haben Sie versucht, * manuell * die Werte von ng-max und ng-min einzugeben? zum Beispiel: ng-max = "2". Sehen Sie, ob dieser Weg funktioniert: In diesem Fall wissen wir, dass dies ein Problem Ihrer Variablen und nicht der Richtlinie ist. – Luxor001

+0

Manuelle Werte konnten das Problem nicht lösen. Gleiches Verhalten. Ich habe festgestellt, dass die Verwendung dieses 'min =" {{info.min}} "max =" {{info.max}} "das Problem löst. Vielen Dank! – No1Lives4Ever

Verwandte Themen