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

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

Please see the demo:

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>

источник

2015-07-02 geeks

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

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

Должно быть

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

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

источник

2015-07-02 16:22:50 Sacreyoule

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

Поскольку вы получаете доступ к 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}); 
    }

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

источник

2015-07-02 17:31:22 user3727843

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

ответ

Смежные вопросы