Question

我是Ionic的新手，问题是单击Submit按钮的输入字段未清除。单击按钮将数据发布到服务器后会重新加载同一页面但已输入字段。 html

     <div style="margin-left: 20px;margin-right: 20px;margin-top: 55px;"> 
        <div class = "list">
           <label class = "item item-input item-stacked-label">
           <!-- <span class = "input-label">Name</span> -->
           <input type = "text" placeholder = "Name" required ng-model="name" clearInput="true"/>
           </label>
        </div>
        <div class = "list">
           <label class = "item item-input item-stacked-label">
           <!-- <span class = "input-label">Mobile Number</span> -->
           <input type = "tel"maxlength="10" clearInput="true" placeholder = "Mobile No." pattern="[1-9]{1}[0-9]{9}" required ng-model="mobile" />
           </label>
        </div>
        <div class="padding text-right" style="margin-top: -12px;">
           <button class="button button-positive " ng-click="enter(name,mobile)" style="width: 100%;">
           Submit
           </button>
        </div>
 </div>

js

$scope.enter = function (name,mobile) {
                if (name == null) {
                    var alertPopup = $ionicPopup.alert({
                        template: 'Please Enter Name!'
                    });

                } else if (mobile == null) {
                    var alertPopup = $ionicPopup.alert({
                        template: 'Please Enter Mobile Number!'
                    });

                }
                 else  {
        $ionicLoading.show({
                    template: '<ion-spinner></ion-spinner><p>Loading...</p>'
                          });
       var link = 'http://mountsystem/mobileapi/coreapi.php';
            var datasend = $.param({
                request_code: 'demo_attendance',
                batch_id:$stateParams.batchId,
                mobile_no: mobile,
                student_name: name,
                franchise_id: $scope.userDetails.franchise_id,
                entered_by:$scope.userDetails.employee_id
        });
        console.log(datasend);
        $http.post(link, datasend, config)
                .success(function (response) {
                    $ionicLoading.hide();
                    console.log(response);
                    if (response.response_code == 'STATUS_OK') {
                        $scope.list = response;
                        console.log($scope.list);                             
                        var alertPopup = $ionicPopup.alert({
                          title: 'Hurrayy',
                          content: 'Successfully Submitted !'
                        })

                    } else {

                        var alertPopup = $ionicPopup.alert({
                            title: 'Error!',
                            template: response.msg
                        });
                    }
                }).error(function (response) {
            $ionicLoading.hide();
            var alertPopup = $ionicPopup.alert({
                title: 'ServerError!',
                template: 'ServerError' + response
            });
        });
}}

我只希望我单击提交按钮后，两个输入字段（用户名和手机号码）都将被清除，以便我再次输入新的详细信息。请帮助我解决此问题。

Answer 1

尝试在.js文件中将名称和电话变量设置为“”。它将清除前面的字段。

为什么您仍在使用Ionic1。我建议改用Ionic 3，等待第四个版本真正稳定。

Answer 2

使用以下代码更改ng-model变量

 <div style="margin-left: 20px;margin-right: 20px;margin-top: 55px;"> 
        <div class = "list">
           <label class = "item item-input item-stacked-label">
           <!-- <span class = "input-label">Name</span> -->
           <input type = "text" placeholder = "Name" required ng-model="data.name" clearInput="true"/>
           </label>
        </div>
        <div class = "list">
           <label class = "item item-input item-stacked-label">
           <!-- <span class = "input-label">Mobile Number</span> -->
           <input type = "tel"maxlength="10" clearInput="true" placeholder = "Mobile No." pattern="[1-9]{1}[0-9]{9}" required ng-model="data.mobile" />
           </label>
        </div>
        <div class="padding text-right" style="margin-top: -12px;">
           <button class="button button-positive " ng-click="enter(data.name,data.mobile)" style="width: 100%;">
           Submit
           </button>
        </div>
 </div>

$scope.data = {};

$scope.enter = function (name,mobile) {
                if (name == null) {
                    var alertPopup = $ionicPopup.alert({
                        template: 'Please Enter Name!'
                    });

                } else if (mobile == null) {
                    var alertPopup = $ionicPopup.alert({
                        template: 'Please Enter Mobile Number!'
                    });

                }
                 else  {
        $ionicLoading.show({
                    template: '<ion-spinner></ion-spinner><p>Loading...</p>'
                          });
       var link = 'http://mountsystem/mobileapi/coreapi.php';
            var datasend = $.param({
                request_code: 'demo_attendance',
                batch_id:$stateParams.batchId,
                mobile_no: mobile,
                student_name: name,
                franchise_id: $scope.userDetails.franchise_id,
                entered_by:$scope.userDetails.employee_id
        });
        console.log(datasend);
        $http.post(link, datasend, config)
                .success(function (response) {
                    $ionicLoading.hide();
                    console.log(response);
                    if (response.response_code == 'STATUS_OK') {
                        $scope.list = response;
                        console.log($scope.list);
                        $scope.data.mobile = '';
                         $scope.data.name = '';                 
                        var alertPopup = $ionicPopup.alert({
                          title: 'Hurrayy',
                          content: 'Successfully Submitted !'
                        })

                    } else {

                        var alertPopup = $ionicPopup.alert({
                            title: 'Error!',
                            template: response.msg
                        });
                    }
                }).error(function (response) {
            $ionicLoading.hide();
            var alertPopup = $ionicPopup.alert({
                title: 'ServerError!',
                template: 'ServerError' + response
            });
        });
}}

Answer 3

我对该解决方案感到非常惊讶，但是该解决方案对我有用，问题是不是直接在$scope对象内部设置值，而是应该将其放在$ scope对象的任何对象中，例如< / p>

<input type="text" placeholder="Enter new todo" ng-model="data.newtodo">首先将输入字段的模型更改为

在我的控制器顶部

$scope.data = {};

以及成功回调之后

$scope.data.newtodo = "";

如何清除离子1中的按钮单击输入字段

3 个答案: