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>

当用户首先选择电子邮件，在主题字段中写一些东西，然后改回短信类型，然后当我在 $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]
    )
);