如果范围为空,则不触发按钮功能

时间:2017-07-07 17:03:08

标签: javascript angularjs

我有一个 HTML 按钮

<button type="submit" class="btn blue" ng-click="insertar();">Accept</button>

然后在Angular控制器中我称之为:

$scope.filtro = function(selected) {

    $scope.selectedID = selected.ID;


    $scope.insertar = function() {
        $scope.selectedID = selected.ID;
        if ($scope.catalogoid != null) {
          var url = "../../api/Catalogo/UpdateCatalogoRegistro/" + $scope.Codigo + "/" + $scope.Nombre + "/" + $scope.catalogoid + "/" + $scope.Catalogo;
          if ($scope.selected.ID != null) {
            url = url + "/" + $scope.selected.ID;
          }
          apiService.post(url, null,
            function(response) {
              bootbox.alert("Operación Exitosa!");
              $state.go("root.catalogosgenericos");
            },
            function(response) {
              if (response.status == "500") {
                window.location = "/";
              } else {
                bootbox.alert(response.status + " " + response.statusText + "<br/>" + response.data.errores);
              }
            });
        }

当我将所有参数发送到apiService.post()时效果很好,但如果$scope.selected.ID为空,insertar();不会触发功能,那么它无效,有些人可以帮我吗?此致

完整HTML

<div class="page-head">
  <div class="page-title">
    <h1>
            Cat&aacute;logos Gen&eacute;ricos
            <small>Nuevo Registro de: {{tipoCatalogo}}</small>
        </h1>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <!-- BEGIN Portlet PORTLET-->
    <div class="portlet box blue">
      <div class="portlet-title">
        <div class="caption">
          Cat&aacute;logos
        </div>
        <div class="tools">
          <a href="javascript:;" class="collapse" data-original-title="" title=""> </a>
          <!-- <a href="javascript:;" class="reload" data-original-title="" title=""> </a>-->
          <a href="javascript:;" class="fullscreen" data-original-title="" title=""> </a>
        </div>
      </div>
      <div class="portlet-body">
        <!-- PITE - INICIA TABS -->
        <div class="row">
          <div class="col-md-12">
            <!-- BEGIN Portlet PORTLET-->
            <div class="portlet box red">
              <div class="portlet-title">
                <div class="caption" id="tab_titulo">
                  Nuevo registro de: {{tipoCatalogo}}
                </div>
                <div class="tools">
                  <a href="javascript:;" class="collapse"> </a>
                  <a href="javascript:;" class="reload" ng-click="fill(conductor.ID); actualizardoctos();"> </a>
                  <a href="javascript:;" class="fullscreen"> </a>
                </div>
              </div>
              <div class="portlet-body">
                <div class="tab-content">
                  <div class="tab-pane fade active in" id="tab_2_1">

                    <div class="form-group">
                      <form id="detalle" name="detalle">
                        <div class="row">
                          <div class="col-xs-12 col-sm-6 col-md-4">
                            <div class="form-group">
                              <label> Código: </label>
                              <input type="text" class="form-control" id="Codigo" name="Codigo" ng-model="Codigo" maxlength="3" required/>
                              <span ng-show="detalle.Codigo.$error.maxlength || detalle.Codigo.length" class="required">El Código debe contener 3 caracteres</span>
                            </div>
                          </div>
                          <div class="col-xs-12 col-sm-6 col-md-4">
                            <div class="form-group">
                              <label> Nombre: </label>
                              <input type="text" class="form-control" id="Nombre" name="Nombre" ng-model="Nombre" maxlength="255" required />
                            </div>
                          </div>
                          <div class="col-xs-12 col-sm-4 col-md-4">
                            <div class="form-group" ng-init="cargarCatalogo()">
                              <label ng-hide="Catalogos.length==0">Catalogo Padre: </label>

                              <select class="form-control" ng-hide="Catalogos.length==0" ng-change="filtro(selected)" ng-model="selected" ng-options="item.Nombre for item in Catalogos "></select>
                              <br />
                            </div>
                          </div>
                        </div>

                        <hr width="100%" style="color: #2F353B;">
                        <div class="form-actions">
                          <div class="row">
                            <div class="text-right col-md-12">
                              <button type="submit" class="btn blue" ng-click="insertar();">Aceptar</button>
                              <button type="button" class="btn default" ng-click="regresar();">Cancelar</button>
                            </div>
                          </div>
                        </div>
                      </form>
                    </div>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div ui-view> </div>

完全控制器

(function(app) {
  'use strict';

  app.controller('detalleRegistrosCtrl', detalleRegistrosCtrl)
    .directive('onLastRepeat',
      function() {
        return function(scope, element, attrs) {
          if (scope.$last)
            setTimeout(function() {
                scope.$emit('onRepeatLast', element, attrs);
              },
              1);
        };
      });

  detalleRegistrosCtrl.$inject = ['$scope', 'apiService', 'notificationService', '$rootScope', '$location', '$stateParams', '$http', '$state'];

  function detalleRegistrosCtrl($scope, apiService, notificationService, $rootScope, $location, $stateParams, $http, $state) {
    //$rootScope.transportista_id = 1;
    Dropzone.autoDiscover = false;
    $scope.usuario = {};
    $scope.Selected = {};
    $scope.Catalogos = [];
    $scope.usuario.Origen = 'Web';
    $scope.catalogoid = $stateParams.catalogoid;
    $scope.Codigo = $stateParams.codigo;
    $scope.Nombre = $stateParams.nombre;
    $scope.Catalogo = $stateParams.catalogoselected;
    $scope.Version = $rootScope.VersionWeb;
    $scope.permitidos = "";
    $scope.tipoCatalogo = $stateParams.catalogoname;
    $scope.catalogoPadre = $stateParams.catalogopadre;

    if ($scope.catalogoPadre != null) {
      cargarCatalogo();
    }



    $scope.regresar = function() {
      $state.go("root.catalogosgenericos");
    }


    function errorCatalogo(res) {
      bootbox.alert("Error al cargar el catalogo" + res.data);
    }



    function cargarCatalogo() {
      apiService.get("../../api/Catalogo/GetCatalogoPadre/" + $scope.Catalogo + "/", null,
        function(res) {
          //console.log(res.data);.
          $scope.Catalogos = res.data;

          $scope.selected = $scope.Catalogos[0];
          //selecciona uno por default para ejecutar con valor inicial
          $scope.filtro($scope.selected);
        }, errorCatalogo);


      $scope.filtro = function(selected) {
        //apiService.get("../../api/Catalogo/GetCatalogoRegistro/" + selected.ID);
        $scope.selected = selected ? selected.ID : null;

        //$scope.insertar = insertar;

        $scope.insertar = function() {
          $scope.selectedID = selected.ID;
          if ($scope.catalogoid != null) {
            var url = "../../api/Catalogo/UpdateCatalogoRegistro/" + $scope.Codigo + "/" + $scope.Nombre + "/" + $scope.catalogoid + "/" + $scope.Catalogo;
            if ($scope.selected.ID != null) {
              url = url + "/" + $scope.selected.ID;
            }
            apiService.post(url, null,
              function(response) {
                bootbox.alert("Operación Exitosa!");
                $state.go("root.catalogosgenericos");
              },
              function(response) {
                if (response.status == "500") {
                  window.location = "/";
                } else {
                  bootbox.alert(response.status + " " + response.statusText + "<br/>" + response.data.errores);
                }
              });
          } else {

            apiService.post("../../api/Catalogo/AddCatalogoRegistro/" + $scope.Codigo + "/" + $scope.Nombre + "/" + $scope.Catalogo, null,
              //$scope.selected.ID
              function(response) {

                bootbox.alert("Operación Exitosa!");
                $state.go("root.catalogosgenericos");

              },
              function(response) {
                if (response.status == "500") {
                  window.location = "/";
                } else {
                  bootbox.alert(response.status + " " + response.statusText + "<br/>" + response.data.errores);
                }
              });
          }
        }
      }

    }
  }

})(angular.module('PORTAL'));

更新

作为Ero评论,我将$ scope.insertar放在$ scope.filtro之外:

 $scope.filtro = function (selected) {

                $scope.selectedID = selected.ID;
            }


                $scope.insertar = function() {
                    $scope.selectedID = selected.ID;
                    if ($scope.catalogoid != null) {
                        var url = "../../api/Catalogo/UpdateCatalogoRegistro/" + $scope.Codigo + "/" + $scope.Nombre + "/" + $scope.catalogoid + "/" + $scope.Catalogo;
                        if ($scope.selected.ID != null) {
                            url = url + "/" + $scope.selected.ID;
                        }
                        apiService.post(url, null,
                          function(response) {
                              bootbox.alert("Operación Exitosa!");
                              $state.go("root.catalogosgenericos");
                          },
                          function(response) {
                              if (response.status == "500") {
                                  window.location = "/";
                              } else {
                                  bootbox.alert(response.status + " " + response.statusText + "<br/>" + response.data.errores);
                              }
                          });
                      }

但是我有相同的结果,按钮只是不触发功能,现在如果网址已满,控制台会抛出“选择未定义”

0 个答案:

没有答案