Formularze AngularJS

Polecenia kursów:

formularze AngularJS oferują wiązanie danych i walidację kontrolki wejściowej.

kontrolki wejściowe

• kontrolki wejściowe są HTML elementami wejściowymi:
• element input
• element select
• element przycisku

element textarea

wiązanie danych Polecenie definiuje kontroler aplikacji. kontrolki wejściowe poprzez użycie

instrukcja dostarcza wiązanie danych.

<input type="text" ng-model="firstname"> property teraz, aplikacja ma nazwę

Polecenie definiuje kontroler aplikacji. property.

instrukcja binduje kontroler wejściowy do reszty aplikacji. propertymożna odwoływać się do niej w kontrolerze:

Przykład

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

</script>

może być również odwoływane w innych miejscach aplikacji:

Przykład

<form>
  Imię: <input type="text" ng-model="firstname">
</form>
<h1>Wprowadziłeś: {{firstname}}</h1>

</script>

pole wyboru

wartość pola wyboru to true lub false. Umieść Polecenie definiuje kontroler aplikacji. Instrukcja zastosowana do pola wyboru i używa jej wartości w aplikacji.

Przykład

Jeśli zaznaczysz pole wyboru, tytuł zostanie wyświetlony:

<form>
  Zaznacz, aby wyświetlić tytuł:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">Mój tytuł</h1>

</script>

przyciski radiowe

Użyj Polecenie definiuje kontroler aplikacji. instrukcja binduje przyciski radiowe do Twojej aplikacji.

posiadające takie same Polecenie definiuje kontroler aplikacji. opcji radiowych może mieć różne wartości, ale używana jest tylko wybrana wartość.

Przykład

Wyświetl tekst na podstawie wartości wybranej opcji radiowej:

<form>
  Wybierz temat:
  <input type="radio" ng-model="myVar" value="dogs">Psy
  <input type="radio" ng-model="myVar" value="tuts">Tutorial
  <input type="radio" ng-model="myVar" value="cars">Samochody
</form>

</script>

Wartość zmiennej myVar będzie psy,tutoriale lub samochody.

pola wyboru

Użyj Polecenie definiuje kontroler aplikacji. Instrukcja przypisuje pole wyboru do aplikacji.

Polecenie definiuje kontroler aplikacji. Atrybuty zdefiniowane w właściwościach będą miały wartość wybranej opcji w polu wyboru.

Przykład

Wyświetl tekst na podstawie wybranej wartości opcji:

<form>
  Wybierz temat:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Psy
    <option value="tuts">Tutoriale
    <option value="cars">Samochody
  </select>
</form>

</script>

Wartość zmiennej myVar będzie psy,tutoriale lub samochody.

Przykład formularza AngularJS

Aplikacja

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

Spróbuj sam novalidate

Atrybut to nowa atrybut HTML5. Wyłącza każdą domyślną walidację przeglądarki.

Przykład wyjaśniony ng-app

Polecenie definiuje aplikację AngularJS. ng-controller

Polecenie definiuje kontroler aplikacji. ng-model

Polecenie wiąże dwa elementy wejściowe do obiektu user w modelu. formCtrl master Kontroler jako reset() Metoda.

reset() Metoda ustawia wartość początkową obiektu i definiuje user Obiekt ustawiony na równo master Obiekt.

ng-click Polecenie jest wywoływane tylko po kliknięciu przycisku reset() Metoda.

Ta aplikacja nie wymaga atrybutu novalidate, ale zazwyczaj jest używany w formularzach AngularJS, aby zastąpić standardową walidację HTML5.