Question

我尝试创建一个通过角度构建的ToDoList应用程序，仅用于一些练习。

我的工作是什么：

可以添加/删除ToDos
获取SubItem面板以显示

我还没有工作：

苦苦思索如何添加子项目。这就是我尝试过的：

<head>
<title>ToDo</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/Controllers/ToDoController.js"></script>
 </head>

    <form>
        <div class="input-group">
            <input type="text" class="form-control" id="toDoItem" placeholder="Enter your To-Do" ng-model="toDo"/>
            <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="addToDo()">Add To Do</button>
            </span>
        </div>
    </form>
    <ul class="list-group">
        <li class="list-group-item" style="margin-top: 5px;" ng-repeat="x in toDoArray track by $index">
            <p>{{x}}</p>
            <button type="button" class="btn btn-danger" ng-click="removeToDo($index)">Remove To Do</button>
            <button type="button" class="btn btn-danger" ng-click="showSubItem()">SubItem</button>
            <div id="subItemPanel" class="panel panel-default" style="margin-top: 5px;" hidden>
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-default" ng-click="addSubItem($index)" type="button">Go!</button>
                    </span>
                </div>
            </div>
            <li class="list-group-item" style="margin-top: 5px;" ng-repeat="subItem in x ">
                <p>{{subItem}}</p>
            </li>
        </li>
     </ul>
 </div>
 </div>
<script>

 var app = angular.module('myApp', []);

 app.controller('myCtrl',
    function($scope) {
        $scope.toDo = "";
        $scope.toDo.subItem = [];
        $scope.toDoSubItem = "";


        $scope.clicked = false;
        $scope.toDoArray = [];

        $scope.showSubItem = function(toDoIndex) {
            $("#subItemPanel").show();
        }

        $scope.addSubItem = function(toDoIndex) {
            $scope.toDoArray[toDoIndex].subItem.push($scope.toDoSubItem);
        }

        $scope.removeToDo = function (toDoItem) {
            $scope.toDoArray.splice(toDoItem, 1);
        }

        $scope.addToDo = function () {
            $scope.clicked = true;
            $scope.toDoArray.push($scope.toDo);
        }
    });
</script>

我在推送subItem属性方面遇到了问题，我有点期待，但不知道从哪里开始。

创建模型的子项

0 个答案: