谈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