AngularJs中的ng-toggle

切换状态在前端开发中很常见，现在流行的网站中好多都用到了toggle。大多数的时候，我们需要实现点击一个元素（一个按钮），使得另一个DOM元素显示和隐藏。根据这种业务需求，我相信有很多种方法来实现。在这篇文章中，我将分享几个用JQuery和AngularJs实现它的技巧。

一、用JQuey实现

HTML：

    Custom
    From:
        
    
    To:
        
    

CSS:

span {
    display: none;
}
.show {
    display: inline-block;
}

JS:

$("button").on("click", function () {
    var state = $(this).data('state');
    state = !state;
    if (state) {
        $("span").addClass("show");
    } else {
        $("span").removeClass("show");
    }
    $(this).data('state', state);
});

当我们来到AngularJs的世界，我们会发现它与JQuery实现非常不同而且有趣。当然，有很多种不同的方法实现它。下面是我用AngularJs实现ng-toggle的小技巧。
二、用AngularJs实现

HTML:

    

        Custom
        From:
            
        
        To:
            
        
        
    

JS:

angular.module('ngToggle', [])
    .controller('AppCtrl',['$scope', function($scope){
        $scope.custom = true;
        $scope.toggleCustom = function() {
            $scope.custom = $scope.custom === false ? true: false;
        };
}]);

原文地址：http://geniuscarrier.com/ng-toggle-in-angularjs/