我对AngularJS很陌生,我被困在一个实现上。
我要去并尝试尽可能清楚,我不能只发布一个jsFiddle,因为该项目非常大,有很多函数和API调用,但无论如何我的问题是关于逻辑的,我知道我需要做什么,但我不知道如何在AngularJS中做到这一点。
用户可以将任务分配给特定日期,他有一个日历,并且每天都有一个包含所有可用任务的下拉列表。他可以简单地选择一个,就是这样,一切都有效。
但是现在我正在实现更多的东西,用户最多可以添加 2 个任务,一个在早上,一个在下午。
让我们看看代码:
<div ng-repeat="task in (d.assignment.tasks || [null]) track by $index">
这是一天的容器,其中将显示下拉列表。 所以基本上,如果没有添加任何任务或只添加一个任务,它将在div
中显示一个简单的下拉列表。
但是,当您单击特定按钮(作为下拉列表的第一个元素放置(时,将触发此ng-click
:
<ul>
<li ng-click="addTask(p.person.id, d.date, 'afternoon', null)> SPLIT ME </li>
此函数用于添加任务,可以选择参数:'morning'
、'afternoon'
、'both'
通过这样做,我将一个"空"任务(其中"null"是,我们将所选任务作为参数传递(到下午。因此,上面的容器 DIV 现在循环访问 2 个任务,这使得另一个下拉菜单出现在同一个 DIV 中。
到目前为止,所有工作都按预期工作。现在,在下拉列表的第一个<li>
项(具有上述ng-click
(之后,我们有一个循环遍历所有可用任务的ng-repeat
:
<li ng-repeat="k in $scope.tasks" ng-click="addAssignment(p.person.id, d.date, 'both', k)">{{k.name}}</li>
</ul>
所以这里我们显示所有任务,当用户点击一个任务时,我们使用与上面相同的功能,并将任务添加到"两者"。
因此,如果我们不考虑拆分选项,一切正常,用户选择单个任务,该任务在函数中传递并添加到一整天。
现在的问题是,用户决定拆分一天,所以首先他单击拆分按钮,然后出现第二个下拉列表。
如您所见,问题是第二个下拉列表将循环相同的<li>
元素,因此这意味着相同的 ng-click,您可以看到 ng-click 将"两者"作为参数,因此当他从第二个下拉列表中选择某些内容时,我们回到方块 1,只显示一个 DIV,因为最后一个任务是在一整天中添加的。
我需要的是,如果用户拆分一天,第一个下拉列表将用作ng-click
'morning'
的参数,对于第二个下拉列表,它将使用'afternoon'
。
然后,如果用户再次单击拆分按钮,具体取决于他单击的位置(第一个下拉列表还是第二个?(,在该下拉列表中选择的任务现在将成为一整天的主要任务(因此参数是"两者"(。
我的第一个想法是做一个函数作为'both'
、'morning'
、'afternoon'
的参数,就像这样:
ng-click="addTask(p.person.id, d.date,function(), k)"
但我被困住了。
主要问题是,我不知道ng-repeat
,当创建一个新对象时,所以现在我们有 2 个div,我如何将一个特定的ng-click
与一个 DIV 一起使用,另一个与第二个 DIV 一起使用。
最后,如果这一切都不清楚,我将尝试用文字来解释它:
ng-repeat
遍历 1 个对象,一切都很好,我们将我的addTask()
函数与"both"一起使用。
ng-repeat
现在循环访问 2 个对象,我需要addTask()
为第一个对象获取"上午",为第二个对象获取"下午"。
希望我足够清楚,对不起,造成混乱!
编辑:
我可能自己找到了解决方案,我正在研究这样的事情:
<li ng-if="split" ng-repeat="k in $scope.tasks"
ng-click="$parent.$parent.$first && addTask(p.person.id, d.date, 'morning', k);
$parent.$parent.$last && addTask(p.person.id, d.date, 'afternoon', k)">
{{k.name}}</li>
<li ng-if="!split" ng-repeat="k in $scope.tasks"
ng-click="$parent.$parent.$first && addTask(p.person.id, d.date, 'both', k)">
{{k.name}}test</li>
所以基本上我有 2 个<li>
项目,并且带有 ng-如果我只显示其中一个,具体取决于拆分按钮是否已激活。
然后我发现您可以使用$parent.$parent.$first
访问父 ng-repeats,因此由于在 ng-click 中,我可以为父 ng-repeat 的 2 个不同元素触发 2 个不同的函数,
要做更多的测试,但乍一看似乎有效!!
欢迎对更好的解决方案提出任何意见
我不认为我可以直接回答你的问题,但我试图理解你面临的问题,所以我在下面也描述了我的答案,以及这个 plunker 供您参考。请检查并发布您的回复。
模板:
<ul ng-repeat="sdl in schedules track by $index">
<li ng-repeat="tm in tasks[sdl.value]" ng-click="addTask(tm)">{{tm}}</li>
<button type="button" ng-if="sdl.value!='Both'" name="tm" ng-click="splitDay($index);">SPLIT ME</button>
</ul>
控制器:
$scope.tasks = {
Morning: ['Morning'],
Afternoon: ['Afternoon'],
Both: ['Morning', 'Afternoon']
};
$scope.schedules=[{
name: 'One',
value: 'Morning'
},{
name: 'Two',
value: 'Afternoon'
},{
name: 'Three',
value: 'Both'
},{
name: 'Four',
value: 'Morning'
},{
name: 'Five',
value: 'Both'
}];
$scope.addTask=function(tasks){
console.log(tasks);
};
$scope.splitDay=function(index){
$scope.schedules[index].value='Both';
};