jube-fork/Jube.App/wwwroot/kendo/examples/maskedtextbox/angular.html

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/angular.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
        <div id="example" ng-app="KendoDemos">
        <div class="demo-section k-content" ng-controller="MyCtrl">
            <ul id="fieldlist">
              <li>
                <label>Phone number:</label>
                  <input kendo-masked-text-box ng-model="phone"
                         k-mask="'(999) 000-0000'" />
                <div class="value">Value: {{phone}}</div>
              </li>
              <li>
                <label>Credit Card number:</label>
                  <input kendo-masked-text-box ng-model="cc"
                         k-mask="'0000 0000 0000 0000'" />
                <div class="value">Value: {{cc}}</div>
              </li>
              <li>
                <label>Social security number:</label>
                  <input kendo-masked-text-box ng-model="ssn"
                         k-mask="'000-00-0000'" />
                <div class="value">Value: {{ssn}}</div>
              </li>
              <li>
                <label>UK postcode:</label>
                  <input kendo-masked-text-box ng-model="post"
                         k-mask="'L0L 0LL'" />
                <div class="value">Value: {{post}}</div>
              </li>
            </ul>
        </div>
        <style>
            #fieldlist {
                margin: 0 0 -2em;
                padding: 0;
            }
    
            #fieldlist li {
                list-style: none;
                padding-bottom: 2em;
            }
    
            #fieldlist label {
                display: block;
                padding-bottom: 1em;
                font-weight: bold;
                text-transform: uppercase;
                font-size: 12px;
                color: #444;
            }
    
            #fieldlist input {
                width: 100%;
            }
            .value {
                padding: .5em 0 0;
                font-size: 12px;
            }
        </style>
    </div>
    
    <script>
      angular.module("KendoDemos", [ "kendo.directives" ])
          .controller("MyCtrl", function($scope){
              $scope.phone = "555 123 4567";
              $scope.cc = "1234 1234 1234 1234"
              $scope.ssn = "003-12-3456";
              $scope.post = "W1N 1AC";
          })
    </script>

    
</body>
</html>