AngularJS – 使用ng-repeat创build一组无线电input
我正在评估未来项目的angularjs。 我需要做的事情之一是通过select适当的“页面”无线电input来显示“频道”信息的不同页面。 此外，还可以从一组“页面集”无线电input中select页面button的范围。
下面的工作示例具有一组32个通道，其中通过“设置”和“页面”无线电input的组合来select可见的通道组，总共2 * 4页，每个通道4个通道。
<!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> 我的问题是如何使用ng-repeat创build页面/页面设置无线电input。 我尝试过的方法如：
<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>
这看起来是正确的，但值不绑定到相应的pageSet / pageNumbervariables。 任何人都可以告诉我在这里失踪？
ng-repeat创build一个子范围，所以你必须绑定到$ parent：
这是一个小提琴： http : //jsfiddle.net/g/r9MLe/2/
样品：
<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>
刚刚使用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>
从数据来看：
vm.verifications = [ { "label" : "Valid last line (USPS only)", "value" : "vll", "type" : "optional" }, { "label" : "Domestic recipient", "value" : "dr", "type" : "optional" }, ];
这是一个简单的例子。 希望一切都清楚。
单选button中的参数name是强制的（用于从组中select一个button）。
HTML：
<form name="myForm" ng-controller="MyCtrl"> <p>Favorite Beatle</p> <ul> <li ng-repeat="person in people"> <label> <input type="radio" ng-model="$parent.name" name="name" value="{{person.name}}" required />{{person.name}} </label> </li> </ul> <p><tt>myForm.$invalid: {{myForm.$invalid}}</tt></p> <button ng-disabled="myForm.$invalid">Submit</button> </form>
使用Javascript：
function MyCtrl($scope) { $scope.people = [{ name: "John" }, { name: "Paul" }, { name: "George" }, { name: "Ringo" }]; }
