Angular: Empty Fiddle

http://angularjs.org/

by Ganesh

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

<div style="width: 1110px; height: 223px; flex-direction: column; justify-content: flex-start; align-items: center; gap: 1px; display: inline-flex">
  <div style="width: 1110px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: flex">
    <div style="width: 1110px; flex: 1 1 0; background: white; box-shadow: 0px 7px 16px rgba(0, 0, 0, 0.08)"></div>
    <div style="width: 1064px; justify-content: space-between; align-items: center; display: inline-flex">
      <div style="align-self: stretch; padding-left: 27px; padding-right: 27px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; display: inline-flex">
        <div style="flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
          <div style="color: #404040; font-size: 14px; font-family: Arial; font-weight: 400; line-height: 22px; word-wrap: break-word">Hello</div>
          <div style="color: #404040; font-size: 18px; font-family: Shell Font; font-weight: 700; line-height: 27px; word-wrap: break-word">Manish Kumar</div>
        </div>
        <div style="color: #7F7F7F; font-size: 14px; font-family: Arial; font-weight: 400; line-height: 22px; word-wrap: break-word">Last logged in: 12/03/2023</div>
        <div style="flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: flex">
          <div style="flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
            <div style="justify-content: flex-start; align-items: flex-start; gap: 8px; display: inline-flex">
              <div style="padding-left: 4px; padding-right: 4px; background: #CCE6D9; justify-content: flex-start; align-items: center; gap: 1.80px; display: flex">
                <div style="color: #404040; font-size: 14px; font-family: Arial;...

JavaScript

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function() {
  var vm = this;
  
  vm.phone = 045236598;
});

myApp.directive('tsHideField', function () {
    return {
        template: '' +
            '<div>' +
            '    <input type="text" ng-model="ngModel" name="name"/>' +
            '    <input type="text" ng-model="ngModelView"/>' +
            '</div>',
        require: 'ngModel',
        replace: true,
        restrict: 'A',
        scope: {
            ngModel: '=',

            name: '='
        },
        link: function (scope, element, attributes, controller) {

            var maskValue = function (value) {
                if (!value) {
                    return "";
                }
                if (value.length <= 4) {
                    return value;
                }
                var valueHide = "";
                if (value.toString().indexOf('@') === -1) {
                    //leave last 4 chars
                    valueHide = value.toString().substring(0, value.toString().length - 4).replace(/[\S]/g, "\u2022");
                    return valueHide + value.toString().substring(value.toString().length - 4);
                } else {
                    valueHide = value.toString().substring(0, value.toString().indexOf('@') - 4).replace(/[\S]/g, "\u2022");
                    return valueHide + value.toString().substring(value.toString().indexOf('@') - 4);
                }
            }

            controller.$formatters.push(function (value) {
            		//inputs = element.find('input');
                //inputs[show].value = inputs[hide].value;
                scope.ngModelView = maskValue(value);
                return value;
            });

        }
    };
});