如何以老式的方式提交AngularJS模型?

时间:2013-08-27 08:40:40

标签: forms angularjs

在我的Angular应用程序中,我有一个绑定到模型的表单。表单没有所有模型属性的字段。 当用户点击提交按钮时,我希望以传统方式发布表单,而不是AJAX请求(我必须处理已有的服务器端脚本)。

如果我在表单中添加action,那基本上有效。但它显然只提交表单中的当前字段,而不是像使用$http服务时完成的整个模型一样。 此外,它不会创建名称属性。

我如何以完整的模型数据提交旧式的表格?我是否必须自己创建缺少的表单字段,或者有没有办法让Angular为我做这个?

<script>
    angular.module('foobar', []).controller('ContentCtrl', ['$scope', function($scope) {
        $scope.content = {
            'title': 'Foo',
            'subtitle': 'Bar',
            'text': 'desc' // this field is missing in the form itself and therefore is not submitted
        };
    }]);
</script>

<form action="http://postcatcher.in/catchers/521c6510429f840200000169" method="post" ng-controller="ContentCtrl">
    <input type="text" name="est" ng-model="content.title" value="asdf">
    <input type="text" ng-model="content.subtitle">
    <button>submit</button>
    <a href="http://postcatcher.in/catchers/521c6510429f840200000169">see post result</a>
</form>

这里是一名掠夺者:http://plnkr.co/edit/5XYGH9hTe7cpchSFWbTK

1 个答案:

答案 0 :(得分:3)

当您拥有定义了操作的表单时,Angular不会执行任何特殊操作。这是纯粹的html表单提交,其中包含已定义的字段。

通常你会使用:

<input type="hidden" ng-model="content.desc">

但有角度currently (1.2.0rc1)仍然不支持 ng-model 隐藏输入的绑定。

解决方法是:

<input type="text" name="text" ng-model="content.text" ng-hide="true">