Question

根据所选选项动态生成单选按钮。接下来，如果用户选择单选按钮，则基于单选按钮值，需要显示特定数量的表列。例如：

如果用户选择包含值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/

Answer 1

您可以使用ng-repeat limitto过滤器来实现您想要的效果，请在下面的代码段中找到更多信息，同时您还可以找到this更新的小提琴

有关limitTo的更多信息，请参阅此documentation

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);
        
    };
}

.liked {
  color: green;
}
.overlay{
  box-shadow:1px 1px 10px 10px #cd4;
  padding:10px;
  magin:10px;
}
.disliked {
  color: red;
}
table tr td{
border:1px solid #ccc;padding:5px;margin:5px;
}

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="column1">
<input id="col1" name="radiogrp1" 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  | limitTo: radioSelectedVal">
    <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>
    </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>

如何根据单选按钮输入值显示表列？

1 个答案: