반응형
AngularJS-ng-repeat를 사용하여 라디오 입력 세트 생성
향후 프로젝트를 위해 angularjs를 평가하고 있습니다. 내가해야 할 일 중 하나는 적절한 "페이지"라디오 입력을 선택하여 "채널"정보의 다른 페이지를 표시하는 것입니다. 또한, 페이지 버튼의 범위는 "페이지 세트"라디오 입력 그룹에서 선택할 수도 있습니다.
아래의 작업 예에는 "set"및 "page"라디오 입력의 조합을 통해 선택되는 가시적 채널 그룹이있는 32 개의 채널 세트가 있으며 각각 4 개 채널의 총 2 * 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 변수에 바인딩되지 않습니다. 아무도 내가 여기서 놓친 것을 말할 수 있습니까?
ng-repeat는 자식 범위를 생성하므로 $ 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>
자바 스크립트 :
function MyCtrl($scope) {
$scope.people = [{
name: "John"
}, {
name: "Paul"
}, {
name: "George"
}, {
name: "Ringo"
}];
}
반응형
'IT박스' 카테고리의 다른 글
| C ++에 암시 적 기본 생성자가 있습니까? (0) | 2020.11.26 |
|---|---|
| 인터페이스의 모든 구현을 어떻게 찾습니까? (0) | 2020.11.26 |
| JavaScript를 사용하여 X 초 대기 후 페이지 리디렉션 (0) | 2020.11.26 |
| int main ()은 C ++에 대한 선언이 필요합니까? (0) | 2020.11.26 |
| asp.net MVC에서 LabelFor Helper를 사용하지 않고 DisplayName 속성 가져 오기 (0) | 2020.11.26 |