2016-05-18 5 views
0

Ich bin etwas seltsam konfrontiert. Nun, zumindest für mein Verständnis.Problem mit der Schaltfläche ng-Klick

Lassen Sie mich Ihnen das Snippet, so können Sie sehen, was ich tue

var app = angular.module('riskQueries', []); 
 
    
 
app.controller('cuitCtrl',function ($scope, $window) { 
 
    
 
    $scope.defaultCuit = '--Inserte su CUIT aquí--'; 
 
    
 
    $scope.riskData = { 
 
     cuit: null 
 
    }; 
 
    
 
    $scope.reset = function() { 
 
     $scope.riskData.cuit = angular.copy($scope.defaultCuit); 
 
     $window.alert('Hey! You clicked!'); 
 
    }; 
 
    $scope.reset(); 
 
    $scope.comboData = { 
 
     planAnterior: null, 
 
     planSolicitado: null, 
 
     options: [ 
 
      {id: 0, name: "No tengo un plan"}, 
 
      {id: 1, name: "Plan Básico"}, 
 
      {id: 2, name: "Plan Joven"}, 
 
      {id: 3, name: "Plan Famliar"}, 
 
      {id: 4, name: "Plan Cobertura Completa"}, 
 
      {id: 5, name: "Plan Plus"} 
 
     ], 
 
    }; 
 
    
 
}); 
 

 
app.filter('selectedPlan',function(){ 
 
    return function(planSolicitado,planAnterior){ 
 
     planAnterior <= planSolicitado; 
 
    }; 
 
});
input[type=text], select { 
 
    width: 100%; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    display: inline-block; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
    box-sizing: border-box; 
 
    font-family: "Verdana", sans-serif; 
 
} 
 

 
.submit { 
 
    align-content: center; 
 
    width: 30%; 
 
    background-color: #71b9fb; 
 
    color: white; 
 
    padding: 14px 20px; 
 
    margin: 8px 0; 
 
    border: none; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
    font-family: "Verdana", sans-serif; 
 
} 
 

 
.submit:hover { 
 
    background-color: #c4e3ff; 
 
} 
 

 
.form { 
 
    width: 45%; 
 
    border-radius: 5px; 
 
    border-style: solid; 
 
    border-color: darkblue; 
 
    border-width: thick; 
 
    background-color: #FFFFFF; 
 
    padding: 40px; 
 
    font-family: "Verdana", sans-serif; 
 
} 
 

 
.header { 
 
    border-bottom-style: groove; 
 
    border-bottom-color: #9BE5F4; 
 
    border-bottom-width: thick; 
 
    width: 50.5%; 
 
} 
 

 
.header .logo{ 
 
    max-width: 25%; 
 
    height: auto; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="logic.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 

 
<body> 
 
    <div class="header"> 
 
     <img class="logo"> 
 
    </div><br> 
 
    <div class="form" ng-app="riskQueries" ng-controller="cuitCtrl"> 
 
     <form name="BPMForm"> 
 
      <label for="Cuit">CUIT/CUIL:</label> 
 
      <input name="Cuit" type="text" ng-model="riskData.cuit"><br><br> 
 
      <label for="PlanAnterior">Plan Actual:</label> 
 
      <select name="PlanAnterior" id="PlanAnterior" ng-model="comboData.planAnterior" ng-options="option.name for option in comboData.options"> 
 
       <option value="">---Seleccione su plan Actual---</option> 
 
      </select><br><br> 
 
      <label for="PlanSolicitado">Plan Solicitado:</label> 
 
      <select name="PlanSolicitado" id="PlanSolicitado" ng-model="comboData.planSolicitado" ng-options="option.name for option in comboData.options | filter: {id: '!' + comboData.planAnterior.id}"> 
 
       <option value="">---Seleccione su plan a Solicitar---</option> 
 
      </select><br><br> 
 
      <button class="submit" ng-click="reset()">Limpiar</button> 
 
     </form> 
 
     <p>resultados: WebService: {{riskResponse}} - cuit: {{riskData.cuit}} - planAnteior: {{comboData.planAnterior.id}} - planSolicitado: {{comboData.planSolicitado.id}}</p> 
 
    </div> 
 
</body>

Wenn Sie es ausführen, können Sie sehen, dass ein Warnfeld in der Funktion definiert I‘ Für meinen Button erstellt wird aktiviert, ohne dass ich darauf geklickt habe. Ich denke, das hat etwas damit zu tun, wo ich die ng-App und ng-controller deklariere, habe aber nichts Nützliches gefunden.

Was fehlt mir hier?

Antwort

0

Ich nehme an, Sie versuchen, die Reset() -Funktion aufzurufen, richtig? Es scheint so, als hätten Sie es direkt nach dem Deklarieren auf dem Controller aufgerufen.

$scope.reset = function() { 
     $scope.riskData.cuit = angular.copy($scope.defaultCuit); 
     $window.alert('Hey! You clicked!'); 
    }; 
    $scope.reset(); // <--- You're calling it here 
    $scope.comboData = { 

Entfernen Sie $ scope.reset(); Linie von Ihrem Controller und Sie sollten gut gehen :)

+0

Silly me ... du hattest recht! Vielen Dank! –

+0

passiert für jeden :) –

Verwandte Themen