AngularJS - 使用 ng-repeat 创建无线电输入集 [英] AngularJS - Using ng-repeat to create sets of radio inputs
问题描述
我正在为未来的项目评估 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.
下面的工作示例有一组 32 个频道，其中可见的频道组是通过设置"和页面"无线电输入的组合来选择的，总共提供 2 * 4 个页面，每个页面 4 个频道.
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>
我的问题是如何使用 ng-repeat 创建页面/页面集无线电输入.我尝试过以下方法:
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>
看起来不错，但值没有绑定到相应的 pageSet/pageNumber 变量.谁能告诉我在这里缺少什么?
which looks right, but the values don't bind to the corresponding pageSet/pageNumber variables. Can anyone tell what I'm missing here?
推荐答案
ng-repeat 创建一个子作用域，所以你必须绑定到 $parent:
ng-repeat create a child scope, so you have to bind to the $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>
这篇关于AngularJS - 使用 ng-repeat 创建无线电输入集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
