如何在 AngularJS 中创建和显示多个自定义指令

How to create and display multiple custom directives in AngularJS

本文关键字：显示 自定义 指令 创建 AngularJS      更新时间：2023-09-26

我正在创建多个自定义指令来显示具有不同数据输入限制的文本框。显示后，我只想根据下拉框中的选择显示一个。我创建了至少两个自定义指令 - 一个用于仅允许数字的文本框，另一个仅允许字符。稍后我将为特殊字符和任何字符再添加两个。目前我在javascript中拥有onkeypress功能。有人可以帮我把它移动到 angularJS 吗？以下是我的代码。

    <!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>

以下是Chris建议的代码：

<!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>
相关文章：