Angularjs自定義表單元素

我需要創建一個新類型的表單元素（應具有相同的行爲：驗證，價值等），具有對象作爲價值。Angularjs自定義表單元素

例如，我需要一個「birtday元素」。點擊後，會顯示一個包含兩個月份和日期選擇的彈出窗口。（比如選擇日期）。當我得到價值時，我應該得到像那樣的{月：8日：21}。此外，當向服務器發送數據時，數據也應該發送到多字段。

其他用例：personName（firstName，lastName），price（amount，currency）。

我該如何在AngularJs中完成這樣的任務？

我發現的示例，教程和文檔遠離這樣一個複雜的任務。

2014-02-09 catalinux

您應該使用服務來保存數據（州）爲您的表單這樣

angular.module('myAppName').service('myFormService', ['$http', function($http){ 

    var formState = { 
     FirstName: '', 
     LastName: '', 
     Birthday: null 
    }; 

    // you may also want to put methods here like reset, save etc... 
    function reset() { formState.FirstName = ''; etc... } 
    function save() { $http.post(...); } 

    // this will create a singleton and will remain active across all pages 
    return { 
     FormState: formState, 
     Reset: reset, 
     Save: save 
    }; 

}]);

然後爲不同部分表單創建這樣

angular.module('myAppName').directive('birthdayPicker', ['myFormService', function(myFormService){ 

    function link(scope, element, attrs){ 

     // bind to this in your html 
     scope.birthday = myFormService.Birthday 
    } 

    return { 
     restrict: 'A', 
     templateUrl: 'path/to/birthdayPicker.html', 
     link: link 
    }; 
}]);

指令在模板html文件

<div> 
    <input type="text" data-ng-model="birthday" /> 
</div>

在您的html文件中使用您的指令，如

<div> 
    <div data-birthday-picker=""></div> 
</div>

現在，當你準備好你的表格狀態發送給服務器，你會簡單地做這我建議把這個表單服務中的保存方法

$http.post('/someUrl', myFormService.FormState).success(successCallback);

一些額外的提示

使用require.js幫助模塊分離和去除的正確排序腳本標記頭痛
確保您測試代碼，測試第一種方法往往會揭示最佳的設計

來源

2014-02-09 13:58:05

馬克：我在哪裏把設置元素（月，日）的子域的邏輯是什麼？我是否需要注入每個表單服務對於每個表單我使用那種類型的字段？如果我在同一個表單中有兩個相同類型的字段會發生什麼？ – catalinux

在你的指令中，你可以像這樣綁定它們：不必使用文本字段，你可以綁定到兩個下拉菜單 –

Angularjs自定義表單元素

回答

相關問題