AngularJS - 不知道如何使用ng重复,逻辑问题实现此功能



我对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';
};

最新更新