Как вставить новую строку в таблицу через angularjs?

0

Я хочу вставить новую строку в таблицу через окно диалога. Это окно имеет форму и кнопку " Добавить задачу", чтобы вставить новую строку в таблицу. Я пытаюсь все, но не могу подключить ng-модель этого диалога к таблице.

См. Демонстрацию:

index.html

<html>

<head>
<title>ToDo API Client Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="tasksCtrl">
  <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" href="#">ToDo API Client Demo</a>
        </div>
  </div>
  <div>

         <table class="table table-striped">
             <tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
            <tr ng-repeat="task in tasks">

            <td>{{task.title}}</td>
            <td>{{task.description}}</td>
            <td>  <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a></td>
                <td>  <a class="btn" data-toggle="modal" data-ng-click="removeRow(task)">Delete</a></td>


            </tr>
         </table>

            <a class="btn" data-toggle="modal" data-target="#add" ng-click="editTask(task)">Add Task</a>
  </div>
  <div id="modal" role="dialog" class="modal hide fade">
        <div>
            <div class="modal-header">
                Task Dialog
            </div>
            <div class="modal-body">
                <label for="txtName"></label> 
                <input type="text"  ng-model="selectedTask.title" />
                <input type="text"  ng-model="selectedTask.description" />
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
            </div>
        </div>
   </div>

   <div id="add" class="modal hide fade" tabindex="=1" role="dialog" aria-labelledby="addDialogLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="addDialogLabel">Add Task</h3>
        </div>
        <div class="modal-body">
            <form class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" for="inputTask">Task</label>
                    <div class="controls">
                        <input type="text" id="inputTask" ng-model="task1" placeholder="Task title" style="width: 150px;"><br />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputDescription">Description</label>
                    <div class="controls">
                        <input type="text" id="inputDescription" ng-model="description1" placeholder="Description" style="width: 300px;">
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer"> 
            <a class="btn btn-primary" data-toggle="modal" ng-click="addNewTask()">Add Task</a>
            <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        </div>
    </div>


   <script>
    var app = angular.module('myApp', []);
    app.controller('tasksCtrl', function($scope, $http) {
        $http.get("data.json")
        //$http.get("/todo/api/v1.0/tasks")
        .success(function(response) {
          console.log(response.tasks)
          $scope.tasks = response.tasks;
        });

        $scope.editTask=function(task) {
            $scope.selectedTask = task;
        };
        $scope.removeRow = function (task) {
            $scope.tasks.splice(task, 1);
        };
        $scope.addNewTask=function(){
            //$scope.tasks.push({$scope.task1, $scope.description1});
        }
    });


  </script>
</body>

</html>
Теги:

2 ответа

1

В вашей функции AddNewTask вы передаете неправильный объект:

 $scope.addNewTask=function(){
      $scope.tasks.push({$scope.task1, $scope.description1});
 }

Должно быть

$scope.addNewTask=function(){
     $scope.tasks.push({title : $scope.task1, description : $scope.description1});
 }

Вы пропустили ключи объекта.

Поделиться
0

Вы не добавляли действительную карту в массив задач.

Поскольку вы получаете доступ к task.title и task.description, они должны быть действительными полями на карте /JSON. Первоначально это входит в формате JSON, где:

{
    key: value,
    key: value,
    ...
}

Поэтому для ваших данных вы пытались сделать:

       $scope.tasks.push({$scope.task1, $scope.description1});

Но так как нет ключа для задачи или описания, данные могут понять, так что вам нужно следующее:

 $scope.addNewTask=function(){
       $scope.tasks.push({"title":$scope.task1, "description":$scope.description1});
    }

Я не уверен, ответил ли другой человек на это. Я был задержан в публикации моего ответа.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню