快捷導(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)文章

AngularJS基于ngInfiniteScroll實(shí)現(xiàn)下拉滾動(dòng)加載的方法
這篇文章主要介紹了AngularJS基于ngInfiniteScroll實(shí)現(xiàn)下拉滾動(dòng)加載的方法,結(jié)合實(shí)例形式分析AngularJS下拉滾動(dòng)插件ngInfiniteScroll的下載、功能、屬性及相關(guān)使用方法,需要的朋友可以參考下
2016-12-12
Angular應(yīng)用懶加載模塊配置管理詳解
這篇文章主要為大家介紹了Angular應(yīng)用懶加載模塊配置管理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
本篇文章主要介紹了angular.js 路由及頁面?zhèn)鲄⑹纠?，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02

Angular.js實(shí)現(xiàn)多個(gè)checkbox只能選擇一個(gè)的方法示例

這篇文章主要給大家介紹了利用Angular.js實(shí)現(xiàn)多個(gè)checkbox只能選擇一個(gè)的方法，文中給出了詳細(xì)的示例代碼，相信對(duì)大家具有一定的參考價(jià)值，下面來一起看看吧。

2017-02-02

Angular2使用Angular CLI快速搭建工程（一）

這篇文章主要介紹了Angular2使用Angular CLI快速搭建工程,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

2017-05-05

Angularjs修改密碼的實(shí)例代碼

這篇文章主要介紹了Angularjs修改密碼的實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

2017-05-05

AngularJS實(shí)現(xiàn)tab選項(xiàng)卡的方法詳解

這篇文章主要介紹了AngularJS實(shí)現(xiàn)tab選項(xiàng)卡的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了AngularJS實(shí)現(xiàn)tab選項(xiàng)卡的原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下

2017-07-07