AngularJS - Используя ng-повторение для создания наборов радио-исходных данных
Я оцениваю angularjs для будущего проекта. Одна из вещей, которые я должен буду сделать, отобразить различные страницы информации "о канале" путем выбора соответствующего входа радио "страницы". Кроме того, диапазоны кнопок страницы могут также быть выбраны из группы "исходных данных радио" набора страницы.
Рабочий пример ниже имеет ряд 32 каналов с видимой группой каналов, выбираемых через комбинацию исходных данных радио "набора" и "страницы", давая в общей сложности 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. Я попробовал подходы, такие как:
<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 переменными. Кто-либо может сказать то, что я пропускаю здесь?
3 ответа
ng-повторение создает дочерний объем, таким образом, необходимо связать с $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"
},
];
Это - простой пример. Надежда все ясно.
Параметр name обязателен в переключателе (для проверки способности одна кнопка от группы).
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"
}];
}