angular:angularjs:form:attributes []

Это старая версия документа!

Содержание

Специальные директивы на элементах формы

Специальные директивы на элементах формы

Когда мы хотим использовать disable для элемента в зависимости от условия то мы этого не можем сделать так как функционал этого атрибуте это не предусматривает для этого в AngularJS предусмотрены специальные директивы которые могут применятся в зависимости от условия, эти директивы применимы только как атрибуты.

ng-checked

используется для установки значения выбран\не выбран для input

    <script>
        angular.module("studyModule", [])
            .controller("studyCtrl", function ($scope) {
                $scope.dataValue = false;
            });
    </script>
    <div id="tasksPanel" class="panel well" ng-controller="studyCtrl">
        <div class="form-group">
            <label>
                <input type="checkbox" ng-checked="dataValue" />
                ng-checked
            </label>
        </div>
        <div class="form-group">
            <label>
                <input type="radio" ng-checked="dataValue" />
                ng-checked
            </label>
        </div>
    </div>

ng-disabled

используется для disable элемента применяется для input и button

    <script>
        angular.module("studyModule", [])
            .controller("studyCtrl", function ($scope) {
                $scope.dataValue = false;
            });
    </script>
    <div id="tasksPanel" class="panel well" ng-controller="studyCtrl">
        <div class="form-group">
            <button class="btn btn-success" ng-disabled="dataValue">ng-disabled</button>
        </div>
    </div>

ng-readonly

используется для атрибута readonly применяется к input

    <script>
        angular.module("studyModule", [])
            .controller("studyCtrl", function ($scope) {
                $scope.dataValue = false;
            });
    </script>
    <div id="tasksPanel" class="panel well" ng-controller="studyCtrl">
        <div class="form-group">
            <label >
                ng-readonly
                <input class="form-control" value="Readonly" ng-readonly="dataValue" />
            </label>
        </div>
    </div>

ng-selected

используется для атрибута selected в option

    <script>
        angular.module("studyModule", [])
            .controller("studyCtrl", function ($scope) {
                $scope.dataValue = false;
            });
    </script>
    <div class="form-group">
        <label>
            ng-select
            <select class="form-control">
                <option value="value">text 1</option>
                <option value="value" ng-selected="dataValue">ng-selected</option>
            </select>
        </label>
    </div>

>

ng-href

используется для указания url в href Чтобы Angular сам заботился об особенностях работы браузеров с параметрами href и src, вместо них мы используем ng-href=« and ng-src=».

    <a ng-href="{{ main.someValue }}">Go</a>

ng-src

используется для указания физического пути

    <img ng-src="{{ main.anotherValue}}" alt=">

ng-pattern

устанавливает регулярное выражение, соответствуя которому данные будут считатся валидными.

<html ng-app="studyModule">
<head>
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope) {
            $scope.matchPattern = new RegExp("^[a-z]");
        });
    </script>
</head>
<body>
    <div id="tasksPanel" ng-controller="studyCtrl">
        <form name="myForm" novalidate>
            <div class="panel panel-primary">
                <div class="panel panel-heading">
                    <div class="form-group">
                        <label class="h3">Text:</label>
                        <input name="sample" class="form-control" ng-model="inputValue"  ng-pattern="matchPattern" />
                        <!--Обратите внимание что для элементов input у которых атрибут type равен email, url, number
                не нужно указывать ng-pattern так как angular уже использует его для проверки на валидность содержимое элемента-->
                    </div>
                </div>
                <div class="panel-body">
                    <p>Pattern Error: {{myForm.sample.$error.pattern}}</p>
                    <p>Element Valid: {{myForm.sample.$valid}}</p>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

ng-minlength

устанавливает минимальное колличество символов для того чтобы данные введенные в элемент считались валидными.

<html ng-app="studyModule">
<head>
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope) {
            $scope.requireValue = true;
            $scope.matchPattern = new RegExp("^[a-z]");
        });
    </script>
</head>
<body>
    <div id="tasksPanel" ng-controller="studyCtrl">
        <form name="myForm" novalidate>
            <div class="panel panel-primary">
                <div class="panel panel-heading">
                    <div class="form-group">
                        <label class="h3">Text:</label>
                        <input name="sample" class="form-control" ng-model="inputValue" ng-minlength="3" />
                    </div>
                </div>
                <div class="panel-body">
                    <p>Min Length Error: {{myForm.sample.$error.minlength}}</p>
                    <p>Element Valid: {{myForm.sample.$valid}}</p>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

ng-maxlength

устанавливает максимальное колличество символов для того чтобы данные введенные в элемент считались валидными

<html ng-app="studyModule">
<head>
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope) {
            $scope.matchPattern = new RegExp("^[a-z]");
        });
    </script>
</head>
<body>
    <div id="tasksPanel" ng-controller="studyCtrl">
        <form name="myForm" novalidate>
            <div class="panel panel-primary">
                <div class="panel panel-heading">
                    <div class="form-group">
                        <label class="h3">Text:</label>
                        <input name="sample" class="form-control" ng-model="inputValue" ng-maxlength="10"/>
                    </div>
                </div>
                <div class="panel-body">
                    <p>Max Length Error: {{myForm.sample.$error.maxlength}}</p>
                    <p>Element Valid: {{myForm.sample.$valid}}</p>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

ng-required

Устанавливает обязательность введения данных для элемента.

<html ng-app="studyModule">
<head>
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope) {
            $scope.requireValue = true;
        });
    </script>
</head>
<body>
    <div id="tasksPanel" ng-controller="studyCtrl">
        <form name="myForm" novalidate>
            <div class="panel panel-primary">
                <div class="panel panel-heading">
                    <div class="form-group">
                        <label class="h3">Text:</label>
                        <input name="sample" class="form-control" ng-model="inputValue" ng-required="requireValue"/>
                    </div>
                </div>
                <div class="panel-body">
                    <p>Required Error: {{myForm.sample.$error.required}}</p>
                    <p>Element Valid: {{myForm.sample.$valid}}</p>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

ng-true-value и ng-false-value

ng-true-value определяет значение которое установится выражением привязки данных когда состояние элемента будет «выбран»
ng-false-value определяет значение которое установится выражением привязки данных когда состояние элемента будет «не выбран»

<html ng-app="studyModule">
<head>
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope) { });
    </script>
</head>
<body>
    <div id="tasksPanel" class="panel" ng-controller="studyCtrl">
        <form name="myForm" novalidate>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="checkbox">
                        <label>
                            <input name="sample" type="checkbox" ng-model="inputValue" ng-true-value="Checked" ng-false-value="Unchecked" />
                            Checkbox
                        </label>
                        <!--Обратите внимание что для элементов input у которых атрибут type равен email, url, number
                не нужно указывать ng-pattern так как angular уже использует его для проверки на валидность содержимое элемента-->
                    </div>
                </div>
                <div class="panel-body">
                    <p>Model Value:{{inputValue}}</p>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

Инструменты пользователя

Инструменты сайта

Боковая панель