2
基于所选选项动态生成单选按钮。接下来,如果用户选择单选按钮,则需要根据单选按钮值显示特定数量的表列。例如:如何根据单选按钮输入值显示表格列?
- 如果用户选择包含值3的单选按钮3,那么我需要在表中显示三列。
- 如果用户选择包含值2的单选按钮2,那么我需要在表格中显示2列。
- 如果用户选择单选按钮,那么我需要在表格中显示一列。
我该怎么做,请帮帮我。
我试过这段代码:
<div ng-controller="MyCtrl">
<div class="column1">
<input id="col1" name="radiogrp4" type="radio" class="ibm-styled-radio" value="1" ng-click="generateQuestionSection($event)"/>
<label for="col1">col1</label>
</div>
<div class="col2">
<input id="col2" name="radiogrp1" type="radio" value="2" ng-click="generateQuestionSection($event)"/>
<label for="col2">col2</label>
</div>
<div class="column3">
<input id="col3" name="radiogrp1" type="radio" value="3" ng-click="generateQuestionSection($event)"/>
<label for="col3">col3</label>
</div>
<table>
<tr ng-repeat="btn in createQueBtns">
<td>
<buton ng-click="showOverlay(btn.create);" style="background:#3de;padding:0px 2px;;margin:25px;">clickme</buton>
<!-- append dynamic button bellow after submiting form-->
<div ng-repeat="name in data[btn.create]">
<button ng-show="name.length > 0" ng-click='getUserDetails(name)'> {{name}}</button>
</div>
</div>
</td>
</tr>
</table>
<div ng-show="overlay" class="overlay">
<form>
<input type="text" ng-model="user.name" />
<input type="button" ng-click="sayName(user.name);" value="sayName"/>
</form>
</div>
脚本:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
//collection data
$scope.data = {};
$scope.sayName = function(data) {
$scope.data[$scope.selected] = $scope.data[$scope.selected] || [];
$scope.data[$scope.selected].push(data);
};
// get the data
$scope.getUserDetails = function(data) {
alert(data)
};
//creating buttons
$scope.createQueBtns = [{
"create": "createQueBtn1"
},
{
"create": "createQueBtn2"
},
{
"create": "createQueBtn3"
}
];
$scope.showOverlay = function(btn) {
$scope.selected = btn;
$scope.overlay = true;
}
$scope.generateQuestionSection = function(item) {
debugger;
var radioSelectedVal = item.currentTarget.getAttribute("value");
$scope.radioSelectedVal = parseInt(radioSelectedVal);
};
}
的jsfiddle链接:http://jsfiddle.net/wboxqqu0/10/
任何一个请帮助我。 –
我在jsfiddle中添加了代码,你可以查看http://jsfiddle.net/wboxqqu0/10/ –