在 Angular Js 中切换多个选项答案

【问题标题】：Toggling through multiple options in Angular Js在 Angular Js 中切换多个选项
【发布时间】：2014-04-22 20:27:19
【问题描述】：

我正在创建一个小型待办事项应用程序来学习 Angular。我被困在一个地方。我的任务将被列为链接列表。每次用户点击它时，它的状态都应该改变。所以当用户单击任务，其状态变为doing。然后在下一次单击它变成done。一键即可成为later。这也应该反映存储回从这里加载的$scope。我不知道，在 Angular 中最好的方法是什么。

现在我有 $scope.tasks 存储所有任务，$scope.tasks.$status 保持可用状态。

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>

到目前为止我所做的一切都是正确的吗？切换选项的最佳方法是什么？有什么功能吗？

【问题讨论】：

标签： javascript angularjs task

【解决方案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)'>

【讨论】：