当我单击“编辑”按钮时,它会弹出一个带有字段的表单,我想知道如何在“取消”按钮上设置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"
];
非常感谢!