AngularJS : 체크 박스 상태 반전

AngularJS : 체크 박스 상태 반전

---

어쨌든 Angular의 마법을 통해 ng-model부울 을 사용 하고 제공하면 부울이 참이면 확인란이 선택되고 거짓이면 선택 취소됩니다.

<input type="checkbox" ng-model="video.hidden">

이것만으로도 상당히 당황 스럽지만 실제로 체크 된 상태를 되돌리려 고합니다. 왜냐하면 todo.done상자가 체크 되는 것을 의미하는 todo 예제와 달리 내 모델은 todo.incomplete.

불행히도 내 첫 번째 추측은 작동하지 않았습니다.

<input type="checkbox" ng-model="!video.hidden">

나는 모델이 내게 지시 된 위치에 있으므로 변경할 수 없으며 클라이언트에서 마사지 할 필요가 없습니다 (클라이언트 개체를 서버로 다시 보내기 때문입니다. 신뢰할 수있는 환경에서 실행).

최신 정보

이것은 1.3에서 작동하며 문자열을 제공하지 않습니다 (1.2.xxx는 부울 대신 문자열을 제공했습니다).

<input type="checkbox" ng-model="video.hidden" ng-true-value="false" ng-false-value="true">

---

사용자 지정 지시문, 각도 지원 ng-true-value및ng-false-value

https://docs.angularjs.org/api/ng/input/input [체크 박스]

당신의 예는 지금 작동합니다 <input type="checkbox" ng-model="video.hidden" ng-true-value="false" ng-false-value="true">

---

순전히 템플릿에서이 작업을 수행하는 방법이 없다고 생각합니다. 이를 수행하는 가장 확실한 방법은 모델 값에 수동으로 이중 바인딩되는 새 범위 변수를 만드는 것입니다. 그처럼:

<input type="checkbox" ng-model="videoShowing">

그리고 컨트롤러에서 :

$scope.videoShowing = !$scope.video.hidden;

$scope.$watch('video.hidden', function(value) {
  $scope.videoShowing = !value;
});
$scope.$watch('videoShowing', function(value) {
  $scope.video.hidden = !value;
}

ng-change와 함께 단방향 바인딩을 거의 사용할 수 있지만 제대로 작동하지 않습니다.

<input type="checkbox" ng-checked="!video.hidden" ng-change="???">

ng-change는 현재 값을 로컬 범위에 전혀 혼합하지 않기 때문입니다. NgModelController에 대한 액세스 권한이있는 컨텍스트에 있다면 뭔가를 할 수 있지만이를위한 사용자 지정 지시문이 필요합니다. NgModel의 포맷터와 파서를 수정하는 "반전 된"속성 지시문을 만드는 것은 어렵지 않을 것입니다. 거꾸로 된 확인란이 많이 필요한 경우 제안합니다.

편집하다

후손에게 "반전 된"속성을 만드는 것은 매우 간단합니다. 지시문을 만드는 것은 처음에는 항상 고통스러워 보이지만 실제로는 Angular 방식입니다.

someModule.directive('inverted', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(val) { return !val; });
      ngModel.$formatters.push(function(val) { return !val; });
    }
  };
});

이 사람들이 내장 inputDirective 이후에 실행되도록하기 위해 우선 순위도 설정하거나 push 대신 "unshift"를 설정해야 할 수도 있습니다.

---

이것은 작동하는 것 같습니다

<input  type="checkbox" 
        ng-init = "video.checked = !video.hidden"
        ng-model ="video.checked"
        ng-change ="video.hidden = !video.checked"/>

video.checked반대의 속성을 도입 video.hidden하고 체크 박스가 변경되는 즉시 값이 업데이트됩니다.

예 : http://plnkr.co/edit/7HYht6ubkUUJQ0r3g16m?p=preview

---

내 솔루션은 "input"에 추가하는 "negate"지시문을 사용합니다. 간단하고 컨트롤러를 변경할 필요가 없습니다.

angular
    .module("<< your module >>")
    .directive('negate', [
        function () {
            return {
                require: 'ngModel',
                link: function (scope, element, attribute, ngModelController) {
                    ngModelController.$isEmpty = function(value) {
                        return !!value;
                    };

                    ngModelController.$formatters.unshift(function (value) {
                        return !value;
                    });

                    ngModelController.$parsers.unshift(function (value) {
                        return !value;
                    });
                }
            };
        }
    ]
);

다음과 같이 사용하십시오.

<input type="checkbox" negate ng-model="entity.nologin">

---

내 솔루션은 매우 간단합니다. ng-true-value / ng-false-value를 사용 하고 false를 ng-true-value로 설정하고 true를 ng-false-value로 설정하면 기능이 반전됩니다.

<input type="checkbox" ng-model="<<-- Your Model -->> " ng-true-value="false"
            ng-false-value="true">

---

확인란에 대해 선택되거나 선택되지 않은 값을 얻는 가장 간단한 해결책은 다음과 같이 확인란 입력 요소 내에 ng-init 지시문을 추가하는 것입니다.

<input type="checkbox" ng-init="video = false" ng-model="video" >

This enables the initial value of the checkbox to be false, were the state is unchecked. On submitting the form, if the checkbox is unchecked the value that returns (or console) will be false, instead of 'undefined', else upon checking it will be true.

if you want to add custom made values for the true or false state, you can use:

ng-true-value="'custom_true value'"

and

ng-false-value="'custom_false value'"

inside the input element. like :

<input type="checkbox" ng-init="video = false" ng-model="video" ng-true-value="'custom_true value'" ng-false-value="'custom_false value'">

참고URL : https://stackoverflow.com/questions/13925462/angularjs-reverse-checkbox-state