首頁 > 開發者 > 網站開發

AngularJs入門之表單開發

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：www   使用者名稱   submit   css   model   提交   on()   location   blog   

本文和大家分享的主要是前端開發中必備的AngularJs架構表單開發相關基礎知識，希望對大家使用和學習AngularJs有所協助。

 

1.簡單的表單提交；

 

2.更多的表單元素；

 

3.初始化表單；

 

代碼

 

<!doctype html>

<html ng-app="lesson" ng-controller="FormCtrl" >

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title>

LESSON 7

  </title>

  <link rel="stylesheet" type="text/css" href="css/main.css" />

  <style>

  #content1{padding:16px;}

  </style>

 

  </head>

 

  <body>

  

<form ng-submit="PostForm()" >

<ul>

<li>

<label>使用者名稱：</label><input type="text" ng-model="form.UserName" />

</li>

<li>

<label>暱稱：</label><input type="text" ng-model="form.NickName" />

</li>

<li>

<label>年齡：</label><input type="text" ng-model="form.Age" />

</li>

<li>

<label>是否已婚：</label><input  type="checkbox" ng-model="form.IsMarried" />

</li>

<li>

<label>喜愛的動物：</label>

<input  type="radio" ng-model="form.LovedAnimal" value="狗" />狗

<input  type="radio" ng-model="form.LovedAnimal" value="貓" />貓

</li>

<li>

<label>居住的城市：</label>

<select ng-model="form.LocationCity"

ng-options=" obj.text as obj.value for obj in form.LocationCityList"

>

<option value="">請選擇城市</option>

</select>

</li>

<li>

<input type="submit" value="提交" />

</li>

</ul>

</form>

  

<ul>

<li>{{form.UserName}}</li>

<li>{{form.NickName}}</li>

<li>{{form.Age}}</li>

<li>{{form.IsMarried}}</li>

<li>{{form.LovedAnimal}}</li>

<li>{{form.LocationCity}}</li>

</ul>

 

<script src="scripts/angular-1.4.6.min.js"></script>

<script>

var app = angular.module("lesson",[]);

app.controller("FormCtrl",function($scope){

 

$scope.formInitObj = {

UserName:"",

NickName:"",

};

$scope.form = {};

 

$scope.form.LocationCityList = [

{text:"北京",value:"北京"},

{text:"上海",value:"上海"},

{text:"廣州",value:"廣州"}

];

 

$scope.PostForm=function(){

console.log($scope.form);

$scope.form = angular.copy($scope.formInitObj);

}

 

});

 

 

</script>

 

  </body>

</html>

 

執行結果

 

 

原文連結：http://www.maiziedu.com/wiki/angularjs/develop/

AngularJs入門之表單開發

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
angularjs sample angularjs limitto angularjs selenium sharepoint angularjs angularjs ebook angularjs essentials angularjs panel
相關文章
H5 中html 頁面存為圖片並長按 儲存
__x__(20)0907第四天__ css 框模型

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More