javascript - 如何在不使用 AngularJs 的 ng-repeat 的情况下创建并从下拉菜单(Bootstrap)中选择一个元素

Question

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

我遵循给定的 angularJs 示例，但它到处都在谈论 ng-repeat 做事的方式，以及预定义的元素集。在我的示例中，我还需要使用一些 HTML 动态创建菜单。我已经完成了下面给出的工作，并在下拉菜单上添加了 ng-click，但它不起作用。我是 AngularJs 的新手，能否请你建议如何处理这种情况。

详细解释我做了什么

我在下面的 div 中添加了一个 HTML 边栏中的菜单:

<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 Controller 以编程方式计算的，如下所示:

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;
     }
   

在我的 Controller 中，代码是这样的:

DayMonthYear = ControlsService.getDayMonthYearBasedOnCdate();

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

菜单是这样的:

但是在选择 ng-click(我只是作为实验尝试)不起作用的特定元素时，我检查了其他示例，但这些示例没有帮助，因为它们与此要求不同。

Answer 1

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

您也可以访问以下链接:

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