如何在不使用AngularJs的ng-repeat的情况下从下拉菜单(Bootstrap)中创建然后选择项目

苏米特·阿罗拉(Sumit arora)

根据我的编程要求,我想用Bootstrap创建一个菜单,在该菜单中,我有不同的日期,这些日期是根据当前日期动态生成的。然后,我单击下拉菜单,然后选择一个特定的日期,然后根据日期选择的类型,我需要调用特定的函数来执行某些操作。

我按照给定的angularJs示例进行了介绍,但是到处都在谈论ng-repeat的工作方式以及预定义的项目集。在我的示例中,我还需要使用一些HTML动态创建菜单。我已经完成了下面的工作,并在下拉菜单中添加了ng-click,但这是行不通的。我是AngularJs的新手,请提出如何处理这种情况的建议。

我所做的详细解释

我在div下面将菜单添加到HTML SideBar之一中:

<div class="ui-select ui-mini dropdown"> <a data-target="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
              aria-haspopup="true" aria-expanded="false" id="daterange-listbox-placeholder" ng-click="OnClickToDateRangeListBox()">All Time</span></a>
   <ul class="dropdown-menu">
      <li>Last Month <span>{{CDate}}&nbsp;-&nbsp;{{LDay}}</span></li>
      <li>Last 6 Months <span>{{CDate}}&nbsp;-&nbsp;{{LMonth}}</span></li>
      <li>Last Year <span>{{CDate}}&nbsp;-&nbsp;{{LYear}}</span></li>
      <li>All Time</li>
   </ul>
</div>

这里的CDate,LDay,LMonth,LYear是从angularJs控制器以编程方式计算的,如下所示:

this.getDayMonthYearBasedOnCdate = function()
     {
    
    var DayMonthYear = {};
    
    // code for date filters
    var monthNames = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
    var d = new Date();
    var day = d.getDate();
    var month = monthNames[d.getMonth()]
    var year = d.getFullYear();
    DayMonthYear.CDate  = day+"-"+month+"-"+year;
    if((d.getMonth() - 1) < 0)
    {
         DayMonthYear.LDay = day + "/" + monthNames[d.getMonth()-1 + 12] + "/" + [d.getFullYear()-1];
        }
        else
        {
          DayMonthYear.LDay = day + "/" + monthNames[d.getMonth()-1] + "/" + year;
        }

        if((d.getMonth() - 6) < 0)
        {
            DayMonthYear.LMonth     = day + "/" + monthNames[d.getMonth()-6 + 12] + "/" + [d.getFullYear()-1];
        }
        else
        {
            DayMonthYear.LMonth     = day + "/" + monthNames[d.getMonth()-6] + "/" + year;
        }

        DayMonthYear.LYear  = day + "/" + month + "/" + [d.getFullYear()-1];

      return DayMonthYear;
     }
   

在我的控制器中,代码是这样的:

DayMonthYear = ControlsService.getDayMonthYearBasedOnCdate();

$scope.CDate = DayMonthYear.CDate;
    
$scope.LDay = DayMonthYear.LDay;
    
$scope.LMonth = DayMonthYear.LMonth;
    
$scope.LYear = DayMonthYear.LYear;

菜单是这样的:

在此处输入图片说明

但是在选择ng-click(我刚刚尝试做过的实验)不起作用的特定项目时,我检查了其他示例,但这些示例无济于事,因为它们与此要求不同。

潘瓦尔

为此,您可以在li的ng-click上调用一个函数,并可以通过传递参数在控制器内定义该函数,或者您也可以在该单击的函数上获取$ element val()。

您也可以访问以下链接:

[LINK] https://plnkr.co/edit/mPfiXvN9H6oISIZ6j3Oi?p=preview

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在不使用AngularJS的jQuery的情况下通过ng-click获取元素的宽度?

来自分类Dev

如何在不使用提交的情况下从下拉列表中选择值

来自分类Dev

如何在不使用按钮的情况下从JList选择项目?

来自分类Dev

如何在不使用按钮的情况下从JList选择项目?

来自分类Dev

如何在不使用 rel="stylesheet" 的情况下添加 boostrap 下拉菜单

来自分类Dev

默认情况下如何在选择框中或下拉菜单中选择第一个选项

来自分类Dev

如何在 angularjs 中不使用 ng-bind 格式化日期?

来自分类Dev

如何在Bootstrap的项目菜单中创建子菜单下拉菜单?

来自分类Dev

如何在不使用函数的情况下通过指令中的ng-repeat修改控制器范围?

来自分类Dev

如何在不使用函数的情况下通过指令中的ng-repeat修改控制器范围?

来自分类Dev

在不使用Maven的情况下,如何在Eclipse中创建动态Web项目?

来自分类Dev

如何使用Php Mysql中的while循环从下拉菜单中选择一个项目

来自分类Dev

如何在不选择项目的情况下使用SHOpenFolderAndSelectItems?

来自分类Dev

在不使用Foreach的情况下从PowerShell哈希表中选择项目

来自分类Dev

使用Watir从下拉列表中按项目编号选择项目?

来自分类Dev

如何在不使用JPQL的情况下选择多行?

来自分类Dev

如何在不使用灰色矩形的情况下使用ngMap在ng-hide div中渲染地图

来自分类Dev

如何在不使用INDIRECT函数的情况下从表创建下拉列表

来自分类Dev

如何在不使用超时的情况下测试angularjs控制器的异步行为

来自分类Dev

Selenium Python:如何从下拉列表中选择项目

来自分类Dev

如何在不使用angular.js中的key.value的情况下动态打印ng-repeat中的对象数组?

来自分类Dev

如何在不使用yeoman的情况下使用Node.js在Heroku中托管AngularJS应用程序?

来自分类Dev

如何在不使用支持库的情况下创建新的android项目?

来自分类Dev

如何使用php从下拉菜单中获取所选项目的值

来自分类Dev

如何在不使用selectmenu('refresh')的情况下刷新JQuery中的下拉列表?

来自分类Dev

如何在不使用提交按钮的情况下从多个下拉列表中获取数据

来自分类Dev

如何使用javascript从下拉菜单中选择onchange并将其放置在innerHTML中?

来自分类Dev

如何选择使用硒从下拉菜单中动态生成的元素?

来自分类Dev

如何在没有jQuery的情况下按属性选择项目?

Related 相关文章

  1. 1

    如何在不使用AngularJS的jQuery的情况下通过ng-click获取元素的宽度?

  2. 2

    如何在不使用提交的情况下从下拉列表中选择值

  3. 3

    如何在不使用按钮的情况下从JList选择项目?

  4. 4

    如何在不使用按钮的情况下从JList选择项目?

  5. 5

    如何在不使用 rel="stylesheet" 的情况下添加 boostrap 下拉菜单

  6. 6

    默认情况下如何在选择框中或下拉菜单中选择第一个选项

  7. 7

    如何在 angularjs 中不使用 ng-bind 格式化日期?

  8. 8

    如何在Bootstrap的项目菜单中创建子菜单下拉菜单?

  9. 9

    如何在不使用函数的情况下通过指令中的ng-repeat修改控制器范围?

  10. 10

    如何在不使用函数的情况下通过指令中的ng-repeat修改控制器范围?

  11. 11

    在不使用Maven的情况下,如何在Eclipse中创建动态Web项目?

  12. 12

    如何使用Php Mysql中的while循环从下拉菜单中选择一个项目

  13. 13

    如何在不选择项目的情况下使用SHOpenFolderAndSelectItems?

  14. 14

    在不使用Foreach的情况下从PowerShell哈希表中选择项目

  15. 15

    使用Watir从下拉列表中按项目编号选择项目?

  16. 16

    如何在不使用JPQL的情况下选择多行?

  17. 17

    如何在不使用灰色矩形的情况下使用ngMap在ng-hide div中渲染地图

  18. 18

    如何在不使用INDIRECT函数的情况下从表创建下拉列表

  19. 19

    如何在不使用超时的情况下测试angularjs控制器的异步行为

  20. 20

    Selenium Python:如何从下拉列表中选择项目

  21. 21

    如何在不使用angular.js中的key.value的情况下动态打印ng-repeat中的对象数组?

  22. 22

    如何在不使用yeoman的情况下使用Node.js在Heroku中托管AngularJS应用程序?

  23. 23

    如何在不使用支持库的情况下创建新的android项目?

  24. 24

    如何使用php从下拉菜单中获取所选项目的值

  25. 25

    如何在不使用selectmenu('refresh')的情况下刷新JQuery中的下拉列表?

  26. 26

    如何在不使用提交按钮的情况下从多个下拉列表中获取数据

  27. 27

    如何使用javascript从下拉菜单中选择onchange并将其放置在innerHTML中?

  28. 28

    如何选择使用硒从下拉菜单中动态生成的元素?

  29. 29

    如何在没有jQuery的情况下按属性选择项目?

热门标签

归档