在角度Js中切换多个选项

Toggling through multiple options in Angular Js

本文关键字：选项 Js      更新时间：2023-09-26

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

现在我有$scope.tasks存储所有任务，$scope.tasks.$status保存可用的stasues。

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>

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

根据您下一步要做什么，有很多解决方案。最简单的似乎是：

$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)'>
相关文章：