根据我的编程要求,我想用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}} - {{LDay}}</span></li>
<li>Last 6 Months <span>{{CDate}} - {{LMonth}}</span></li>
<li>Last Year <span>{{CDate}} - {{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] 删除。
我来说两句