【问题标题】:create data driven angular form创建数据驱动的角度形式
【发布时间】:2015-08-03 05:50:08
【问题描述】:

我有一个项目需要创建一个表单,其中每个文本字段的标题来自另一台服务器的 json。 我需要使用 ng-repeat 显示标题并使用 ng-model 作为文本字段本身,但是如何将所有结果以 json 格式返回到服务器?

这是我的html部分

 <div class="row" ng-controller="createworkshopController">
                <form role="form" ng-submit="submitWorkshop()">
                        <div>
                            <div ng-repeat="x in form">
                                <h4>{{x.field_name}}</h4>
                                <input class="form-control" placeholder="{{x.field_name}}" ng-model="result.form[field_name]">
                            </div>

                        </div>

                        <hr>

                        <div align="right">
                            <button type="submit" class="btn btn-default" ng-click="submitWorkshop()">Submit</button>
                            <button type="reset" class="btn btn-default">Reset</button>
                        </div>
                </form>
 </div>

这就是我所拥有的角度控制器

app.controller('createworkshopController', function($scope, $http) {

$http.get(end_url + ':' + port + '/createworkshop')
    .success(function(data) {
        $scope.form = data.Workshop;
    });


$scope.submitWorkshop = function() {

};

});

这是html现在的样子,表单标题很容易传入。

请帮帮我!我还在学习!谢谢!!!

【问题讨论】:

  • 添加name="myform" 属性,您将能够在控制器中通过$scope.myform 在提交处理程序中访问它。然后构造对象并使用$http发送
  • 你处理了吗?网上有很多例子吗?
  • $scope.result.form 不包含您需要的所有更改信息吗?
  • 是的,但是如何在 $scope.submitWorkshop 中将其作为 json 返回?
  • 有没有办法让我测试表单结果是否传入?

标签: angularjs html forms


【解决方案1】:

$http({ method: 'POST', data: $scope.result.form, url: 'path/to/api' })

这会将 $scope.result.form 对象的 JSON 数据发送到所需的 API URL。

【讨论】:

  • 所以我应该把它放在 $scope.submitWorkshop 中?这样当我按下提交时,这将被执行?还有,我会得到什么样的json格式的回报呢?
  • 是的。你会得到{ field-name: value, field-name: value .... }。使用开发工具调试您的网络请求。
  • 谢谢!让我试试
  • 您好,打扰您了!但是当我调试它时,我发现 $scope.result.form 是未定义的?
  • 您的模型是ng-model="result.form[field_name]"。你确定它不应该是 x.field_name 吗?
猜你喜欢
  • 2020-01-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-09-15
  • 2019-04-22
  • 1970-01-01
  • 2014-05-15
相关资源
最近更新 更多