如何从angularjs表单提交中省略属性?

时间:2013-11-21 16:44:56

标签: angularjs

我有一个视图,从我的服务器调用包含下拉列表的表单模型。

当我提交表单时,我的下拉列表中的所有状态也会被提交。当状态id全部需要时,似乎很难发回这些值。如果表单有多个下拉列表,则此问题更加复杂。我还注意到,即使我的表单中没有包含我的模型中包含的任何属性也会被提交。这似乎不正确。

如何省略某些不属于我的表单的属性?

我的模型看起来像这样:

{
    "id":25, 
    "name":"joe smith",
    "dummyProperty": "whatever", 
    "stateId":5, 
    "states":[
        {"value":1, "label": "Alabama"}, 
        {"value:2, "label": "Alaska"}, 
        {etc...}
            ]
}

我的表单如下:

<form autocomplete="off" novalidate name="form">
    <input type="hidden" ng-model="item.id" id="id" name="id" />
    <div class="se-row">
        <label>Name</label>
        <input type="text" ng-model="item.name" id="name" name="name" />
    </div>
    <div class="se-row">
        <label>State</state>
        <select ng-model="item.stateId" id="stateId" name="stateId">
            <option value="0">Select...</option>
            <option value="{{o.value}}" ng-repeat="o in item.states">{{o.label}}</option>
        </select>
    </div>
    <div class="se-row">
        <button ng-disabled="form.$invalid" ng-click="postNew()" ng-class="{'disabled-btn': form.$invalid}">Save</button>
    </div>
</form>

注意:是的我知道ng-options但我没有用来发回整个选项对象并调整我的服务器模型以适应这个功能。 ng-repeat效果很好。

感谢。

修改 这是postNew()函数:

$scope.postNew = function () {
        ApiFactory.Crud.save({ ctrl: ApiFactory.ctrl }, $scope.item).$promise.then(function() {
            //modal stuff
        },
            function(response) {
                handleError(response);
            });
    };

我的工厂很标准:

TabsApp.factory('ApiFactory', function ($resource, $http, $q, $rootScope) {
    var apiService = {
        List: $resource('/api/patient/:patientId/:ctrl', { patientId: '@patientId', ctrl: '@ctrl' }),
        Crud: $resource('/api/:ctrl/:id', { ctrl: '@ctrl', id: '@id' }, { update: { method: 'PUT' } })
    };
//I set my url parameters here and then broadcast them down to child scopes

return apiService;
});

编辑2 我也尝试过使用ngSubmit,它具有我上面描述的相同行为。表单仍然提交所有状态,甚至是dummyProperty。

<form ng-submit="postNew()">
  //same as above
  <button type="submit">Save</button>
</form>

0 个答案:

没有答案