AngularJS:有多种方法可以将ng-model应用于表单吗?

时间:2017-03-21 14:50:18

标签: angularjs playframework play-bootstrap

我使用Scala-Play与Play-Bootstrap扩展和AngularJS。由于应用程序的控制由AngularJS管理,我需要提交表单并由AngularJS管理响应,而不是由Play控制器管理。

据我了解并使用纯AngularJS,可以使用ng-model将每个输入链接到特定的$scope嵌套变量,例如

<form name="userForm">
    <label>
      Name:
      <input type="text" name="userName"
             ng-model="user.name"/>
    </label><br />
    <label>
      Other data:
      <input type="text" ng-model="user.data" />
    </label><br />
</form>

是否可以在ng-model代码上使用form来完成同样的操作?而不是将它应用于每个输入?问题是在使用Play-Bootstrap时不可能为每个输入注入所需的ng-model,即这不起作用:

@b3.text(computeInSampleForm("impliedVolSpread"), '_label -> messagesApi("myapp.impliedVolSpread"), 
         '_showConstraints -> false, 'ng-model -> "impliedVolSpread")

如果我只知道如何逃脱 - 破折号字符,那么它会失败并显示错误value - is not a member of Symbol

由于我已经将b3.form的自定义版本创建为b3.bgform,如果我可以在表单级别执行bg-model那就太棒了......这可能吗?

1 个答案:

答案 0 :(得分:1)

您可以通过显式转换为符号来修复此错误:

<UserControl x:Class="MinimalMonitoringClient.Controls.ScrollDragZoomControl"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
     xmlns:models="clr-namespace:MinimalMonitoringClient.Controls.Models"
     Background="Transparent">
<UserControl.DataContext>
    <panels:HierarchicalViewModel />
</UserControl.DataContext>
<UserControl.Template>
        <ControlTemplate TargetType="UserControl">
            <ScrollViewer x:Name="scrollViewer"
              MouseLeftButtonUp="scrollViewer_MouseLeftButtonUp"
              PreviewMouseLeftButtonUp="scrollViewer_PreviewMouseLeftButtonUp"
              PreviewMouseWheel="scrollViewer_PreviewMouseWheel"
              PreviewMouseLeftButtonDown="scrollViewer_PreviewMouseLeftButtonDown"
              MouseMove="scrollViewer_MouseMove"
              VerticalScrollBarVisibility="{Binding VerticalScrollBarVisibility}"
              HorizontalScrollBarVisibility="{Binding HorizontalScrollBarVisibility}">

                <Grid RenderTransformOrigin="0.5,0.5">
                    <Grid.LayoutTransform>
                        <TransformGroup>
                            <ScaleTransform />
                        </TransformGroup>
                    </Grid.LayoutTransform>
                    <Viewbox>
                        <!-- Present the actual stuff the user wants to display -->
                        <ContentPresenter />
                    </Viewbox>
                </Grid>
            </ScrollViewer>
        </ControlTemplate>
    </UserControl.Template>
</UserControl>

或者使用隐式转换导入:

Symbol("ng-model") -> "impliedVolSpread"