Question

我正在创建多个自定义指令来显示具有不同数据输入限制的文本框。一旦显示，我想根据下拉框中的选择只显示一个。我创建了至少两个自定义指令 - 一个用于文本框，只允许数字和另一个只有字符。稍后我会为特殊字符和任何字符添加两个。目前我在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>

Answer 1

以下是克里斯建议的代码：

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

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

1 个答案: