我正在创建一个小型todo应用程序来学习Angular。我被困在一个地方。我的任务将列为链接列表。每次用户点击它时,其状态都应该改变。所以当一个用户
点击任务状态变为doing
。然后在下一次点击它变为done
。只需点击一下即可later
。这也应该反映存储回加载的$scope
。我不知道,Angular中最好的方法是什么。
现在我$scope.tasks
存储了所有任务,$scope.tasks.$status
持有可用的stasuses。
var app = angular.module("app");
app.controller('Ctrl', function($scope) {
$scope.tasks = [
{id: 1, text: 'Do something.', status: 'doing'},
{id: 2, text: 'Undo that thing.', status: 'done'},
{id: 3, text: 'Redo it again.', status: 'started'},
{id: 4, text: 'Responsive', status:'later'}
];
$scope.tasks = {
status: ['doing','done', 'later' ]
};
$scope.clicked = function() {
//some logic.
};
}
下面是html。
<div ng-app="app" ng-controller="Ctrl" class"container">
<div ng-repeat="task in tasks" >
<li>
<a href="#" ng-click="clicked()" id="{{task.id}}">
{{task.text}} - {{task.status}}
<a/>
</li>
</div>
</div>
到目前为止我所做的一切是否正确?切换选项的最佳方法是什么?那有什么功能吗?
答案 0 :(得分:1)
有很多解决方案,具体取决于您接下来要做什么。最简单的似乎是:
$scope.clicked = function(task){
task.status = nextStatus(task.status);
};
function nextStatus(st){
return $scope.statuses[$scope.statuses.indexOf(st) + 1];
}
请注意,您还应该将任务传递给函数:
<a ng-click='clicked(task)'>