按钮单击时出现问题

时间:2016-05-18 20:14:57

标签: html angularjs

我面对一些有点奇怪的事情。好吧,至少我的理解。

让我给你一个片段,这样你就可以看到我在做什么了

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>

如果你运行它,你可以看到我为我的按钮创建的功能中定义的警告框在没有点击它的情况下被激活。我认为这可能与我声明ng-app和ng-controller的地方有关,但未能找到有用的东西。

我在这里缺少什么?

1 个答案:

答案 0 :(得分:0)

我假设您正在尝试调用reset()函数,对吗?在控制器上声明它之后,你似乎已经调用了它。

pointer-events: none;

删除$ scope.reset();来自你的控制器的线你应该很高兴:)