ラジオボタンの入力値に基づいてテーブルの列を表示する方法は？

Question

ラジオボタンは、選択したオプションに基づいて動的に生成されます。次に、ユーザーがラジオボタンの値に基づいてラジオボタンを選択した場合、特定の数の表の列が表示される必要があります。例：

• ユーザが値3を含むラジオボタン3を選択した場合、テーブルに3つの列を表示する必要があります。
• ユーザが値2を含むラジオボタン2を選択した場合、テーブルに2つの列を表示する必要があります。
• ユーザがラジオボタンを選択した場合、テーブルに1つの列を表示する必要があります。

どうすればいいですか？

私はこのコードを試してみました：

<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>