切换Angular Js中的多个选项

时间:2014-04-22 20:27:20

标签: javascript angularjs task

我正在创建一个小型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>

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

1 个答案:

答案 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)'>