1

我的表单对每种类型都有不同的字段：

<form>
    <select ng-model="message.type">
         <option>SMS</option>
         <option>Email</option>
    </select>

    <div ng-if="message.type=='sms'">
         <textarea ng-model="message.body"></textarea>
    </div>

    <div ng-if="message.type=='email'">
         <input type="text" ng-model="message.subject" />
         <textarea ng-model="message.body" class="ckeditor"></textarea>
    </div>
</form>

它工作得很好但是当用户首先选择电子邮件，在主题字段中写一些东西，然后改回 sms 类型，然后当我在 $http.post 中发送消息对象时，它发送带有主题子对象的对象，即使 dom元素被删除。

我如何解决它？我只想发送链接到现有 dom 元素的数据。

谢谢

4

1 回答 1

2

我可以想象几种解决方案：

删除不合适的属性

您可以在所选选项更改时执行此操作：

$scope.deleteInappropriateAttribute = function () {
    if ($scope.message.type !== 'email') {
        delete $scope.message.subject;
    }
};

<select ng-model="message.type" ng-change="deleteInappropriateAttribute()">
     <option>SMS</option>
     <option>Email</option>
</select>

最好在发布表单之前执行此操作，以免用户message.subject在不同选项之间频繁切换时强制用户重写。

将不同的变量关联到表单的每个部分

<form>
    <select ng-model="message.type">
         <option>SMS</option>
         <option>Email</option>
    </select>

    <div ng-if="message.type=='sms'">
         <textarea ng-model="message.global.body"></textarea>
    </div>

    <div ng-if="message.type=='email'">
         <input type="text" ng-model="message.email.subject" />
         <textarea ng-model="message.global.body" class="ckeditor"></textarea>
    </div>
</form>

然后，只发布适当的变量：

$http.post(
    'myUrl.php',
    angular.extend(
        {},
        $scope.message.global,
        $scope.message[$scope.message.type]
    )
);
于 2014-05-18T10:01:13.907 回答