Angular UI下拉列表选择

ps0604

在这个小问题中,我有一个Angular UI下拉菜单。有没有一种方法可以不重复每个<a>元素的ng-click

的HTML

<div class="btn-group" uib-dropdown>
  <button id="btn-append-to-body" type="button" class="btn btn-primary" 
      uib-dropdown-toggle>
      {{selection}} <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" uib-dropdown-menu="" role="menu" 
        aria-labelledby="btn-append-to-body">
    <li role="menuitem">
      <a href="#" ng-click="selectItem('1')">The first item</a>
    </li>
    <li role="menuitem">
      <a href="#" ng-click="selectItem('2')">Another item</a>
    </li>
    <li role="menuitem">
      <a href="#" ng-click="selectItem('3')">Yet another item</a>
    </li>
 </ul>

伊戈尔

该插件显示了如何使用全局ng-click(传递source $event)并选择data-value属性作为选定值:

<ul class="dropdown-menu" ng-click="selectItem($event)" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body">
           <li role="menuitem">
              <a href="#" data-value="1" >The first item</a>
            </li>
            <li role="menuitem">
              <a href="#" data-value="2">Another item</a>
            </li>
            <li role="menuitem">
              <a href="#" data-value="3">Yet another item</a>
            </li>
        </ul>

selectItem()功能,获得选择的锚定件的数据值属性(ev.target):

$scope.selectItem = function(ev) {
    $scope.selection = ev.target.dataset.value
};

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular UI下拉列表选择

来自分类Dev

AngularJS angular-ui引导时间选择器作为下拉列表

来自分类Dev

Angular UI Bootstrap-当未选择“ Typeahead”下拉列表值时清除模型值?

来自分类Dev

在“选择”下拉列表中显示默认选择 - Angular

来自分类Dev

Angular JS ng显示/隐藏基于下拉列表选择的值

来自分类Dev

如何禁用从Angular JS下拉列表中选择特定选项?

来自分类Dev

ng上的Angular JS Action更改选择下拉列表

来自分类Dev

angular js下拉列表中的Python硒选择选项

来自分类Dev

Capybara Angular RSpec测试以选择下拉列表

来自分类Dev

Angular JS ng显示/隐藏基于下拉列表选择的值

来自分类Dev

在Angular生成的下拉列表中选择默认选项

来自分类Dev

使用 Angular 在选择下拉列表中设置默认值

来自分类Dev

在Angular UI下拉列表中设置初始标签

来自分类Dev

在Angular UI下拉列表中设置初始标签

来自分类Dev

Angular 更新下拉列表

来自分类Dev

Angular 2,基于父下拉选择过滤嵌套下拉列表

来自分类Dev

从 Angular6 模板中的选择下拉列表中选择项目时使部分可见

来自分类Dev

在下拉列表中放置一个文本“选择选项”,然后在 Angular 中清理下拉列表

来自分类Dev

当Modal中的项目列表很大时,angular-ui-select的下拉列表的运行缓慢

来自分类Dev

Angular UI Bootstrap下拉转换

来自分类Dev

Angular UI Bootstrap下拉转换

来自分类Dev

在angular.js的选择下拉列表中绑定值和文本

来自分类Dev

在Angular JS的两个选择下拉列表之间切换

来自分类Dev

从服务器端获取选择属性值,并使用Angular下拉列表

来自分类Dev

如何在Angular .js中显示下拉列表(已经应用选择不显示)

来自分类Dev

如何使用angular随对象一起从对象中填充选择下拉列表。

来自分类Dev

在选择下拉列表时按Angular中的多个字段排序

来自分类Dev

如何在Angular 9中使用带有选定值的选择下拉列表

来自分类Dev

选择“全选”还会在angular2-multiselect-下拉列表中发出onDeSelectAll事件

Related 相关文章

  1. 1

    Angular UI下拉列表选择

  2. 2

    AngularJS angular-ui引导时间选择器作为下拉列表

  3. 3

    Angular UI Bootstrap-当未选择“ Typeahead”下拉列表值时清除模型值?

  4. 4

    在“选择”下拉列表中显示默认选择 - Angular

  5. 5

    Angular JS ng显示/隐藏基于下拉列表选择的值

  6. 6

    如何禁用从Angular JS下拉列表中选择特定选项?

  7. 7

    ng上的Angular JS Action更改选择下拉列表

  8. 8

    angular js下拉列表中的Python硒选择选项

  9. 9

    Capybara Angular RSpec测试以选择下拉列表

  10. 10

    Angular JS ng显示/隐藏基于下拉列表选择的值

  11. 11

    在Angular生成的下拉列表中选择默认选项

  12. 12

    使用 Angular 在选择下拉列表中设置默认值

  13. 13

    在Angular UI下拉列表中设置初始标签

  14. 14

    在Angular UI下拉列表中设置初始标签

  15. 15

    Angular 更新下拉列表

  16. 16

    Angular 2,基于父下拉选择过滤嵌套下拉列表

  17. 17

    从 Angular6 模板中的选择下拉列表中选择项目时使部分可见

  18. 18

    在下拉列表中放置一个文本“选择选项”,然后在 Angular 中清理下拉列表

  19. 19

    当Modal中的项目列表很大时,angular-ui-select的下拉列表的运行缓慢

  20. 20

    Angular UI Bootstrap下拉转换

  21. 21

    Angular UI Bootstrap下拉转换

  22. 22

    在angular.js的选择下拉列表中绑定值和文本

  23. 23

    在Angular JS的两个选择下拉列表之间切换

  24. 24

    从服务器端获取选择属性值,并使用Angular下拉列表

  25. 25

    如何在Angular .js中显示下拉列表(已经应用选择不显示)

  26. 26

    如何使用angular随对象一起从对象中填充选择下拉列表。

  27. 27

    在选择下拉列表时按Angular中的多个字段排序

  28. 28

    如何在Angular 9中使用带有选定值的选择下拉列表

  29. 29

    选择“全选”还会在angular2-multiselect-下拉列表中发出onDeSelectAll事件

热门标签

归档