체크 박스가 선택되었는지 여부에 따라 데이터를 바인딩하는 방법은 무엇입니까?

Question

그냥, 내가 GET 요청시 전송받을하는 매개 변수를 결정하기 위해 체크 박스를 사용하고 각도에 시작 (이것은 나의 시도) :

<input type="checkbox" ng-click="submit('color[]', 'red')"/> 
<input type="checkbox" ng-click="submit('color[]', 'green')" checked/> 
<input type="checkbox" ng-click="submit('color[]', 'blue')"/> 

내 HTTP GET의 매개 변수를 저장하는 변수 $scope.params이 의뢰. 제출 내 기능은 매우 간단합니다 :

는

$scope.submit = function (attribute, value) { 
    $scope.params[attribute] = value; 
}; 

그것은 단순히 params 객체에 color[]를 추가합니다. 라디오와 달리 체크 박스 값은 배열로 저장되어 다음과 같이 제출 될 수 있습니다 : api?color[]=red&color[]=green 백엔드가 PHP이므로 이것이 선호되는 형식입니다. 그러나 내 제출 기능은 매번이 내용을 덮어 씁니다. 동일한 "키"로 여러 매개 변수를 저장하는 방법을 잘 모르겠습니다.

다른 문제는 ng-click이이 체크 박스의 현재 상태를 반영하지 않기 때문에이 작업에 적합하지 않다는 것입니다. 내 초록색 체크 박스는 처음에 선택 상태로로드됩니다. 이것을 내 $scope.params 객체에 바인딩하는 방법이 있습니까? 아래 세미콜론의 대답에 따르면, 내가 사용할 수 있습니다

$scope.params = { 
    "color[]" = ['red', 'green', 'blue'] 
}; 

:

이

<input type="checkbox" ng-model="params.colors[]" ng-true-value="'red'"/> 
<input type="checkbox" ng-model="params.colors[]" ng-true-value="'blue'"/> 
<input type="checkbox" ng-model="params.colors[]" ng-true-value="'green'"/> 

그러나 "[]"에 어떤 이름을 지정하는 것은 단지 코드를 나누기

이상적으로 내가 좋아하는 뭔가를 구현하고자합니다.

Answer 1

모든 입력 요소와 마찬가지로 확인란은 ng-model으로 지원됩니다. 이 핵심 지시어는 ng-bind의 사촌입니다. 그것은 "이 요소의 상태는이 모델을 나타냅니다"라고 말합니다. 그것의 행동은 입력 유형에 의해 결정됩니다. 체크 박스의 경우, 체크 박스는 근본적으로 "부울"입력 (선택/선택 취소 == 참/거짓)이므로 모델링하는 값은 일반적으로 부울 값이됩니다. 컨트롤러 기능에서

<input type="checkbox" ng-model="colors.red"/> 

:

$scope.colors = { 
    red: false, 
    green: true, 
    blue: false 
}; 

사실이 ng-true-value 및 ng-false-value를 사용하여, 너무 비 부울 값/확인되지 않은 매핑 할 수 있습니다.

https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

ng-bind과 ng-model 사이의 핵심적인 차이는 전자는 단방향입니다 (다만보기)이고, 후자는 양방향 : 당신은 각 문서에 체크 박스와 ng-model 이러한 및 기타 옵션에 대한 자세한 내용을보실 수 있습니다 (요소를 사용하여 모델을 변경할 수 있음).

각도에서 MVC의 전제에 대한 좀 더 일반적인 대답

: 당신의 질문의 예에서

, 당신은보기와 컨트롤러 사이의 바인딩 달성하려고하는 jQuery를 같은 솔루션을 사용하고 있었다. 이것은 실제로 이상적이지 않습니다. "클릭 할 때"무언가를하는 데 특별히 관심이있을 때만 이벤트를 클릭하는 함수를 바인딩하십시오.

사용자가 탭 키와 스페이스 바를 사용하여 상자를 선택하면 어떻게됩니까? 모델이 업데이트되지 않습니다.

다른 모델의 값을 변경하고 싶다면 어쩌면 원래 값으로 되돌릴 수있는 "재설정"버튼이있을 수 있습니다. 보기가 업데이트되지 않습니다.

보기와 모델 간의 연결이 모두 "작업"을 통해 이루어지는 경우 동기화가 불가능하기 쉽습니다. 사용자가 요소와 상호 작용할 수있는 모든 가능한 방법을 처리했는지 확인해야하며 프로그래밍 방식으로 데이터를 변경할 때마다 변경 내용을 명시 적으로보기로 푸시해야합니다. 그러나 ng-model 및 ng-bind을 사용하면 모델이 변경된 위치 또는 사용자 상호 작용 방식에 상관없이 동기화 상태를 유지할 수 있습니다. 실제로 이것은 Angular의 주요 포인트입니다.