使用angularjs清除html表单答案

【问题标题】：clear html form with angularjs使用angularjs清除html表单
【发布时间】：2014-06-30 01:16:49
【问题描述】：

我想在您按下提交时清除我在 html 表单中的输入值。该功能在控制器中。我试图这样做： $scope.name = "" 或 null （对于每个输入）但它不起作用。这是html文件：

    <label for="messageName">Message Name:</label>
    <input type="text" ng-model="message.name"  name="message.name" required/>

    <label for="text">Text:</label>
    <input type="textarea" ng-model="message.text" name="message.text" required/>

    <label for="images">Images:</label>
    <input type="text" ng-model="message.images" name="message.images" required/>

    <label for="template">Template:</label>
    <input list="template" ng-model="message.template" name="message.template" required/>
    <datalist id="template">
        <option value="template1">
        <option value="template2">
        <option value="template3">
    </datalist>

    <label for="millisecToShow">Millisec To Show:</label>
    <input type="number" min="1000" max="10000" ng-model="message.millisecToShow" name="message.millisecToShow" required/>

    <label for="timeFrame">Time Frame:</label>
    <label for="TimeStart">Start Time:</label>
    <input type="datetime-local" ng-model="message.startDateTime" name="message.startDateTime" required/>
    <label for="DateStart">End Time:</label>
    <input type="datetime-local" ng-model="message.endDateTime" name="message.endDateTime" required/>

    <label for="days">Days:</label><br>
    <form>
        <input type="checkbox" ng-model="message.sunday" name="message.days" value="Sunday">Sunday<br>
        <input type="checkbox" ng-model="message.monday" name="message.days" value="Monday">Monday<br> 
        <input type="checkbox" ng-model="message.tuesday" name="message.days" value="Tuesday">Tuesday<br> 
        <input type="checkbox" ng-model="message.wednesday" name="message.days" value="Wednesday">Wednesday<br> 
        <input type="checkbox" ng-model="message.thursday" name="message.days" value="Thursday">Thursday<br> 
        <input type="checkbox" ng-model="message.friday" name="message.days" value="Friday">Friday<br> 
        <input type="checkbox" ng-model="message.saturday" name="message.days" value="Saturday">Saturday<br> 
    </form>

    <label for="screenId">Screen ID:</label>
    <input list="screenId" ng-model="message.screenId" name="message.screenId" required/>
    <datalist id="screenId">
        <option value="screen1">
        <option value="screen2">
        <option value="screen3">
    </datalist>

    <button ng-click="createButton()">Create</button>

这是控制器：

angular.module('CreateCtrl', []).controller('CreateController', function($scope, superService) {

    $scope.createButton = function() {
        superService.insert($scope.message).then(function (result)
            if (result == "true") {
                alert('Create successful');
                $scope.tagline = 'Create successful';
                return result.data;
            }
            else {
                $scope.tagline = 'Cannot create message';
            }
        });
    };
});

我想在发送文件后删除输入。谢谢（：

【问题讨论】：

向我们展示您的尝试，并准确告诉我们发生了什么。这是一个简化的功能示例：plnkr.co/edit/VpvJDjT5BhjHFpucVOEj?p=preview

标签： html angularjs

【解决方案1】：

考虑到所有字段都引用$scope.message.*，像这样清理整个message对象不是更容易吗？

if (result === "true") {
    alert('Create successful');
    $scope.tagline = 'Create successful';

    // cleaning up
    $scope.message = {
        name: null,
        text: null,
        images: null,
        template: null
    };

    return result.data;
}

事实上，如果你想把整个对象擦干净，如果是我，我会选择 $scope.message = {}; 并完成它。

【讨论】：