快捷導(dǎo)航

AngularJS表單基本操作

更新時(shí)間：2017年01月09日 09:01:02 作者：Zerone1993

這篇文章主要為大家詳細(xì)介紹了AngularJS表單基本操作的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了AngularJS表單簡(jiǎn)單操作代碼，供大家參考，具體內(nèi)容如下

HTML正文：

<div ng-app="myApp" ng-controller="myCtrl">
 <!-- novalidate:當(dāng)提交表單時(shí)不對(duì)表單數(shù)據(jù)（輸入）進(jìn)行驗(yàn)證 -->
 <form novalidate>
  First Name:<input type="text" ng-model="user.firstName"><br>
  Last Name:<input type="text" ng-model="user.lastName">
  <br><br>
  <button ng-click="reset()">RESET</button>
 </form>
 <p>form = {{user }}</p>
 <p><font color="red">initInfo = {{initInfo}}</font></p>
</div>

Javascript操作代碼：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.initInfo = {firstName:"squirrel", lastName:"Python"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.initInfo); // user對(duì)象等于master對(duì)象：深復(fù)制
  };
  //JS掃描腳本時(shí)會(huì)自動(dòng)調(diào)用reset方法進(jìn)行輸入框信息的初始化
  $scope.reset();
});

效果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用Angular CDK實(shí)現(xiàn)一個(gè)Service彈出Toast組件功能
本文主要寫(xiě)用cdk實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Toast組件，使用的是cdk中的overlay模塊，需要手動(dòng)安裝環(huán)境，具體安裝方法及相關(guān)實(shí)現(xiàn)代碼跟隨小編一起看看吧
2021-07-07
Angular簡(jiǎn)單驗(yàn)證功能示例
這篇文章主要介紹了Angular簡(jiǎn)單驗(yàn)證功能,涉及AngularJS事件響應(yīng)、正則判定、頁(yè)面元素屬性動(dòng)態(tài)修改等相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
Angular使用動(dòng)態(tài)加載組件方法實(shí)現(xiàn)Dialog的示例
這篇文章主要介紹了Angular使用動(dòng)態(tài)加載組件方法實(shí)現(xiàn)Dialog的示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
詳解AngularJS之$window窗口對(duì)象
本篇文章主要介紹了AngularJS之$window窗口對(duì)象，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
angular4實(shí)現(xiàn)帶搜索的下拉框
這篇文章主要為大家詳細(xì)介紹了angular4實(shí)現(xiàn)帶搜索的下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
AngularJS2 與 D3.js集成實(shí)現(xiàn)自定義可視化的方法
本篇文章主要介紹了ANGULAR2 與 D3.js集成實(shí)現(xiàn)自定義可視化的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
angularjs路由傳值$routeParams詳解
這篇文章主要為大家詳細(xì)介紹了angularjs路由傳值$routeParams的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
對(duì)Angular.js Controller如何進(jìn)行單元測(cè)試
這篇文章主要給大家介紹了如何對(duì)Angular Controller進(jìn)行單頁(yè)測(cè)試。如果你不太了解angular也沒(méi)關(guān)系，本文也會(huì)提及關(guān)于Angular的一些知識(shí)。文中通過(guò)示例代碼介紹的很詳細(xì)，詳細(xì)對(duì)大家的理解和學(xué)習(xí)很有幫助，下面來(lái)一起看看吧。
2016-10-10
基于AngularJS的簡(jiǎn)單使用詳解
下面小編就為大家?guī)?lái)一篇基于AngularJS的簡(jiǎn)單使用詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就想給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
AngularJS基礎(chǔ)學(xué)習(xí)筆記之控制器
在AngularJS中，控制器是一個(gè)Javascript函數(shù)（類型/類），用來(lái)增強(qiáng)除了根作用域意外的作用域?qū)嵗摹．?dāng)你或者AngularJS本身通過(guò)<code>scope.$new</code>倆創(chuàng)建一個(gè)新的子作用域?qū)ο髸r(shí)，有一個(gè)選項(xiàng)能讓你將它當(dāng)做參數(shù)傳遞給控制器。
2015-05-05