Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS - Using ng-repeat to create sets of radio inputs

Tags:

angularjs

I'm evaluating angularjs for a future project. One of the things I will need to do is display different pages of "channel" information by selecting an appropriate "page" radio input. Furthermore, ranges of page buttons may also be selected from a group of "page set" radio inputs.

The working example below has a set of 32 channels with the visible group of channels being selected via a combination of "set" and "page" radio inputs, giving a total of 2 * 4 pages of 4 channels each.

<!doctype html> <html ng-app>   <head>     <script type="text/javascript" src="angular.js"></script>     <script type="text/javascript">       function Channels($scope) {         $scope.groupSize = 4;         $scope.pageSet = 0;         $scope.pageNumber = 0;         $scope.channels = [           {"id": "Ch-001"}, {"id": "Ch-002"}, {"id": "Ch-003"}, {"id": "Ch-004"},           {"id": "Ch-005"}, {"id": "Ch-006"}, {"id": "Ch-007"}, {"id": "Ch-008"},           {"id": "Ch-009"}, {"id": "Ch-010"}, {"id": "Ch-011"}, {"id": "Ch-012"},           {"id": "Ch-013"}, {"id": "Ch-014"}, {"id": "Ch-015"}, {"id": "Ch-016"},           {"id": "Ch-017"}, {"id": "Ch-018"}, {"id": "Ch-019"}, {"id": "Ch-020"},           {"id": "Ch-021"}, {"id": "Ch-022"}, {"id": "Ch-023"}, {"id": "Ch-024"},           {"id": "Ch-025"}, {"id": "Ch-026"}, {"id": "Ch-027"}, {"id": "Ch-028"},           {"id": "Ch-029"}, {"id": "Ch-030"}, {"id": "Ch-031"}, {"id": "Ch-032"}         ];       }     </script>   </head>    <body ng-controller="Channels">     <p>Set:       <input type="radio" name="pageSet" ng-model="pageSet" ng-value="0">1-4</input>       <input type="radio" name="pageSet" ng-model="pageSet" ng-value="1">5-8</input>     </p>     <p>Page:       <input type="radio" name="pageNumber" ng-model="pageNumber" ng-value="0">{{pageSet * groupSize + 1}}</input>       <input type="radio" name="pageNumber" ng-model="pageNumber" ng-value="1">{{pageSet * groupSize + 2}}</input>       <input type="radio" name="pageNumber" ng-model="pageNumber" ng-value="2">{{pageSet * groupSize + 3}}</input>       <input type="radio" name="pageNumber" ng-model="pageNumber" ng-value="3">{{pageSet * groupSize + 4}}</input>     </p>     <ul>       <li ng-repeat="channel in channels | limitTo: groupSize * ((groupSize * pageSet) + pageNumber + 1) | limitTo: -groupSize">         <p>{{channel.id}}</p>       </li>     </ul>   </body> </html> 

My question is how to create the page/page set radio inputs using ng-repeat. I've tried approaches such as:

<p>Set: <input ng-repeat="n in [0,1]" type="radio" name="pageSet" ng-model="pageSet" ng-value="{{n}}"></p> <p>Page: <input ng-repeat="n in [0,1,2,3]" type="radio" name="pageNumber" ng-model="pageNumber" ng-value="{{n}}"></p> 

which looks right, but the values don't bind to the corresponding pageSet/pageNumber variables. Can anyone tell what I'm missing here?

like image 732
SimonSparks Avatar asked Feb 08 '13 15:02

SimonSparks


2 Answers

ng-repeat create a child scope, so you have to bind to the $parent:

Here's a fiddle: http://jsfiddle.net/g/r9MLe/2/

Sample:

  <p>Set:          <label ng-repeat="n in [0,1]">        <input type="radio" name="pageSet" ng-model="$parent.pageSet" ng-value="n" />{{n}}          </label>      </p>      <p>Page:           <label ng-repeat="n in [0,1,2,3]">          <input type="radio" name="pageNumber" ng-model="$parent.pageNumber" ng-value="n" /> {{n}}          </label>      </p> 
like image 161
Guillaume86 Avatar answered Oct 22 '22 00:10

Guillaume86


What's wrong with just using a value from the JSON?

       <table>           <tr ng-repeat="v in partneradd.verifications">             <td>{{v.label}}</td>             <td>               <div class="radio-inline">                 <label>                   <input type="radio" name="{{v.value}}" value="required"> Required                 </label>               </div>             </td>             <td>               <div class="radio-inline">                 <label>                   <input type="radio" name="{{v.value}}" value="optional"> Optional                 </label>               </div>             </td>           </tr>         </table> 

from the data:

vm.verifications = [ {   "label" : "Valid last line (USPS only)",   "value" : "vll",   "type" : "optional" }, {   "label" : "Domestic recipient",   "value" : "dr",   "type" : "optional" }, ]; 
like image 27
Steve Avatar answered Oct 21 '22 23:10

Steve