使用 Angular 在 Ng-Click 上将新行推送到表格答案

【问题标题】：Push New Row to Table on Ng-Click with Angular使用 Angular 在 Ng-Click 上将新行推送到表格
【发布时间】：2014-12-04 18:20:55
【问题描述】：

如何通过 ng-click 将新行推送到表中？这就是我目前所拥有的。信息在一个数组中。

我的数组看起来像这样。

$scope.workflows = [{
                Id: 1,
                Name: "Workflow Page 1",
                Description: "Describe Workflow",
                Steps: [{
                    Id: 1,
                    Name: "name me",
                    Description: "describe me",
                    Action: "do something",
                    Obj: "whats the goal",
                    AdditionalInfo: "anything else",
                }, {
                    Id: 2,
                    Name: "name me",
                    Description: "describe me",
                    Action: "do something",
                    Obj: "whats the goal",
                    AdditionalInfo: "anything else",
                },
                ]},

          }, ];

这是我要添加到数组中的内容，以及我如何使用范围来尝试添加它。

$scope.addStep = function(newStep) {
   $scope.newStep = [{
          Id: 0,
          Name: "Step on THIS!",
          Description: "I dare ya!",
          Action: "STOMP!",
          Obj: "A Rock",
          AdditionalInfo: "I am bleeding...",
        }]

   $scope.workflows.push(newStep);
     alert("test :" + "Its GON WORK");

 };

然后在 HTML 中，我使用 ng-click 来激活 newStep 函数，希望它在我的表中创建一个新行。

<div class="text" ng-click="addStep(newStep)"> + Click to Add a New Step</div>

谢谢！

【问题讨论】：

使用 console.log 或 Angular 的 $log 进行调试，而不是使用 alert 进行调试。

标签： javascript arrays angularjs object push

【解决方案1】：

尝试将您的 ng-click 更改为：ng-click="addStep()"

然后在您的视图模型中：

    $scope.addStep = function() {
        //all the stuff you have currently

        $scope.workflows.push($scope.newStep); // line that changed
    };

【讨论】：

【解决方案2】：

以下方法将在第一个工作流的Steps 中添加一个新步骤。您可以在addStep 方法中传递工作流的$index 并用它替换0 以便能够在$index th 工作流中添加新步骤。

$scope.addStep = function() {
    $scope.newStep = {
      Id: 0,
      Name: "Step on THIS!",
      Description: "I dare ya!",
      Action: "STOMP!",
      Obj: "A Rock",
      AdditionalInfo: "I am bleeding...",
    };

    $scope.workflows[0].Steps.push($scope.newStep); // It will add a new step ($scope.newStep) in first workflow's Steps
};

<div class="text" ng-click="addStep()"> + Click to Add a New Step</div>

【讨论】：