Формы AngularJS

Рекомендуемые курсы:

AngularJS предоставляет данные для привязки и проверку вводных элементов в формах.

вводные элементы

• вводные элементы являются HTML-элементами ввода:
• элемент input
• элемент select
• элемент button

элемент textarea

данные для привязки Инструкции определяют контроллер приложения. вводные элементы через использование

инструкции предоставляют данные для привязки.

<input type="text" ng-model="firstname"> атрибут Теперь, приложение имеет имя

Инструкции определяют контроллер приложения. атрибуты.

инструкции связывают контроллер ввода с остальной частью приложения. атрибутможет быть использовано в контроллере:

Пример

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.firstname = "Bill";
$scope.reset();
});

</script>

它可以 также быть использовано в других местах приложения:

Пример

<form>
  Имя: <input type="text" ng-model="firstname">
</form>
<h1>Вы ввели: {{firstname}}</h1>

</script>

флажок

значение флажка true или false. Установите Инструкции определяют контроллер приложения. инструкции применяются к флажкам и используются их значения в приложении.

Пример

Если отметили флажок, тема будет отображена:

<form>
  Отметьте, чтобы отобразить тему:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">Моя тема</h1>

</script>

радио-кнопки

Использование Инструкции определяют контроллер приложения. инструкции связывают радио-кнопки с вашим приложением.

с одинаковыми Инструкции определяют контроллер приложения. кнопки могут иметь различные значения, но используется только выбранное значение.

Пример

Отображение текста в зависимости от значения выбранного радио-кнопки:

<form>
  Выберите тему:
  <input type="radio" ng-model="myVar" value="dogs">Собаки
  <input type="radio" ng-model="myVar" value="tuts">Учебные материалы
  <input type="radio" ng-model="myVar" value="cars">Автомобили
</form>

</script>

значение myVar будет dogs、tuts или cars。

выпадающего списка

Использование Инструкции определяют контроллер приложения. Инструкции связывают выпадающий список выбора с вашим приложением.

Инструкции определяют контроллер приложения. Свойства, определённые в атрибуте, будут иметь значение выбранной опции в списке выбора.

Пример

Отображение текста в зависимости от выбранного значения опции:

<form>
  Выберите тему:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

</script>

значение myVar будет dogs、tuts или cars。

Пример формы AngularJS

приложение код

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    名字：<br>
    <input type="text" ng-model="user.firstName"><br>
    姓氏：<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">重置</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.master = {firstName: "Bill", lastName: "Gates"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  };
  $scope.reset();
$scope.reset();
});

</script>

Перепробуйте самостоятельно novalidate

Атрибут является новым атрибутом HTML5. Он отключает любую встроенную в браузер валидацию.

Example Explained ng-app

Инструкции определяют приложение AngularJS. ng-controller

Инструкции определяют контроллер приложения. ng-model

Инструкции привязывают два элемента ввода к объекту user в модели. formCtrl master Контроллер как reset() Методы.

reset() Метод устанавливает начальное значение объекта и определяет user Объект устанавливается в равенство master Объект.

ng-click Инструкции вызываются только при нажатии на кнопку reset() Методы.

Этот приложение не требует атрибута novalidate, но обычно его используют в формах AngularJS для замены стандартной валидации HTML5.