标签: angular-ui

我在Angular.js中有一个模型,可以从控制器和指令更新.如果我将该指令放在AngularUI bootstrap Tabs指令中,它不会更新模型.代码非常简单,应该可以工作.

请选择第二个选项卡,然后单击按钮.它没有更新它:这是一个Plunker:http://plnkr.co/edit/jdaniklxFNkdxAYaLtVQ？p = preview

当我点击黑色背景时,对话框关闭,但我不想让它关闭..

这是代码:

var disconnectedDialog = $dialog.dialog({       backdrop: 'static', keyboard:false });

我在这个对话框中添加的选项不会被关闭..

请告诉我该做什么......请告诉我该做什么......

请告诉我该怎么做......

我正在玩AngularJS作为学习练习.我正在尝试使用AngularJS ui-router(https://github.com/angular-ui/ui-router)并且我遇到了一个问题,我遇到了一个问题.

我把一个插在一起来说明和重现.

http://plnkr.co/edit/OvmOKPMfeFqNWc7ToCff?p=preview

以上是一个简单的向导类型组件,顶部有选项卡可以移动到特定步骤,底部有一些下一个/后退按钮可以移动到下一个相关页面.

顶部的选项卡导航工作正常,单击沿移动会相应地更改视图和URL.

然而,下一个/后退按钮的行为非常奇怪,只要它们在您第一次单击下一步时工作,而不是之后.你应该能够看到我正在谈论的内容.

看起来它试图导航到正确的视图,但随后立即恢复到其他规则.

我已经在代码中添加了钩子以在控制台中进行跟踪.本质上所有的下一个/后退按钮都称为相关状态,所以$ state.go("step1"),$ state.go("step3")等.

希望我已经提供了足够的信息,并希望任何人都可以带来任何洞察力.

谢谢.

我正在使用Angular UI模式,并希望将其缩小.根据Bootstrap的网站,为了使模态更小,我应该使用modal-sm修饰符类:

<div class="modal-dialog modal-sm">

我无法将此div合并到我的Angular模态模板中.我发现的每个Angular UI模态示例都只包含模板中的modal-header,modal-body和modal-footer div.外部模态,模态对话和模态内容div是否已由Angular提供？如果是这样,有没有办法覆盖它们,以便我可以将"modal-sm"应用于模态对话框div？我尝试将完整的模态div结构添加到模板中,这会导致我的模态出现问题.我也尝试在我的控制器中设置windowClass ="modal-dialog modal-sm",但这也不起作用.有任何想法吗？谢谢.

更新:这是我尝试包含外部Bootstrap div后我的模态模板的内容.这是一个非常简单的模式,用于确认用户想要删除项目.

<div class="modal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
           <div class="modal-header">
                <h4>Confirm Delete</h4>
           </div>
           <div class="modal-body">
               <p>Are you sure you want to delete?</p>
           </div>
           <div class="modal-footer">
               <button class="btn btn-primary" ng-click="confirm()">Confirm</button>
               <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
           </div>
        </div>
     </div>
 </div>

结果是它没有正确显示我的模态.我可以看到背景和我认为是我的模态的一小部分.

更新:使用@ lmyers的解决方案对我有用,但不是将宽度指定为60%,而是使用@ modal-sm Less变量进行以下操作.

.confirm-modal .modal-dialog {
    width: @modal-sm;
}

我试图在我的ui-sref参考中对参数应用过滤器.

<a ui-sref="item.show({ itemId: item.id, itemName: item.name | slugify })">

但是,上述方法无效.如何应用slugify过滤器item.name？

我将Angularjs typeahead指令与jquery布局插件结合使用.这是我正在处理的应用程序的链接.当我在输入框中键入地址时,自动完成结果列表会隐藏在缩放器后面.我已经尝试更改自动完成列表以及窗格大小调整器的z-index属性,但似乎没有任何工作.解决这个问题的最佳方法是什么？

.ui-layout-resizer-open {
    z-index: 1;
 }

 .dropdown-menu {
    z-index: 2;
 }

我的模态窗口中有一个联系表格。成功发布请求后，我想自动关闭模态。我正在使用 MEAN.JS

这是我的控制器

angular.module('core').controller('FormCtrl',['$scope','$http', function($scope,$http) {

 $scope.postMail = function (data) {

    $http.post('/mail', data).
      success(function(data, status, headers, config) {
        alert('success');
        //close function....??
      }).

      error(function(data, status, headers, config) {

      });
 };

}]);//formController ends

$http.post 成功后如何关闭我的模式？

我在信用卡字段上使用 AngularUI Mask ( https://github.com/angular-ui/ui-mask )。

<input type="text" placeholder="xxxx-xxxx-xxxx-xxxx" ui-mask="9999-9999-9999-9999" ng-model="card.number">

但是，根据 Stripe ( https://stripe.com/docs/testing ) 的说法，并非所有卡片都有 16 位数字。如何允许用户输入 14 到 16 位数字并自动将其格式化为：

• 美国运通的 xxxx-xxxxxx-xxxxx
• xxxx-xxxx-xxxx-xx 用于 Diners Club
• xxxx-xxxx-xxxx-xxxx 用于其他一切

Plnkr：http ://plnkr.co/edit/Qx9lv7t4jGDwtj8bvQSv?p=preview

在 Angular 8 中执行此操作的最佳方法是什么

我有两个输入，分别是 fromDateMin 和 fromDateMAx 的日期，我需要将这两个输入与 formControlName='fromctrlname' 和 formControlName='toctrlname' 进行比较并显示错误

状况：

如果 fromDateMin 不为空，则用户无法选择早于该日期的日期。如果这样做，日期将更改为该日期。在错误消息范围内显示消息。

如果 fromDateMax 不为空，则用户无法选择晚于该日期的日期。如果这样做，日期将更改为该日期。在错误消息范围内显示消息。

fromDate 必须早于或等于 toDate。toDate 必须晚于或等于 fromDate。在错误消息范围内显示消息。

这是我到目前为止所尝试过的

https://stackblitz.com/edit/angular-2gdadn?file=src%2Fapp%2Fapp.component.ts

这是我的html

    <form [formGroup]='dateFilterForm'>
      <label *ngIf="fromLabel != ''" for="{{componentId}}-fromDate">{{fromLabel}}</label>
      <input type="date" formControlName='fromctrlname' id="{{componentId}}-fromDate" name="{{componentId}}-fromDate"
        placeholder="{{fromPlaceholder}}" [(ngModel)]="fromDate" (ngModelChange)="errMsg = ''" [value]="fromDate">
    
      <label *ngIf="toLabel != ''" for="{{componentId}}-toDate">{{toLabel}}</label>
      <input type="date" formControlName='toctrlname' id="{{componentId}}-toDate" name="{{componentId}}-fromDate"
        placeholder="{{toPlaceholder}}" [(ngModel)]="toDate" (ngModelChange)="errMsg = ''" [value]="toDate">
    
      <button type="submit" (click)="submit()"
        class="btn button-border white icon-rightarrow-white medium mt2 ml2 mr1 mb2 r15 fw7"
        style="display:inline-block;">{{buttonLabel}}</button>
    
      <div class="error-message mb3 …

有谁知道如何使我的代码工作.我正在尝试创建用户创建对话框,并希望使用ngResource发送帖子数据,我已经配置了我的PHP后端,并且它按预期工作.现在,我的问题是在对话框上添加错误,我尝试添加虚拟数据,但ngRepeat对我不起作用.我也尝试过调试问题的不同步骤,但对我来说没什么用.我也在研究这个问题,但没有运气.这是我的代码:

<div name="errors" id="errors" class="alert alert-error">
        <li ng-repeat="error in dialog.errors">{{ error }}</li>
</div>

试着看看链接 http://jsfiddle.net/QCQrF/