Question

我是angularjs的新手，也是ng-admin的新手。我正在为我的项目使用ng-admin。在那里，我制作自定义页面，我必须使用UI引导日期选择器。但是弹出窗口不会出现。以下是我的代码。

这是我的自定义页面代码。

<div class="input-group datepicker">
  <input type="text" ng-model="rawValue" id="" name="{{ name }}" class="form-     control"
  uib-datepicker-popup="{{ format }}" is-open="isOpen" ng-required="{{v}}"/>
<span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="toggleDatePicker($event)">
      <i class="glyphicon glyphicon-calendar"></i>
    </button>
</span>
</div>

这是我的javascript代码。

 $scope.rawValue = new Date();

 $scope.format = "yyyy-MM-dd";

 $scope.v = true;
 $scope.isOpen = false;

  $scope.toggleDatePicker = function ($event) {
  $event.preventDefault();
  $event.stopPropagation();

  };

请帮助我。

实际上当我在＆＃34; index.html＆＃34;中包含ui-bootsrap.min.js文件时自定义页面datepicker工作正常。但是ng-admin普通页面datepickers和过滤器弹出窗口无效。

Answer 1

由于您在输入代码中使用了is-open="isOpen"并在控制器中设置了$scope.isOpen = false;，但是当点击按钮时调用toggleDatePicker功能时，没有设置$scope.isOpen = true; < / p>

因此需要设置$scope.isOpen = !$scope.isOpen;以进行切换

$scope.toggleDatePicker = function ($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.isOpen = !$scope.isOpen;
};

注意：确保您在模块中正确注入了'ui.bootstrap'

angular.module('yourModuleName', ['ui.bootstrap'])

<强>更新

由于ui-bootsrap.min.js并未包含ng-admin，因此您应该在 index.html 文件中加入ui-bootsrap。所以你的模块就像：

angular.module('yourModuleName', ['ng-admin', 'ui.bootstrap']);

UI Bootstrap日期选择器在ng-admin自定义页面中不起作用

1 个答案: