Question

很抱歉，如果标题令人困惑，我正在创建一个Web应用程序，让用户可以添加任务和子任务。我已设法使角度从数据库（mongodb）获取任务并在我的结果中显示结果dashboard.html文件。但是我遇到了子任务的问题。我在每个任务上都有一个按钮，点击后应该显示属于该任务的所有子任务。在目前的情况下，问题是，当我想看到属于一个任务的子任务时，它们就会显示为我所有任务的子任务。

我的dashboard.html看起来像这样：

<body ng-app="dashboard">
    <div class="container list-group list-group"  ng-controller="dashboardCtrl">
        <ul ng-repeat="task in tasks" class="list-group-item list-group-item-action">
            <li class="list_style">
                <span>{{task.name}}</span><span>{{task.description}}</span>
                <span><button class="btn btn-danger" ng-click="remove(task._id)">Delete</button></span>
                <span><button class="btn btn-info" ng-click="edit(task._id)">Edit</button></span>
                <span><button class="btn btn-info" ng-click="addTask(task._id)">Add new task</button></span>
                <span><button class="btn btn-success" ng-click="showTasks(task._id)">+</button></span>
            </li>
            <ul ng-repeat="subTask in subTasks" class="list-group-item list-group-item-action active" 
                style="margin-top: 10px;">
                    <li>{{subTask.name}}</li>
                    <li>{{subTask.description}}</li>
                    <li>{{subTask.due_date}}</li>
            </ul>
        </ul>    
    </div>
</body>

我的控制器看起来像这样：

var app = angular.module('dashboard', []);
app.controller('dashboardCtrl', function($scope, $http, $window){

    ///////Used to get all the tasks from the database

     var refresh = function() {
        $http.get('api/tasks').then(function(response) {
          $scope.tasks = response.data;
          console.log("Data retrieved successfully");
          console.log(response);
        });
      };
      refresh();

      ///////Used to get the all the sub-tasks belonging to task with specified id

      $scope.showsubTasks = function(id){
        $http.get('api/task/'+ id).then(function(response) {
            console.log("Data retrieved successfully");
            console.log(response);
            $scope.subTasks = response.data.subTasks;
          });
      }  
})

我的任务架构如下所示：

const mongoose=require("mongoose");

const taskSchema=mongoose.Schema({
    name:{
        type: String,
        required: true
    },
    description:{
        type: String,
        required: true
    } ,
     subTasks:[{
        name:{
            type: String,
            required: true
        },
        description:{
            type: String,
            required: true
        },
        due_date:{
            type: String,
            required:true
        }
     }]
});
const list = module.exports = mongoose.model("list", listSchema);

index.js文件：

///// to get the tasks
router.get("/tasks", (req,res)=>{
    task.find((err, lists)=>{
        res.json(tasks);
    })

});

////// to get the sub-tasks from a task with specified id

router.get("/task/:id", (req,res)=>{
    task.findOne({_id:req.params.id},'sub_tasks',(err, sub_tasks)=>{
        res.json(sub_tasks);
    })

});

我认为问题出现了：$scope.subTasks = response.data.subTasks;因为subTasks是子任务派生的数组，或者当我们从数据库中获取所有子任务时推送所有子任务但我发现它不可能现在就找到解决方案。感谢。

Answer 1

认为您应该在li中创建子任务而不是在ul。

中

你的代码看起来像那样：

<ul ng-repeat="task in tasks" class="list-group-item list-group-item-action">
        <li class="list_style">
            <span>{{task.name}}</span><span>{{task.description}}</span>
            <span><button class="btn btn-danger" ng-click="remove(task._id)">Delete</button></span>
            <span><button class="btn btn-info" ng-click="edit(task._id)">Edit</button></span>
            <span><button class="btn btn-info" ng-click="addTask(task._id)">Add new task</button></span>
            <span><button class="btn btn-success" ng-click="showTasks(task._id)">+</button></span>
        </li>
        <ul ng-repeat="subTask in subTasks" class="list-group-item list-group-item-action active" 
            style="margin-top: 10px;">
                <li>{{subTask.name}}</li>
                <li>{{subTask.description}}</li>
                <li>{{subTask.due_date}}</li>
        </ul>
    </ul>

你应该把它改成：

<ul ng-repeat="task in tasks" class="list-group-item list-group-item-action">
        <li class="list_style">
            <span>{{task.name}}</span><span>{{task.description}}</span>
            <span><button class="btn btn-danger" ng-click="remove(task._id)">Delete</button></span>
            <span><button class="btn btn-info" ng-click="edit(task._id)">Edit</button></span>
            <span><button class="btn btn-info" ng-click="addTask(task._id)">Add new task</button></span>
            <span><button class="btn btn-success" ng-click="showTasks(task._id)">+</button></span>
        </li>
        <li>
        <ul class="list-group-item list-group-item-action active" 
            style="margin-top: 10px;">
                <li ng-repeat="subTask in task.subTasks">
                {{subTask.name}}
                {{subTask.description}}
                {{subTask.due_date}}
                </li>
        </ul>
        </li>
    </ul>

你可以发送名为$index的angularjs的属性，它将为你提供与任务相关的当前索引并将其发送给函数在获得subTasks的响应后，您应该将其附加到正确的任务中：

$scope.tasks[i].subTasks = response.data;

在Angular js

1 个答案: