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

时间:2014-12-04 18:20:55

标签: javascript arrays angularjs object push

如何通过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>

谢谢!

2 个答案:

答案 0 :(得分:0)

尝试将ng-click更改为:ng-click =“addStep()”

然后在你的viewmodel中:

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

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

答案 1 :(得分:0)

下面的方法将在第一个工作流Steps中添加一个新步骤。您可以在$index方法中传递工作流程addStep,并将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> 工作流程中添加新步骤。

{{1}}