Ng-Mouseup-5

In this example of Ng-Mouseup, We have a button with ng-mouseup and ng-mouseleave, Which will show the price on clicking it. See the code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style type="text/css">
    .price {
        border: 1px solid black;
        width: 149px;
        margin-left: 84px;
        margin-top: -35px;
        background-color: steelblue;
        border-radius: 4px;
        height: 22px;
        color: white;
    }
</style>
</head>
<body ng-app="">
    <div ng-init="tooltip=false">
        <br />
        <br />
        <p>Mouse up to show price</p>
        <button ng-mouseup="price=true" ng-mouseleave="price=false">
            Show Price
        </button>
        <div class="price" ng-show="price">Price : $230.00</div>
    </div>
</body>
</html>

Output