728x90
반응형
질문 : AngularJS를 사용하여 확인란 값 목록에 어떻게 바인딩합니까?
몇 가지 확인란이 있습니다.
<input type='checkbox' value="apple" checked>
<input type='checkbox' value="orange">
<input type='checkbox' value="pear" checked>
<input type='checkbox' value="naartjie">
['apple', 'pear']
같이 선택된 모든 값의 목록을 유지하도록 컨트롤러의 목록에 바인딩하고 싶습니다.
ng-model은 하나의 확인란 값을 컨트롤러의 변수에 바인딩 할 수있는 것 같습니다.
컨트롤러의 목록에 네 개의 확인란을 바인딩 할 수있는 다른 방법이 있습니까?
답변
이 문제에 접근하는 방법에는 두 가지가 있습니다. 간단한 배열 또는 개체 배열을 사용하십시오. 각 솔루션에는 장단점이 있습니다. 아래에서 각 사례에 대해 하나씩 찾을 수 있습니다.
HTML은 다음과 같습니다.
<label ng-repeat="fruitName in fruits">
<input
type="checkbox"
name="selectedFruits[]"
value="{{fruitName}}"
ng-checked="selection.indexOf(fruitName) > -1"
ng-click="toggleSelection(fruitName)"
> {{fruitName}}
</label>
적절한 컨트롤러 코드는 다음과 같습니다.
app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {
// Fruits
$scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];
// Selected fruits
$scope.selection = ['apple', 'pear'];
// Toggle selection for a given fruit by name
$scope.toggleSelection = function toggleSelection(fruitName) {
var idx = $scope.selection.indexOf(fruitName);
// Is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// Is newly selected
else {
$scope.selection.push(fruitName);
}
};
}]);
장점 : 간단한 데이터 구조와 이름 별 토글 처리가 쉽습니다.
단점 : 두 개의 목록 (입력과 선택)을 관리해야하므로 추가 / 제거가 번거 롭습니다.
HTML은 다음과 같습니다.
<label ng-repeat="fruit in fruits">
<!--
- Use `value="{{fruit.name}}"` to give the input a real value, in case the form gets submitted
traditionally
- Use `ng-checked="fruit.selected"` to have the checkbox checked based on some angular expression
(no two-way-data-binding)
- Use `ng-model="fruit.selected"` to utilize two-way-data-binding. Note that `.selected`
is arbitrary. The property name could be anything and will be created on the object if not present.
-->
<input
type="checkbox"
name="selectedFruits[]"
value="{{fruit.name}}"
ng-model="fruit.selected"
> {{fruit.name}}
</label>
적절한 컨트롤러 코드는 다음과 같습니다.
app.controller('ObjectArrayCtrl', ['$scope', 'filterFilter', function ObjectArrayCtrl($scope, filterFilter) {
// Fruits
$scope.fruits = [
{ name: 'apple', selected: true },
{ name: 'orange', selected: false },
{ name: 'pear', selected: true },
{ name: 'naartjie', selected: false }
];
// Selected fruits
$scope.selection = [];
// Helper method to get selected fruits
$scope.selectedFruits = function selectedFruits() {
return filterFilter($scope.fruits, { selected: true });
};
// Watch fruits for changes
$scope.$watch('fruits|filter:{selected:true}', function (nv) {
$scope.selection = nv.map(function (fruit) {
return fruit.name;
});
}, true);
}]);
장점 : 추가 / 제거가 매우 쉽습니다.
단점 : 다소 복잡한 데이터 구조와 이름으로 전환하는 것이 번거 롭거나 도우미 메서드가 필요합니다.
데모 : http://jsbin.com/ImAqUC/1/
출처 : https://stackoverflow.com/questions/14514461/how-do-i-bind-to-list-of-checkbox-values-with-angularjs
728x90
반응형
'프로그래밍 언어 > HTML,CSS,JS' 카테고리의 다른 글
각각 offsetWidth, clientWidth, scrollWidth 및 -Height 이해 (0) | 2021.07.22 |
---|---|
CodeMash 2012의 'Wat'강연에서 언급 된 JavaScript 동작에 대한 설명 (0) | 2021.07.22 |
VanillaJS가 무엇인지에 대해서 (0) | 2021.07.22 |
IMG와 CSS 배경 이미지의 적절한 사용시기 (0) | 2021.07.22 |
XML에서 '&'를 이스케이프하여 HTML에서 엔티티로 렌더링하는 방법 (0) | 2021.07.21 |