AngularJS: Reverse 체크박스 상태

AngularJS: Reverse 체크박스 상태

으로 Angular를 ng-model부울을 지정하면 해당 부울이 참이면 체크박스가 켜지고 거짓이면 체크박스가 꺼집니다.

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

한 상태를, 「의와는 달리, 「」는 「ToDo」의 예이기 때문입니다.【ToDo】【ToDo】,todo.done 제 더 잘 어울려요.todo.incomplete.

불행히도 내 첫 번째 추측은 먹혀들지 않았다.

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

저는 모델이 지시받은 위치에 있기 때문에 변경할 수도 없고 클라이언트 상에서 모델을 마사지할 필요도 없습니다(클라이언트 오브젝트를 서버로 되돌리기 때문에 신뢰할 수 있는 환경에서 실행되고 있기 때문입니다).

갱신하다

이것은 1.3으로 동작하며 스트링을 제공하지 않습니다(1.2.xxx는 boulan 대신 스트링을 제공했습니다).

<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[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; });
    }
  };
});

이러한 사용자가 내장된 입력 Directive를 실행하도록 하려면 priority를 설정하거나 push가 아닌 unshift를 설정해야 할 수도 있습니다.

이것은 효과가 있는 것 같다.

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

, 이렇게 소개가 .video.checkedvideo.hidden확인란이 변경되면 값이 업데이트됩니다.

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

제 솔루션에서는 명령어 「negate」를 사용하고 있습니다.이 명령어를 「input」에 추가하기만 하면 됩니다.심플하고 컨트롤러를 변경할 필요가 없습니다.

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" >

이렇게 하면 상태를 끄면 확인란의 초기값이 false가 됩니다.양식을 제출할 때 이 체크박스를 끄면 반환되는 값(또는 콘솔)은 '정의되지 않음'이 아니라 false가 됩니다.그렇지 않으면 체크박스를 켜면 true가 됩니다.

true 또는 false 상태에 대한 사용자 지정 값을 추가하려면 다음을 사용할 수 있습니다.

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

그리고.

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

입력 요소 안에 있습니다.예를 들어 다음과 같습니다.

<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