Angularjs-保存不存在的dom元素的数据（ngIf = false）

Question

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

<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元素的数据。

由于

Answer 1

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

删除不适当的属性

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

$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]
    )
);