angularjs怎么做动jq中toggle （ng-toggle in AngularJS ）

最新推荐文章于 2024-06-09 09:59:19 发布

weixin_30617561

最新推荐文章于 2024-06-09 09:59:19 发布

阅读量180

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/miny-simp/p/7119680.html

版权

With jQuery Demo

HTML:

<body>
    <button>Custom</button>
    <span>From:
        <input type="text" id="from" />
    </span>
    <span>To:
        <input type="text" id="to" />
    </span>
</body>

CSS:

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

JS:

$("button").on("click", function () {
    $("span").toggleClass("show");
});

With AngularJS Demo

Method one

HTML:

<body ng-app="ngToggle">
    <div ng-controller="AppCtrl">
        <button ng-click="toggleCustom()">Custom</button>
        <span ng-hide="custom">From:
            <input type="text" id="from" />
        </span>
        <span ng-hide="custom">To:
            <input type="text" id="to" />
        </span>
        <span ng-show="custom"></span>
    </div>
</body>

JS:

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

Method two

HTML:

<body ng-app="ngToggle">
    <div ng-controller="AppCtrl">
        <button ng-click="custom=!custom">Custom</button>
        <span ng-hide="custom">From:
            <input type="text" id="from" />
        </span>
        <span ng-hide="custom">To:
            <input type="text" id="to" />
        </span>
        <span ng-show="custom"></span>
    </div>
</body>

JS:

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

转载于:https://www.cnblogs.com/miny-simp/p/7119680.html

weixin_30617561

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫