angularjs – 如何使用角度重置表单

发布时间：2020-12-17 17:53:23 所属栏目：安全来源：网络整理

导读：这是我的代码： function CustomersController ($scope,$http) { $http.get('/ci_angular/api/customers/').success(function(customers){ $scope.customers = customers; }); $scope.addCustomer = function(){ var customer = { customerName: $scope.cust

这是我的代码：

function CustomersController ($scope,$http) {
    $http.get('/ci_angular/api/customers/').success(function(customers){
        $scope.customers = customers;
    });

    $scope.addCustomer = function(){
        var customer = {
            customerName: $scope.customerNameText,email: $scope.emailText,address: $scope.addressText,city: $scope.cityText,state: $scope.stateText,postalCode: $scope.postalCodeText,country: $scope.countryText,};

        $scope.customers.push(customer);

        // update 1

        $http.post('/ci_angular/api/customers/customer',customer);

        $scope.emptyCustomers= {};

        $scope.reset = function() {
            $scope.customers = angular.copy($scope.emptyCustomers);
        };

        // update 2

        $http.post('/ci_angular/api/customers/customer',customer)
            .success(function() {           
                 $scope.emptyCustomers= {};

                 $scope.customerForm.$setPristine();
            }
        );
    }
}

在成功后,我想重置所有表单字段,但它不起作用,
我的表格名称是customerForm,有什么我错过的吗？提前致谢

解决方法

如果要在成功调用ajax之后重置表单字段$dirty flags,则应从成功处理程序内部调用setPristine()：

$http.post('/ci_angular/api/customers/customer',customer)
        .success(function() {           
             $scope.customerForm.$setPristine();
        });

如果要清除表单域,则应在控制器内初始化模型,以便将它们绑定到视图,并在以后清除它们：

控制器：

function CustomersController ($scope,$http) {
    // initialize an empty customer. 
    $scope.customer = {};
    // its good practice to initialize your customers array too
    $scope.customers = [];

    $http.get('/ci_angular/api/customers/').success(function(customers){
        $scope.customers = customers;
    });

    $scope.addCustomer = function(customer){

        $http.post('/ci_angular/api/customers/customer',customer).success(function() {
            // push the customers to the array only when its successful
            $scope.customers.push(customer);

            // clearing the customer form is easy now,just set it to an empty object
            $scope.customer = {};
        });

    }
}

var app = angular.module('app',[]);
app.controller('CustomersController',CustomersController);

HTML

<div ng-app="app" ng-controller="CustomersController">
     <form name="customerForm">
            customerName:<input type="text" name="name" ng-model="customer.name" /><br />
            email: <input type="text" name="email" ng-model="customer.email" /><br />
            address: <input type="text" name="address" ng-model="customer.address" /><br />
            city: <input type="text" name="city" ng-model="customer.city" /><br />
            state: <input type="text" name="state" ng-model="customer.state" /><br />
            postalCode: <input type="text" name="postalcode" ng-model="customer.postalCode" /><br />
            country: <input type="text" name="country" ng-model="customer.country" /><br />

        <button ng-click="addCustomer(customer)">Add Customer</button>
     </form>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!