标签: angular-ui

Angular UI select2,标签不在自定义指令内

使用Angular UI Select2指令,在输入字段上定义标记.如果输入本身在自定义指令中,则它未正确初始化并且控制台发出错误:

query function not defined for Select2 tagging

我怀疑这可能与指令编译/链接的顺序与调用select 2函数时的顺序有关.

也许有一个简单的解决方法,可能使用编译功能或指令控制器而不是链接功能?或者它可能是Angular UI select2指令的问题.

我做了一个显示问题的plunker:

http://plnkr.co/edit/myE5wZ

所以我的问题是 - 如何从自定义Angular指令中获取select2标签?

angularjs jquery-select2 angular-ui angularjs-directive

3
推荐指数
1
解决办法
4428
查看次数

在Angular-UI日历​​/完整日历中禁用事件大小调整

我们使用angular-ui-calendar可视化的事件没有任何持续时间,因此我们不希望用户进行任何调整大小,同时仍然能够拖放事件以将其移动到另一个日期和时间.我在哪里可以配置?

$scope.uiConfig = {
    calendar: {
      height: 450,
      editable: true,
      // here?! resizable: false won't work


  $scope.events = [
    {
        // or here? resizable: false won't do anything
        title: "Test", start: new Date(2014, 0, 1, 12, 0), end: new Date(2014, 0, 1, 12, 30), allDay: false}
  ];
Run Code Online (Sandbox Code Playgroud)

当然我可以在事件处理程序(eventResize)中恢复调整大小,但我认为这会导致糟糕的用户体验.

另外:我们想要隐藏事件的结束日期,因为我们没有任何事件(跳过endDate属性只会导致两个小时的持续时间,所以使用半小时至少会保持小的大小)

谢谢!

javascript fullcalendar angularjs angular-ui

3
推荐指数
1
解决办法
2439
查看次数

angularjs Tab 键按下防止默认

嗨,我有一个输入字段,它在按下 Tab 键时调用函数 add_plu()。尽管它有效,但它会移动到页面的下一个元素(Tab 键的默认操作)。

如何防止选项卡按钮的默认行为?这是我的代码:

   <input class="order-input-plu form-control" ng-model="order.orderwindow.add_field" ui-keydown="{ 'tab':'add_plu(order.orderwindow.add_field)'}">
Run Code Online (Sandbox Code Playgroud)

javascript jquery angularjs angular-ui angular-ui-bootstrap

3
推荐指数
1
解决办法
6093
查看次数

angular.js和angular-ui bootstrap的浏览器兼容性

我试图决定是否可以在我的项目中使用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的"特征"

compatibility cross-browser angularjs angular-ui angular-ui-bootstrap

3
推荐指数
1
解决办法
2万
查看次数

如何在Angular中的Bootstrap下拉标题上显示所选项?

不要吝啬,因为我是Angular的新手.所以我的项目中有一个bootstrap Dropdown组件,我想根据点击的链接更改按钮的文本.

在互联网上,我只遇到过JQuery 实现.

那么有谁知道如何在Angularjs做到这一点?提前致谢.

Codepen沙箱

HTML

<div ng-app='myApp'>
  <div ng-controller='DropdownCtrl'>

    <div class="btn-group" uib-dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
        <li role="menuitem">
          <a href="#">Action</a>
          <a href="#">Another action</a>
          <a href="#">Something else here</a></li>
      </ul>
    </div>

  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

JS

angular.module('myApp', ['ui.bootstrap']).controller('DropdownCtrl', function ($scope) {

});
Run Code Online (Sandbox Code Playgroud)

javascript twitter-bootstrap angularjs angular-ui twitter-bootstrap-3

3
推荐指数
1
解决办法
2万
查看次数

Angular UI Bootstrap:不加载模板

我正在使用包含模板的Angular UI Bootstrap v1.0.3(我选择了包含模板,我可以在源代码中看到*tpls模块),但是当我打开这样的模态时(从内部app.run(...)):

var type = "sometype";
$uibModal.open({
    templateUrl: "/partials/" + type + "-dialog.html",
});
Run Code Online (Sandbox Code Playgroud)

我收到一个错误:

angular.min.js:93 GET http://.../uib/template/modal/backdrop.html?sessionid=363192 404 (Not Found)(anonymous function) @ angular.min.js:93r @ angular.min.js:89g @ angular.min.js:86(anonymous function) @ angular.min.js:119r.$eval @ angular.min.js:133r.$digest @ angular.min.js:130r.$apply @ angular.min.js:134g @ angular.min.js:87T @ angular.min.js:92w.onload @ angular.min.js:93 angular.min.js:107

Error: [$compile:tpload] http://errors.angularjs.org/1.4.8/$compile/tpload?p0=uib%2Ftemplate%2Fmodal%2Fbackdrop.html&p1=404&p2=Not%20Found at Error (native)
Run Code Online (Sandbox Code Playgroud)

我尝试手动将模板添加到我的代码中,并将以下代码添加到我的app.js顶部:

angular.module("template/modal/backdrop.html", []).run(["$templateCache", function($templateCache) {
     $templateCache.put("template/modal/backdrop.html", "<div class=\"modal-backdrop\"></div>");
}]);
Run Code Online (Sandbox Code Playgroud)

仍然是同样的错误

twitter-bootstrap angularjs angular-ui

3
推荐指数
1
解决办法
2428
查看次数

Angular ui-select 框禁用自动向上

我有一个根据屏幕大小自动改变方向的盒子。它这样做的方式是向指令添加一个“方向向上”类。无论如何我可以禁用这种行为吗?

编辑:

下面的答案非常简洁,请注意,您需要 angular-ui-select >= 0.13.0 才能使下面的答案起作用。

angularjs angular-ui

3
推荐指数
1
解决办法
1722
查看次数

角度ui-mask有什么用?

https://htmlpreview.github.io/?https://github.com/angular-ui/ui-mask/master/demo/index.html

这是我能找到的唯一文档.这对我来说没什么意义.据我所知,目前还没有官方演示.

ui-mask-placeholder和ui-mask-placeholder-char似乎不起作用.

当用户在掩码字段中键入一些值时,掩码消失,用户可以键入他想要的任何值.所以基本上我只是使用占位符.那么ui-mask有什么意义呢?我错过了什么?

user-interface angularjs angular-ui

3
推荐指数
1
解决办法
5898
查看次数

如何使用Factory关闭mouseleave上的Angular-ui-bootstrap uibModal?

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

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

this.hoverTag = (tag) => {
    TagHover.display();
};
Run Code Online (Sandbox Code Playgroud)

上面是调用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 = () => { …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angular-ui angularjs-service angular-ui-bootstrap

3
推荐指数
3
解决办法
3万
查看次数

Angular Material 7 Multi Select - 设置选定值

我正在尝试为多选下拉菜单设置选定的值,如下所示

//循环以根据条件选择和设置多个复选框

document.getElementsByTagName('mat-pseudo-checkbox')[index].classList.add('mat-pseudo-checkbox-checked');
document.getElementsByTagName('mat-pseudo-checkbox')[index].setAttribute("ng-reflect-state","checked");
Run Code Online (Sandbox Code Playgroud)

这仅从外观上反映了更改,因为当我尝试通过 (selectionChange)=filter($event) 检索所有选定的复选框时

<mat-select multiple  (selectionChange)="filter($event)" formControlName="dropdown">
   <mat-option *ngFor="let info of infos" [value]="info">
      {{info}}
    </mat-option>
 </mat-select>
Run Code Online (Sandbox Code Playgroud)

如果事件似乎没有选择我们之前尝试设置的值,请​​让我知道事件如何在 mat select 的情况下选择选定的值。

PS:目标是在角度选项卡之间切换时保留多选框

angular-ui angular-material angular-material2 angular

3
推荐指数
1
解决办法
2万
查看次数