天天看點

AngularJS 送出表單的方式 【已翻譯100%】(2/2)

簡潔文法

這個例子是以字元串的方式發送資料,并且發送你的頭資訊。如果你不需要這些,并且希望angular 的$http post盡可能的簡潔,我們可以使用簡寫方法:

絕對更簡潔更容易記住方法。

$http 内部控制器: 理想的,你可以将$http請求從controller移除到 service.這隻是為了示範目的,我們将會盡快在service上進行讨論.

在視圖中顯示錯誤和資訊

我們将使用指令ng-show和ng-class來處理我們的視圖,angular雙方括号允許我們将變量放置在我們需要的地方。

ng-show: 根據變量值是否存在來顯示或隐藏元素. 文檔

ng-class: 根據變量值是否存在(或一些其他表達式)來添加或移除類. 文檔

我們的表單完成了!通過強大的angular,我們可以将這些愚蠢的顯示/隐藏的js代碼邏輯從視圖中移走 了。現在我們的js檔案隻用來處理資料,并且視圖可以做它自己的事情了。

我們的類和錯誤/成功等提示資訊将在可擷取時顯示而不可擷取時隐藏。當我們無須再像使用老的javascript那樣擔心是否已經考慮全面,這變得更加容易。你也無須再擔心是否記得隐藏每處form送出時的那些錯誤資訊。

angular表單驗證 擷取更多表單驗證的資訊,請研讀我們另一文章:angularjs form validation。

結束語

現在我們已把美觀的表單全部轉變為angular的了。我們共同學習了許多概念,希望你與它們接觸更多,它們也将更易用。

回顧:

建立一個angular module

建立一個angular controller

雙向資料綁定

ng-model綁定inputs

ng-click送出表單

使用雙向資料綁定展示表單錯誤

展示一個基于是否變量存在的div

添加一個基于是否變量存在的類

這些angular技術将在更龐大的應用中使用,你可以用它們建立許多好東西。祝angular之途愉快,敬請期待更多深入的文章。同時,你也可以通過深入了解其指南,服務和廠商等來繼續學習angular。

繼續閱讀