Tuesday, 13 March 2018

Angular.js - toggle popup message with ng-click




<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<style type="text/css">
.popup{padding:10px;display:block;position:absolute;top:0;left:0;height:30px;width:200px;background:#efefef;}
</style>
<div class="content" ng-app="myApp" ng-controller="myCtrl">
    <div class="field">
        <button ng-click="inputdata=inputdata?false:true" style="margin-top:100px">Show Popup</button>
        <div ng-show="!inputdata" class="popup">
        pop successful.
        </div>
    </div>
</div>
<script>
var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function($scope) {
  $scope.inputdata = true;
});
</script>
</body>
</html>

No comments:

Post a Comment