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

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;
}]);
 
posted @ 2017-07-05 09:50  miny_simp  阅读(2215)  评论(0)    收藏  举报