談html中表單的提交

原創 小楫轻舟丶 2020-06-21 15:23

在通常的form表單中，我們用input等標籤，配置 name ,value 屬性的方式來收集數據，可以解決大部分的問題，此時，它的數據是一個簡單的map型的數據。
當表單很複雜時，是滿足不了需求的，比如，是一個list,或者map裏有list,這些很常見的需求如何解？此時最好的方式是用 js來維護這個數據，然後每次修改都渲染 生成html，直接通過ajax提交這個數據，放棄 form的 name收集數據的方式。
如何解決表單驗證的問題呢？其實大同小異，做一份驗證的規則就對應起來就好了，
出現了錯誤，如何找到這個元屬？ 記得angularjs裏是根據name來找的，所以請爲每個input配上一個唯一的name.

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

AngularJs_Service

// -------------------------------------------------- <script> var app = angular.module("myApp", []);app.controller("my

巴拿马_ 2020-06-28 14:15:54

AngularJs之angular-file-upload上傳組件使用和總結

最近做項目把組件分離，之前用上了第三方組件，裏面的邏輯寫的不是很好，抽空時候研究了下這個組件，然後把它獨立的分離出來了，雖然它是個第三方組件，但是還是有些項目中有些需求它還是實現不了，所以修改了並把它封裝成了一個自己能用的組件。

少壮不努力，长大开夏利 2020-07-05 00:26:03

AngularJS如何實現鼠標移入顯示,鼠標移出隱藏的效果

在項目開發中，經常會用到鼠標移入顯示,鼠標移出隱藏的效果，在angularjs中，主要使用了ng-mouseenter與 ng-mouseleave 這兩個指令來實現鼠標的移入時顯示，移出時隱藏的效果。 示例如下：  <!doctype

Web魔法师 2020-07-03 18:08:48

AngularJs過濾器使用

        過濾器可以用來格式化需要展示給用戶的數據。在Angular中既可以是在HTML中，也可以是在Js文件中這兩個地方來使用過濾器。         下面就拿字符串轉換爲大寫的來舉例。 1）HTML中轉化         在HT

熹园 2020-07-01 16:25:31

AngularJs下拉搜索框

AngularJs是基於MVC（Model（模型）-View（視圖）-Controller（控制器））思想的，在AngularJs應用中，視圖就是文檔對象模型（DOM），控制器是JavaScript類，模型中的數據就是存儲在對象

sx_lidan 2020-07-01 06:46:01

AngularJS 五大特性，加快 Web 應用開發

AngularJS 是谷歌的一個 JavaScript 框架，旨在簡化前端應用程序的開發。如果你在開發單頁的應用程序，我敢肯定你已經聽說過它。我是 AngularJS 的忠實粉絲，在這篇文章中我將概述五條我爲什麼這麼喜歡它的原因。  

Panda_Joy 2020-06-30 15:33:00

深入AngularJs(2)

1.AngularJS 默認在一個html界面中只啓動一個 ng-app 模塊，而且是界面中第一次出現的那個使用 ng-app 聲明的模塊. 且使用ng-app，頁面加載時會這樣處理： angular找到ng-app標記後，首先加

Luffy_ying 2020-06-29 09:48:13

AngularJs ng-options 無法設置value的問題

AngularJS 是一個神奇的東西，但學習過程中總會碰到不少問題。 被ng-options的value設值問題困擾了不少時間，終於解決了，這裏記錄一下。 頁面語法: 設置model： 按照道理這樣應該是ok了，但是打開F1

Timor好心情 2020-06-25 04:58:23

Angularjs切換網站配色模式簡單示例1(切換css文件）

一個網站可以有多種配色方案，例如正常模式，夜間模式等。 簡單示例一個通過點擊按鈕，更換css文件，達到切換配色模式的angularjs 小app。 主要文件有三個：index.html（主文件），white.css（白色背景配色方案css

cs08211317dn 2020-06-23 10:07:14

checkbox的ng-model和ng-change的多選的練習

用到了ng-model和ng-change,和ng-repeat，vm就是如此便利。 簡單樹效果。 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

小楫轻舟丶 2020-06-21 15:24:02

jquery中$.ajax和angularjs中$http 使用restful api post提交數據時的不一致的解決方法

本文討論post 本質 1 $.ajax 是 把 json 使用$.param處理 。使用 application/x-www-form-urlencoded 2 $http會 使用JOSN.stringify來處理。使用

小楫轻舟丶 2020-06-21 15:23:46

採用AngularJs實現全選與反選的操作

設置input標籤 //1.全選 <input type="checkbox" ng-model="box" ng-click="selectAll();"/> //得到數據信息賦值 <input type="checkbox

拉莫帅 2020-06-21 09:53:53

AngularJs簡便的添加數據信息

$scope.add = function(){ // 執行添加的操作 $scope.users.push({ name:$scope.nameId,sex:$scope.sexId,age:$

拉莫帅 2020-06-21 09:53:53

AngularJS網絡請求數據、刪除、查找、 排序

<!DOCTYPE html><html ng-app="App">    <head>        <meta charset="UTF-8"> 

xw_414 2020-06-20 03:56:09

AngularJs表格 增加、刪除、關鍵字查詢、按數量排序

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />       

xw_414 2020-06-20 03:56:09