AngularJS ਫਾਰਮ

AngularJS 中的表单提供输入控件的数据绑定和验证。

输入控件

输入控件是 HTML 输入元素：

• input 元素
• select 元素
• button 元素
• textarea 元素

数据绑定

输入控件通过使用 ਇੰਡਰੈਕਸ਼ਨ ਐਪਲੀਕੇਸ਼ਨ ਕੰਟਰੋਲਰ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ 指令提供数据绑定。

<input type="text" ng-model="firstname">

现在，该应用有一个名为 firstname 的属性。

ਇੰਡਰੈਕਸ਼ਨ ਐਪਲੀਕੇਸ਼ਨ ਕੰਟਰੋਲਰ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ 指令将输入控制器绑定到应用程序的其余部分。

属性 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>
  Pick a topic:
  <input type="radio" ng-model="myVar" value="dogs">Dogs
  <input type="radio" ng-model="myVar" value="tuts">Tutorials
  <input type="radio" ng-model="myVar" value="cars">Cars
</form>

</script>

myVar的值将是 dogs、tuts 或 cars。

下拉选择框

使用 ਇੰਡਰੈਕਸ਼ਨ ਐਪਲੀਕੇਸ਼ਨ ਕੰਟਰੋਲਰ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ 指令将下拉选择框绑定到您的应用程序。

ਇੰਡਰੈਕਸ਼ਨ ਐਪਲੀਕੇਸ਼ਨ ਕੰਟਰੋਲਰ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ 属性中定义的属性将具有选择框中所选选项的值。

实例

根据选定的选项值显示一些文本：

<form>
  Select a topic:
  <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

ਨਵੀਂ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਹੈਲਟੇਕ ਵਿੱਚ।ਇਹ ਕਿਸੇ ਵੀ ਮੂਲ ਬਰਾਉਜ਼ਰ ਪ੍ਰਮਾਣੀਕਰਣ ਨੂੰ ਨਾਬਾਲਾ ਕਰਦਾ ਹੈ

ਉਦਾਹਰਣ ਦੇਖੋ ਵਿਸਥਾਰ ng-app

ਇੰਡਰੈਕਸ਼ਨ ਐਂਜੁਲਰਜ਼ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ ng-controller

ਇੰਡਰੈਕਸ਼ਨ ਐਪਲੀਕੇਸ਼ਨ ਕੰਟਰੋਲਰ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ ng-model

ਇੰਡਰੈਕਸ਼ਨ ਦੋ ਇੰਪੁਟ ਐਲੀਮੈਂਟਸ ਨੂੰ ਮਾਡਲ ਵਿੱਚ ਉਸਰੀ ਆਬਜੈਕਟ ਨਾਲ ਬੰਧਣ ਵਾਲੀ ਹੈ formCtrl ਮਾਸਟਰ ਕੰਟਰੋਲਰ ਲਈ reset() ਮੱਥਦਾਂ

reset() ਮੱਥਦਾਂ ਆਬਜੈਕਟ ਨੂੰ ਮੂਲ ਮੁੱਲ ਸੈਟ ਕਰਦੀ ਹੈ ਅਤੇ ਕੰਟਰੋਲਰ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ user ਆਬਜੈਕਟ ਨੂੰ ਬਰਾਬਰ ਸੈਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਮਾਸਟਰ ਆਬਜੈਕਟ

ng-click ਇੰਡਰੈਕਸ਼ਨ ਕੇਵਲ ਬਟਨ ਨੂੰ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਤੱਕ ਤੱਕ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ reset() ਮੱਥਦਾਂ

ਇਹ ਐਪਲੀਕੇਸ਼ਨ novalidate ਅਤੇਰੀਆ ਨਹੀਂ ਜ਼ਰੂਰਤ ਕਰਦਾ ਹੈ, ਪਰ ਆਮ ਤੌਰ 'ਤੇ ਤੁਸੀਂ ਇਸ ਨੂੰ ਇੰਗਲੁਅਰਜ਼ ਐਪਲੀਕੇਸ਼ਨ ਫਾਰਮ ਵਿੱਚ ਵਰਤਦੇ ਹੋ ਕੇ ਸਟੈਂਡਰਡ ਐਚਟੀਐਮਐਲ5 ਪ੍ਰਮਾਣੀਕਰਣ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਦੇ ਹੋ