1

我最近在 Zurb Foundation 开始了一个项目，我用 AngularJS 创建动态选择表单字段。

http://jsbin.com/egizel/1/edit上的示例有效，除非我想使用 Zurb Foundation 的自定义表单。要激活它，我知道我必须替换<form>为<form class="custom">，但是当我这样做时，使用 AngularJS 创建的动态选择字段停止工作。静态选择字段不受影响。

是否可以使用 AngularJS 和 Zurb Foundation 的自定义表单？如何解决这个简单的例子？

4

6 回答 6

1

这为我解决了它，但我觉得这不是有角度的方式..

angular.module('someApp', [''])
  .run(function($rootScope) {
      $("select").bind("DOMSubtreeModified", function() {
          Foundation.libs.forms.refresh_custom_select($("select"), true);
      });
  })
于 2013-09-08T22:55:58.470 回答
0

将此 jQuery 代码添加到您的 js 文件中：

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

这将在 AngularJS 在选择选项 DOM 中进行的每次更改后执行自定义表单的基础脚本。

此解决方案的唯一问题是当您通过 js 更改模型时 - 基础选择上的显示值 - 不会更改。

为了解决这个问题，我在我的 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-11T07:20:56.230 回答
0

这不是一个解决方案，但我找到了一个非常简单的解决方法。只需将此 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;
}

虽然不是一个真正的解决方案，但它确实解决了我的问题，即当混合样式输入字段和非样式选择字段时表单看起来很奇怪。我希望这将是 Zurb Foundation 中的默认行为。

于 2013-07-11T07:09:40.990 回答
0

您或其他人可能需要启动一个项目来为 Foundation 类创建指令，就像 Angular-UI ( http://angular-ui.github.io/ ) 和 Angular-UI-Bootstrap ( http://angular-ui .github.io/bootstrap/ )

于 2013-10-08T18:48:32.753 回答
0

当您在 Foundation 中激活自定义表单时，javascript 会修改您的 select 元素并为其提供 display:none 样式。然后选择元素被一个可见的 div class="custom dropdown" 替换。你在 angularjs 代码中所做的一切都会丢失。

于 2013-07-10T07:10:47.620 回答
-3

AngularJs 和 zurb Foundation 之间有很多冲突。

我建议离开 zurb 基金会并尝试在 bootstrap 中使用

见链接：http ://angular-ui.github.io/bootstrap/

于 2013-07-14T10:54:07.153 回答