如何根據單選按鈕輸入值顯示錶格列？

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>