当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - How Can Revert Changed Made to a Angular Binded Form Field Array?

问题描述:

When I click an "Edit" button it brings up a form with fields and I'm wondering how to set an ng-click on a "Cancel" button that resets the data in the form back to what was when it loaded initially.

I think I need to Parse/JSON.Stringify it and bring it back in, but as to how I'm not sure what it looks like.

Here's my 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>

This is the what I tried with the Parsing of JSON:

$scope.resetStep = function () {

JSON.Parse(JSON.stringify($scope.selectedstep));

};

This is my JS.

Array data that goes into the form:

$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"

];

Thanks so much!

分享给朋友:
您可能感兴趣的文章:
随机阅读: