如何还原对Angular Bind Form Field Array的更改?

时间:2014-12-24 17:55:33

标签: javascript arrays json angularjs parsing

当我单击“编辑”按钮时,它会弹出一个带有字段的表单,我想知道如何在“取消”按钮上设置ng-click,将表单中的数据重置为加载时的数据原来。

我认为我需要Parse / JSON.Stringify并重新启用它,但至于我怎么不确定它是什么样的。

这是我的HTML:

<div ng-show="showSteps==true">
                <h3>1. Steps for {{selectedWorkflow.Name}}</h3>
                <div>
                    <div class="steps" ng-repeat="step in selectedWorkflow.Steps track by $index" ng-model="selectedWorkflow.Step" ng-click="selectStep(step, $index); toggleShow('showSubStep'); toggleShow('showEditBtn')">
                        {{step.Name}}
                    </div>
                </div>
                <div style="margin-top: 10px; padding:0px">
                    <input class="buttonLeft" type="button" ng-click="addStep($index)" value="Add Step" />
                    <div ng-show="showEditBtn==true" style="margin-left:135px; margin-top:-34px">
                        <input class=" buttonRight" type="button" ng-click="toggleShow('showEditStep'); resetStep()" value="Edit" />
                    </div>
                </div>
                <div ng-show="showEditStep==true">
                    <div class="overlay" id="overlayId">
                        <div class="dim" id="dialog" title="Event">
                            <div class="popUpContainer">
                                <div class="backgroundBox" style="border-radius: 70px; margin-top: 20px">
                                <h3 style="margin-top: 40px; margin-left: 50px">Edit Step for: {{selectedWorkflow.Name}}</h3>
                                    <form style="margin-left:50px">
                                        <input class="textBox" type="text" ng-model="selectedStep.Name" placeholder="Step Name" required />
                                        <input class="textBox" type="text" ng-model="selectedStep.Description" placeholder="Step Description" />
                                        <select class="textBox" ng-model="selectedStep.Obj" ng-options="obj as obj for obj in ObjectOptions"></select>
                                        <select class="textBox" ng-model="selectedStep.Act" ng-options="act as act for act in ActionOptions"></select>
                                        <input class="textBox" type="text" ng-model="selectedStep.AdditionalInfo" placeholder="Step Action" />
                                        <input class="cancelBtn" type="button" ng-click="toggleShow('showEditStep'); toggleShow('showEditBtn')" value=" Save" />
                                        <input class="cancelBtn" type="button" ng-click="resetStep()" value=" cancel" />
                                        <input class="cancelBtn" type="button" ng-click="removeIt('', selectedWorkflow.Steps); toggleShow('showEditStep')" value="Delete" />
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

这是我尝试使用JNS的解析:

$scope.resetStep = function () {
            JSON.Parse(JSON.stringify($scope.selectedstep));
        };

这是我的JS。 进入以下形式的数组数据:

$scope.workflows = [{
            Id: 1,
            Name: "Type of Workflow",
            Description: "Describe the Workflow",
            Steps: [{
                Id: 1,
                Name: "Concept Paper Review",
                Description: "The concept paper listed below",
                Action: "Do thang",
                Obj: "",
                AdditionalInfo: "n/a",
                SubSteps: [{
                    Id: 1,
                    Name: "SubStep CP 1",
                    Description: "What a Great SubStep",
                    Action: "",
                    Obj: "",
                    AdditionalInfo: "Too much cheese",
                }, {
                    Id: 2,
                    Name: "SubStep CP 2",
                    Description: "What a Great SubStep",
                    Action: "",
                    Obj: "",
                    AdditionalInfo: "Too much cheese",
                }],
            }, {
                Id: 2,
                Name: " Cool THang In Progress",
                Description: "Looking good",
                Action: "Do thang",
                Obj: "n/a",
                AdditionalInfo: "n/a",
                SubSteps: [{
                    Id: 1,
                    Name: "SubStep FullApp 1",
                    Description: "What a Great SubStep",
                    Action: "",
                    Obj: "",
                    AdditionalInfo: "Too much cheese",
                }, {
                    Id: 2,
                    Name: "SubStep  FullApp 2",
                    Description: "What a Great SubStep",
                    Action: "",
                    Obj: "",
                    AdditionalInfo: "Too much cheese",
                }],
            },
            {
                Id: 3,
                Name: "Cool Thang Sent",
                Description: "Describe cool thang sent",
                Action: "Do something",
                Obj: "n/a",
                AdditionalInfo: "New thang submitted",
                SubSteps: [{
                    Id: 1,
                    Name: "SubStep Notify 1",
                    Description: "What a Great SubStep",
                    Action: "",
                    Obj: "",
                    AdditionalInfo: "Too much cheese",
                }, {
                    Id: 2,
                    Name: "SubStep Notify 2",
                    Description: "What a Great SubStep",
                    Action: "",
                    Obj: "",
                    AdditionalInfo: "Too much cheese",
                }],
            },
            ]
        },
        ];

         $scope.ActionOptions = [
        "Request Thang From",
        "Get Thang From",
        "Get Review From",
        "Get Thang from and Do Thang",
        "Move Thang To Next Home", 
        "Notify"
        ];

        $scope.ObjectOptions = [
        "John Goodman",
        "Tom Waits 4 Prez",
        "Senor Cardgage",
        "Jesse ",
        "Jon ",
        "Jacob",
        "Bill",
        "Masterchief",
        "Gangs 4 Glory - Group",
        "Terrible Tightwads - Group"
        ];

非常感谢!

0 个答案:

没有答案