Tab对象包含6个选项卡我想通过选择选项卡并在选定选项卡内分配表单数据来存储每个选项卡的数据。
我通过选定的标签实现并将表单数据分配到选定的标签中。如果选中tab6分配表单数据然后我选择了tab5将表单数据分配给提交表单上的tab5,则会出现问题。选项卡6上的数据不可见,但最后选择的选项卡值仅可见。
尝试过的代码:
<form>
<h4 id="numberOfTabsLabel">How many tabs you want to add</h4>
<select id="numberOfTabs" ng-model="tabProp.name" ng-options="item.id as item.name for item in items" ng-change="changeProp(tabProp.name)">
<option value="" selected>Select a Number</option>
</select>
<h4 id="numberOfTabsLabel4">You have selected <span id="no_of_tab">{{tabProperty}}</span> tabs. <br/>
<span class="asign"> Select the option to Assign tab properties</span></h4>
<select id="tabProperties" ng-model="tabContent">
<option value=" " selected>Select a Tab</option>
<option value="{{$index+1}}" ng-repeat="i in getNumber(tabProp.name)"><span>{{$index+1}}</span></option>
</select>
<span>Tab Heading:<input type="text" value="" ng-model="layoutObj.tab_name" size="40" id="tab_name" name="tab_name"></span>
<input type="button" ng-click="layoutSubmit($event, tabProp.name, tabContent, hooks)" value="save" size="40" id="{{0+tabContent}}" class="ibm-btn-pri ibm-btn-blue-50" name="first_name">
<script>
app.controller("mainCtrl", function($scope) {
$scope.items = [
{id: 1, name: '1'},
{id: 2,name: '2' },
{id: 3,name: '3' },
{id: 4,name: '4' },
{id: 5, name: '5'},
{id: 6,name: '6'}
];
$scope.changeProp = function(val) {
debugger;
$scope.tabProperty = val;
}
$scope.getNumber = function(n) {
debugger;
var tempArray = new Array(n);
console.log(n + "--" + tempArray);
return tempArray;
};
$scope.layoutSubmit = function(event, ntabs, ctab, nhooks, targethook) {
var layoutFormValues = $scope.layoutObj;
cTab = "tab" + ctab,
$scope[cTab] = {};
$scope.tabs = {};
for (var i = 1; i <= ntabs; i++) {
var tab = "tab" + i;
var tabs = "tab" + i;
$scope.tabs[tab] = $scope[tab];
}
$scope.tabs[cTab] = layoutFormValues;
$scope.proj = $scope.tabs;
console.log($scope.proj);
}
});
</script>
查看fiddle