CODEWITHSUNDEEP
javascriptangularjs
Massey
Massey

Reputation: 1127

How to create and display multiple custom directives in AngularJS

I am creating multiple custom directives to display textboxes with different data input restrictions. Once displayed I would like to show only one based upon the selection made in a drop down box. I have created at least two custom directives - one for a textbox which will allow only numbers and another only characters. Later I will add two more for special characters and any character also. Currently I have the onkeypress functionalities in javascript. Can someone help me to move it to angularJS? The following is my code.

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div ng-app="TextboxExample" ng-controller="ExampleController">
        <form name="shippingForm" novalidate>
            <number-only-input />
            <br />
            <text-only-input />
            <br />
            <select id="textBoxOptions" >
                <option value="number" selected="selected">Numbers Only</option>
                <option value="text">Text Only</option>
                <option value="special">Special Characters</option>
                <option value="any">Any Value</option>
            </select>

        </form>
    </div>
    <script>
        function isNumberKey(evt) {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode != 46 && charCode > 31
              && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }
        function isTextKey(evt) {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if ((charCode > 90 || charCode < 97 )
              && (charCode < 65 || charCode > 122))
                return false;
            return true;
        }

    </script>
    <script src="scripts/angular.js"></script>
    <script src="scripts/jquery.min.js"></script>
    <script>       
        $("select").change(function () {

            var selected = $("#textBoxOptions").val();
            $('#customTextBox').attr("ng-model", selected);
        });
    </script>
    <script>

        angular.module('TextboxExample', [])
        .controller('ExampleController', ['$scope', function ($scope) {
            $scope.testvalue = { number: 1, validity: true };
        }])
        .directive('numberOnlyInput',  function () {
            return {
                restrict: 'E',
                template: '<INPUT id="numChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">',
            };

        })
        .directive('textOnlyInput', function () {
            return {
                restrict: 'E',
                template: '<INPUT id="txtChar" onkeypress="return isTextKey(event)" type="text" name="txtChar">',
            };

        });
    </script>
</body>
</html>

Upvotes: 0

Views: 443

Answers (1)

2ps
2ps

Reputation: 15916

Here is the code for what Chris is suggesting:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div ng-app="TextboxExample" ng-controller="ExampleController">
        <form name="shippingForm" novalidate>
            <number-only-input ng-if="optionValue=='number'"/>
            <br />
            <text-only-input ng-if="optionValue=='text'"/>
            <br />
            <select id="textBoxOptions" ng-model="optionValue">
                <option value="number" selected="selected">Numbers Only</option>
                <option value="text">Text Only</option>
                <option value="special">Special Characters</option>
                <option value="any">Any Value</option>
            </select>

        </form>
    </div>
    <script>
        function isNumberKey(evt) {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode != 46 && charCode > 31
              && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }
        function isTextKey(evt) {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if ((charCode > 90 || charCode < 97 )
              && (charCode < 65 || charCode > 122))
                return false;
            return true;
        }

    </script>
    <script src="scripts/angular.js"></script>
    <script src="scripts/jquery.min.js"></script>
    <script>

        angular.module('TextboxExample', [])
        .controller('ExampleController', ['$scope', function ($scope) {
            $scope.optionValue = 'number';
            $scope.testvalue = { number: 1, validity: true };
        }])
        .directive('numberOnlyInput',  function () {
            return {
                restrict: 'E',
                template: '<INPUT id="numChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">',
            };

        })
        .directive('textOnlyInput', function () {
            return {
                restrict: 'E',
                template: '<INPUT id="txtChar" onkeypress="return isTextKey(event)" type="text" name="txtChar">',
            };

        });
    </script>
</body>
</html>

Upvotes: 1

Related Questions