AngularJS選擇與Zurb基金會自定義表格

我最近啓動了一個項目與Zurb基金會，我用AngularJS創建動態選擇表單字段。AngularJS選擇與Zurb基金會自定義表格

http://jsbin.com/egizel/1/edit的示例工作除了如果我想使用Zurb基金會的自定義窗體。要激活它，我知道我必須用<form class="custom">替換<form>，但是當我這樣做時，使用AngularJS創建的動態選擇字段停止工作。靜態選擇字段不受影響。

是否可以使用AngularJS和Zurb基金會的自定義表單？如何解決這個簡單的例子？

來源

2013-07-05 Henrique Pantarotto

當您激活基礎中的自定義表單時，javascript會修改您的select元素併爲其提供一種顯示風格：無。 select元素然後被一個可見的div class =「自定義下拉列表」取代。您在angularjs代碼中執行的所有操作都會丟失。

來源

2013-07-10 07:10:47 Shawn

是的，我注意到了。你知道如何解決這個問題嗎？ –

這不是一個解決方案，但我找到了一個非常簡單的解決方法。就在這個CSS應用到選擇欄：

select { 
    display: block; 
    position: relative; 
    top: 0; 
    height: 2.3125em; 
    margin-bottom: 1.25em; 
    margin-top: 0px; 
    padding: 0px; 
    width: 100%; 
    background: white; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    font-size: 0.875em; 
    vertical-align: top; 
}

Althought不是一個真正的解決方案，但它確實解決我的問題，其中混合形式與非風格選擇字段風格的輸入字段時顯得奇怪。我希望這將成爲Zurb基金會的默認行爲。

來源

2013-07-11 07:09:40

添加該jQuery代碼到你的js文件：

$("#my_select").bind("DOMSubtreeModified", function() { 
    $(document).foundation("forms");  
});

這將每一個變化AngularJS後執行自定義窗體的基礎腳本會在選擇選項DOM做。

此解決方案的唯一問題是，當您通過js更改模型 - 基礎上的顯示值select - 不會更改。

爲了解決這個問題，我在我的AngularJS控制器中將$ watch添加到這個模型中 - 並手動更改顯示值。例如：（被「選擇」我的模型）

$scope.$watch('selected', function() { 
    if($scope.selected) //only after AngularJS initial it 
     $('#myselect + .custom.dropdown a.current').text($scope.selected); 
    $('#my_form').show() // optional - see below ... 
});

我隱藏的形式，在這裏表現出來 - 防止壞的GUI的方式......

來源

2013-07-11 07:20:56 user2571538

謝謝，但我不明白如何應用您的解決方案。如果你可以在http://jsbin.com/egizel/1/edit –

修復這個簡單的例子，那將是一件好事。你爲什麼不把你的列表保存在ng-controller中？我試圖解決您的情況：http://jsbin.com/egizel/12/edit – user2571538

我認爲「未定義」是由其他問題造成的......我不知道這是否與我的問題有關。我現在很困惑。我試圖在jsbin.com上創建其他示例，並且它們總是顯示爲「未定義」。我不知道什麼是錯的。 –

-2

有很多的AngularJs之間的衝突和zurb基礎。

我建議離開zurb基礎，嘗試引導使用

見鏈接：http://angular-ui.github.io/bootstrap/

來源

2013-07-14 10:54:07 user2571538

這解決了這個問題對我來說，但我覺得這並不是雖然角度的方式..

angular.module('someApp', ['']) 
    .run(function($rootScope) { 
     $("select").bind("DOMSubtreeModified", function() { 
      Foundation.libs.forms.refresh_custom_select($("select"), true); 
     }); 
    })

來源

2013-09-08 22:55:58 coiso

如果你的'select'通過路由加載到'ngView'中，這將不起作用我認爲你最好在'ngView'中監聽'$ viewContentLoaded'事件。 –

您或其他人可能需要啓動一個項目來爲Foundation類創建指令，這很像Angular-UI（http://angular-ui.github.io/）和Angular-UI-Bootstrap（http://angular-ui.github.io/bootstrap/）

來源

2013-10-08 18:48:32

AngularJS選擇與Zurb基金會自定義表格

回答

相關問題