标签: angular-ui-bootstrap

我想用一个简单的弹出日期选择器与angularui喜欢这样.当我将标记和javascript代码复制到我的应用程序时,我得到了这个:

TypeError: Cannot use 'in' operator to search for 'show-weeks' in undefined
    at link (http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js:1247:43)
    at nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:6220:13)
    at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:5630:15)
    at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:5633:13)
    at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:5633:13)
    at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:5633:13)
    at nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:6214:24)
    at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:5630:15)
    at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:5633:13)
    at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js:5633:13) <input type="text" class="form-control ng-pristine ng-valid" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close"> angular.js:9413
(anonymous function) angular.js:9413
(anonymous function) angular.js:6832
nodeLinkFn angular.js:6223
compositeLinkFn angular.js:5630
compositeLinkFn angular.js:5633
compositeLinkFn angular.js:5633
compositeLinkFn angular.js:5633
nodeLinkFn angular.js:6214
compositeLinkFn angular.js:5630 …

我正在从Angular Bootstrap 文档中复制示例

HTML(Jade)是:

rating(ng-model="rate" max="max" on-hover="hoveringOver(value)" on-leave="overStar = null") {{rate}}
   span.label(ng-class="{'label-warning': percent<30, 'label-info':percent>=30 && percent<70, 'label-success': percent>=70}", ng-show="overStar && !isReadonly") 
    {{percent}}%
   pre(style="margin:15px 0;")
    | Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}

和javascript:

app.controller('RatingDemoCtrl' , function ($scope) {
  $scope.rate = 7;
  $scope.max = 10;
  $scope.isReadonly = false;

  $scope.hoveringOver = function(value) {
    $scope.overStar = value;
    $scope.percent = 100 * (value / $scope.max);
  };

  $scope.ratingStates = [
    {stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
    {stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
    {stateOn: …

我的应用程序使用带有简单输入元素的模态对话框

<input id="fieldEmail" class="form-control" type="text" ng-model="email" required="" />
email: {{ email }}

在显示模态时,我可以在输入字段中输入内容,并按预期在其旁边的文本中看到它.但是,如果我将输入类型更改为type ="email",则会破坏数据绑定.输入不再回应.

还有其他人遇到过这个问题吗？

我试图决定是否可以在我的项目中使用angular.js(和anguar-ui-bootstrap).

Web应用程序应该可以与任何合理的现代浏览器一起使用,我很惊讶在angular-ui-bootstrap站点上的权限,在点击"创建构建"按钮后服务器响应:

您当前的浏览器不支持创建自定义构建.请花一点时间升级到更现代的浏览器(Safari除外).

链接到http://browsehappy.com,其中列出了我的Safari(v.8),但angular-ui-bootstrap明确排除了它.

在angular.js的FAQ中是:

AngularJS是100%JavaScript,100%客户端,兼容桌面和移动浏览器.

引导程序3本身也是兼容的.

由于我是angular.js的完全新手,只是下载并尝试学习它,但老实说,我不想浪费几天/几周学习发现:它不完全支持Safari.所有合理的现代浏览器的支持对项目至关重要.

因此问题是:

• 支持角UI的自举任何合理的现代浏览器完全,例如用于任何功能？
• 如果不完全,哪些功能/模块/部件"有问题"？
• 例如,"构建问题"是angular.js的"特征"？

我正在使用Angularjs ui网格分组功能.请参阅图像,当显示组总和时,默认情况下显示为"总计:"但我想将其更改为"总计"(大写"T"),并且我还想将聚合总计限制为2个十进制数.我需要更改设置的位置？

以下是我对Ui Grid的colDef:

angular.forEach(columns, function(value, key) {
        columnDefs.push({
            name: key,
            displayName: value,
            enableCellEdit: false,
            aggregationType: uiGridConstants.aggregationTypes.sum,
            width: '8%'
        })
    });

numPerPage由于Angular UI Bootstrap的分页,筛选结果仅在结果中显示.是否有任何选项可以显示过滤结果的$scope.expenses过滤结果？

演示:http://codepen.io/athimannil/pen/zGbBqR

angular.module('mytodos', ['ui.bootstrap']).controller('TodoController', function($scope) {
  /* paggination */
  if (localStorage.getItem("itemPerPage") === null) {
    localStorage.setItem("itemPerPage", 10);
  }
  function getPerPage(){			
    return parseInt(localStorage.itemPerPage);
  }
  $scope.changeNum = function (itemNum) {
    localStorage.itemPerPage = itemNum;
    $scope.numPerPage = getPerPage();
  };

  console.log(localStorage.itemPerPage);
  $scope.numsForPage = [5, 10, 25, 50, 100];
  $scope.currentPage = 1;
  $scope.numPerPage = getPerPage();
  $scope.maxSize = 5;
  
  $scope.filteredTodos = [];
  $scope.currentPage = 1;
  $scope.numPerPage = 10;
  $scope.maxSize = 5;
  $scope.expenses = [
    {
      "id": …

我讨厌提出这个问题,因为好像所有的分页问题都得到了回答.但是,我不遵循使分页页面缩短的内容.我相信我的例子与其他例子非常相似.

我获得了正确数量的标签,当前页面也正确更改.但是,长度与分配的每页页数限制不匹配.

这是我的控制器

viewsModule.controller('CountryCtrl', ['$scope', 'cacCountries', function($scope, cacCountries) {

$scope.loading = true;
$scope.countries = [];
$scope.currentPage = 1;
$scope.itemsPerPage = 20;
$scope.maxSize = 20;

cacCountries().then(function(countries) {
    // console.log(countries);
    $scope.loading = false;
    $scope.countries = countries;
    $scope.totalItems = countries.length;

});

}]);

我已将itemsPerPage设置为20

在我的HTML中,我确保引用itemsPerPage

<pagination  
        total-items="totalItems" 
        items-per-page= "itemsPerPage"
        ng-model="currentPage" 
        class="pagination-sm">
</pagination>

我正在为数组中的250个对象返回13个选项卡.但是,所有250个对象都出现了.我期待每页20个.

ng-repeat很简单

<tr ng-repeat="country in countries |filter:search "> 

我能错过哪些会绑定当前页面？

我正在使用Angular Bootstrap(UI Bootstrap),但我遇到了手风琴标题的问题.似乎切换功能会覆盖手风琴标题中的锚元素,以便链接不可点击.例如:

<uib-accordion close-others="false">
    <uib-accordion-group is-open="status.open" ng-repeat="p in model.processing>
        <uib-accordion-heading>
            <a href="http://www.google.com">go to google</a>
        </uib-accordion-heading>
        TEXT
    </uib-accordion-group>
</uib-accordion>

点击"转到谷歌"链接可以切换手风琴而不会转到链接.我可以通过ng-click解决这个问题,但问题是我希望中间点击仍可用于创建新选项卡.

我最近在我们的应用程序中将所有模态指令切换到Angular-ui-Bootstrap模态.好多了,但是遇到了一种新的模态,它在mouseleave上关闭而不是取消点击.

this.leaveTag = (tag) => {
    TagHover.off();
};

this.hoverTag = (tag) => {
    TagHover.display();
};

上面是调用TagHover Factory内部函数的视图逻辑.

下面是Factory,TagHover.display与我们的其他模态一样正常,但我正在尝试用的leaveTag > TagHover.off是调用modal.close.到目前为止没有工作.

我的问题是你如何调用TagHoverController中的close功能,或者close我的tagsPanel组件中的$ uibModal - > TagsHover Factory？(不使用$ scope或$ rootScope事件)

我不是试图close/cancel从TagHover Ctrl范围内调用,而是尝试close从Parent范围调用.

const TagHover = angular.module('tickertags-shared')
    .controller('TagHoverController', TagHoverController)
    .factory('TagHover', factory);

TagHoverController.$inject = [
    'TagHover'];

function TagHoverController(
    TagHover) {

    this.$onInit = () => {
        console.log('TagHover onInit')
    };

    this.cancel = () => this.$close();
}

factory.$inject = ['$uibModal'];

function factory($uibModal) {

    const display = () => { …

由于这个线程，我需要使用的高版本ui-bootstrap-tpls.js。但是，我意识到此功能已禁用bootstrap pagination，它适用于的较低版本ui-bootstrap-tpls.js。

例如，此分页功能可用于https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js，而https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js 无效。

有人知道我能做什么吗？