标签: angular-ui

我有大量数据的大表单,所以我想要为每个选项卡添加大量数据的选项卡.

我希望在单击选项卡标题时延迟加载选项卡内容,然后在以后再次选择时不需要再次重新加载.

我认为这个例子涉及到我想要的方向: angular-ui tabs在tab-content中加载模板

但这似乎加载了一个静态模板:

<tabs>
    <pane active="pane.active"
          heading="{{pane.title}}"
          ng-repeat="pane in panes">
        <div ng-include="pane.content"></div>
    </pane>
</tabs>

如何使用$ http.get()动态加载窗格的内容？注意:这已经是通过ng-view路由加载的页面了,所以我不能做嵌套路由.

编辑:每个标签的内容都大不相同,所以理想情况下我会为每个标签或类似的东西提供一个功能和模板......

我想angular-ui是一个很好的方法来解决这个问题？

问题:
我无法使用ENTER键接受模态窗口

我修改了默认的Plunker来向你展示我从现在开始做的事情 - > 这里

我拥有:
简而言之,模式识别ENTER键,但它不会触发我的功能(范围问题,我怀疑).

不好的是,我必须修改template/modal/window,如果可能的话,我很乐意保留未受污染的.

我
想要的只是简单地将ng-enter指令放在我的模态中,而不修改默认模板

额外
我还尝试将"事件13"添加到modal指令中,但我无法传递任何结果modal.close,所以我放弃了这条道路

任何想法？

我正在使用角度ui模态在我的项目中创建模态.

一切正常,直到我需要在父范围内引用变量.看看plunker代码

似乎modal无法访问父范围.无论如何要克服这个？

我有一个pagination内部dialog两个指令都是ui.bootstrap.问题是,$watch它不适用于currentPage成员.

现在,类似的代码非常适用于其他页面,其中分页不在某些对话框中.

我想这个问题与此问题有关,$scope但随后currentPage在范围内可用,我可以使用在模板上显示它{{currentPage}}

请在plunker中找到代码

$scope.$watch('currentPage') 没有点击页面链接.

现在,对于解决方法,我可以使用on-select-pagepagination指令提供的回调.

例如

<pagination on-select-page="pageChanged(page)" total-items="totalItems" items-per-page = "numPerPage" page="currentPage" max-size="maxSize"></pagination>

在我的控制器内,我可以,

$scope.pageChanged = function(page) {
  console.log(page);    
};

但我宁愿理解为什么在这种情况下$scope.$watch不会工作.

更新:从控制台跟随的是观察者值

$$watchers: Array[1] 
0th: Object
  eq: false
  exp: "currentPage"
  fn: function (o,n){}

我将使用http://angular-ui.github.io/bootstrap/#pagination 我需要将'previous','next'指标设置为html.

就像是:

<pagination 
    previous-text="'<span class="glyphicon glyphicon-arrow-left"></span>'"
    next-text="'<span class="glyphicon glyphicon-arrow-right"></span>'"
>
</pagination>

不幸的是,它返回解析的html而不是图标.

这是一个我想要实现的东西:http://plnkr.co/edit/q59XhTO0II1ZBz21Etj2？p = preview

我正在使用angular-ui datepicker指令,需要使用彩色文本呈现一些日期.我已经使用beforeShowDay事件找到了bootstrap datepicker的示例,但是找不到angular-ui datepicker的内容.我对angular和angular-ui相当新,并且会感激任何建议.

这是一个Plunker示例.[根据以下答案更新了plunk]

更新了Plunk

如何禁用一两个项目的排序.例如,第1项和第3项,那么用户无法移动这两项？

我试过了

   $scope.sortableOptions = {
       disabled:true,
   };

在sortableOptions中,但禁用整个列表上的排序.

我正在寻找类似的东西

  <div ui-sortable="sortableOptions" ng-model="list">    
  <div ng-repeat="item in list">    
    <div ng-switch on="item.text">    

      <div ng-switch-when="Item 1" >    
        <div ui-sortable="sortableOptions.disabled=true">{{item.text}} - Sorting disabled</div>    
      </div>  

     <div ng-switch-default>    
        <div>{{item.text}} - Sorting enabled</div>    
      </div>  

    </div>    
  </div>    
</div>

谢谢.

我注意到Angular-UI已经停止了他们的UI-Select2指令,转而支持新的UI-Select(有多个主题 - select2,bootstrap,selectize).

它看起来像这样:

<ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
        {{color}}
    </ui-select-choices>
</ui-select>

<p>Selected: {{multipleDemo.colors}}</p>

最初我的选择框应该是空的但是准备好接受类型字符,即至少4个字符的字符串,然后进行API调用以检索要填充框的建议值列表.然后将选择一个值,并且应该根据需要重复搜索.

首先,我尝试$watch了ng-model在这种情况下multipleDemo.colors(在演示中使用此示例).API调用从未发生,然后我意识到了原因.实际模型根本不会更改,因为它只会在进行选择时更改(我的选择框为空,因此无法选择任何内容).

我的结论是,我应该(能够)$watch添加什么作为过滤器,即filter: $select.search.

有谁知道我应该如何在我的控制器中使用那个？

这个:

$scope.$watch('$select.search', function(newVal){
    alert(newVal);
});

不起作用.

编辑:对于任何人的参考,请参阅这个简短的讨论:是否可以添加对自定义查询功能的支持,如select2？

编辑2:

我通过$emit在指令中使用来解决这个问题,所以现在我的控制器中的值可用.但是现在我想知道如何覆盖指令的这一部分,以便指令本身可以保持原样,以便在将来的更新中不会中断？

我需要$scope在执行某些操作时清除所有值.

例如:如果我单击"Signout"按钮重定向到"signin"页面,则应清除会话中的所有$ scope或$ rootScope值.

我怎样才能做到这一点？

我正在使用角度ui-grid并且有一个长达30列的网格,我想为列设置固定宽度,以便至少可以轻松看到列标题.有没有办法设置,比如说所有列的宽度都是10%,或者我必须逐个为每列做这个.

在ui-grid-header-cell上设置min-width后,许多列合并为一列

.ui-grid-header-cell {
    min-width: 150px !important;
}