标签: angular-ui

我有一个使用ng-table开发的网格,我需要从服务器端删除后从网格表中删除所选项目.已经尝试再次调用网格加载ajax,但它不起作用.

我的控制器,

app.controller('blockController', function($scope, $filter, $q, ngTableParams, $sce, Block) {

    // Fetch data from server using RESTful API
    $scope.load = function() {
        // load serverside data using http resource service
        Block.get({}, function (response) { // success
                $scope.results = response.data;
                    var data = response.data; // store result to variable

                    // Start ng-table with pagination
                $scope.tableParams = new ngTableParams({
                                page: 1,            // show first page
                                count: 10           // count per page
                }, {
                                total: data.length, // length of data …

我试图在角度UI calendarEvent的鼠标悬停上显示工具提示.我设法执行此操作,如以下线程中所述, 在年视图中为fullcalendar提供工具提示

    $scope.eventMouseover = function (calEvent, jsEvent) {
        var tooltip = '<div class="tooltipevent">' + calEvent.description + '</div>';
        $("body").append(tooltip);
        $(this).mouseover(function (e) {
            $(this).css('z-index', 10000);
            $('.tooltipevent').fadeIn('500');
            $('.tooltipevent').fadeTo('10', 1.9);
        }).mousemove(function (e) {
            $('.tooltipevent').css('top', e.pageY + 10);
            $('.tooltipevent').css('left', e.pageX + 20);
        });
    }

    $scope.eventMouseout = function (calEvent, jsEvent) {
        $(this).css('z-index', 8);
        $('.tooltipevent').remove();
    },

显然,这不是最好的方法.使用最新的UI-Bootstrap,我们有一个更好看的工具提示.有没有人成功地将这些工具提示与Angular-UI日历​​集成在一起？

更新1:如http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/中所述,我尝试重写eventRender并简单地将工具提示属性添加到calendarEvent div.还是行不通.我可以看到,即使mouseover和mouseout事件也没有添加到包含'tooltip'属性的那些calendarEvent div中.

我想用一个简单的弹出日期选择器与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 …

嗨,我正在使用ui掩码格式化输入框中的电话号码.问题是ngmodel与我在屏幕上看到的不匹配.例如:

 <input type="text"  ui-mask="999-999-9999"  placeholder="xxx-xxx-xxxx"class="form-control" data-ng-model="search.phone"   maxlength="12" >

我在屏幕上看到的内容:778-673-7892 ng-model value:7786737892

我该如何解决？

谢谢

我有一个用angularjs bootstrap-ui创建的客户记录表,并使用ng-repeat.

表格中每行的末尾是一个按钮,用于获取有关客户的更多信息.

单击该按钮时,会弹出一个模态窗体并显示该信息.

我的问题是我按下哪个按钮我得到相同的客户编号

问题是我需要将$ index的值转换为以下代码:

$scope.selected = {
    customer: $scope.customers[0]
};

$ index的值需要替换上面的0值

到目前为止我所做的事情可以在plunker上点击这里看到

<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
  < div class = "modal-header" > < h3 > I am a modal! < /h3>
    </div > < div class = "modal-body" > < form class = "form-horizontal"
  role = "form" > < div class = "form-group" > < label
  for = "customerNumber"
  class = "col-lg-2 control-label" > Email Address: < /label>
            <div class="col-lg-10">
                <input type="text" class="form-control" …

我试图在我的应用程序中使用angular-bootstrap datepicker模块并遇到小问题.我使用输入文本和按钮显示日期,如下所示:

<div class="row" id="datePicker">
    <p class="input-group">
        <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="currentDate" 
        is-open="opened" datepicker-options="dateOptions" date-disabled="disableDt(date, mode)" 
        ng-required="true" close-text="Close" show-button-bar="false" ng-init="" readonly/>
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event)">
                <i class="glyphicon glyphicon-calendar"></i>
            </button> 
        </span>
    </p>
</div>

由于使用有角度的谷歌地图,我必须手动引导我的应用程序.似乎由于手动引导,datepicker无法正确格式化日期并显示整个未格式化的日期.当我从datepicker中选择任何日期时,日期将在输入字段中正确显示.更重要的是,模型更改不会强制格式更改(例如,最初我从json文件获得了一些日期,它们显示在字段中,但没有格式化).示例如下:

• 开课日期:2014年1月17日星期五01:00:00 GMT + 0100(CET)
• 预计日期(选择同一天后显示的日期):2014年1月17日

有没有办法刷新这个小部件,以便它在开始时知道正确的格式或在适当的时刻更改它以正确初始化？

编辑:当我将datepicker移动到片段时,它应该没有初始化模型的问题(此片段稍后加载).仍然出现问题 - 日期没有格式化,似乎根本没有与格式化程序或模型相关联(例如,在日期选择器中选择日期之前,制作格式下拉列表并选择不同的值,因为教程不起作用).

编辑2解决方案从camden_kid提供的链接工作!:)详细评论.

我有一个Angular问题,从父范围取消绑定的模态范围.我希望传递给模态的范围对象与相应的范围对象分开.

无论我如何构建模态对象,父级总是镜像它.我发现的唯一解决方案是更改对象属性名称,但这对我项目中的每个模态都很麻烦.

例如,我可以在父$ scope.parentData.firstName和一个模态变量$ scope.modalData.abcfirstName一个$范围变量,和父将镜像的模态的值.

我想这里有一些父孩子$范围问题,我没有得到.这是一个说明问题的插件:

http://plnkr.co/edit/5naWXfkv7kmzFp7U2KPv?p=preview

HTML:

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <div class="modal-body">
                <input ng-model="modalData.a" />
                <input ng-model="modalData.b" />
                <input ng-model="modalData.c" />
            Selected: <b>{{ sourceData }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn btn-default" ng-click="open()">Open me!</button>
    {{sourceData}}
    <div ng-show="sourceData">Selection from a modal: {{ test }}</div>
</div>
  </body>
</html>

JS:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

  $scope.sourceData = {a:'abc',b:'bcd',c:'cde'};

  $scope.open = …

我正在尝试实现延迟授权,只有当用户触发调用需要身份验证的API时才会引入登录对话框.我正在使用bootstrap ui.bootstrap.modal(以及模态中的ui.bootstrap.alert).问题是这些指令明确指定了以下内容teamplateUrl:

• template/modal/backdrop.html(在modal.js 这里)
• template/modal/window.html(在modal.js 这里)
• template/alert/alert.html(在alert.js 这里)

像这样:

.directive('modalBackdrop', ['$timeout', function ($timeout) {
  return {
    restrict: 'EA',
    replace: true,
    templateUrl: 'template/modal/backdrop.html',
    link: function (scope, element, attrs) {
      /* ... */
    }
  };
}])

每当我调用$modal.open()ui-bootstrap为新的模态窗口构建DOM时,angular会尝试通过$http服务解析这些URL,即使模板已经通过$templateCache.put方法或添加<script>标记加载.这基本上是在我的拦截器中引起无限递归,它试图在request上面的url的重载中引入登录对话框.

这是我的拦截器的简化版本:

.config(['$provide', '$httpProvider', function($provide, $httpProvider) {
    $provide.factory('testInterceptor', ['$injector', function($injector) {
        return {
        'request': function(config) {

            var auth = $injector.get('authService');
            var modal = $injector.get('$modal');
            if …

我想通过为单元格添加颜色来指定Angular UI日期单元格的颜色,因此我使用以下内容覆盖默认模板:

<!-- things from pasted default template, here I change something -->
<!-- btn-danger instead btn-info for clicked date, test if I can change anything-->
<!-- call to function from my own controller-->
<button type="button" style="width:100%;" class="btn btn-default btn-sm"
    ng-class="{'btn-danger': dt.selected, active: isActive(dt)}" ng-click="select(dt.date)"
    ng-disabled="dt.disabled" tabindex="-1">
    <span ng-class="{'text-muted': dt.secondary, 'text-info': dt.current,
    'text-success': hasEventsCreatedByUser(dt)}">
    {{dt.label}}</span>
</button>

那是(目前)我的功能 testController

$scope.hasEventsCreatedByUser = function(date){
            return true;
};

从更改btn-info到btn-danger非常容易,它只是粘贴另一个类:)但是我不能在我的控制器中调用方法 - 是否有任何解决方案在Angular UI模板中启用我的控制器调用函数或者我必须以某种方式覆盖默认值DatepickerController？

更详细的描述:用户可以创建具有指定日期的事件.例如,这个想法是使用创建绿色的日期创建单元格

模拟解决方案发现:

我使用"miniController",我只在按钮上添加:

<button ng-controller="miniController" …

我有这个codepen,并使用该函数'$scope.pageChanged'来查看页面何时更改.

$scope.pageChanged = function() {
 $log.log('Page changed to: ' + $scope.currentPage);
};

但是当我点击页面链接(更改页面)时,变量'$scope.currentPage'不会改变.为什么？

我认为是有关的filter,但不确定.