如何在angularjs中重置輸入字段和復選框
[英]How to reset input field and checkbox in angularjs
問題描述
我有一個帶有單個輸入的表單，另一個帶有兩個復選框，分別標有“是”和“否”。當我單擊“是”時，我想保存輸入值[這不是問題]。 單擊“是”后，應重新設置輸入和復選框。 我怎樣才能做到這一點？ 將ng-model設置為null對我不起作用。
var app = angular.module("app", ['ionic']); app.controller("MainCtrl", function ($scope,$timeout,$state) { $scope.selected='other'; $scope.refresh = function(selected,answer){ if(selected == 'yes'){ $timeout(function(){ $scope.$apply(function(){ $scope.uncheck = false; }) },250); } } });
<html> <head> <link rel="stylesheet" href="http://code.ionicframework.com/1.3.2/css/ionic.css" /> <script src="http://code.ionicframework.com/1.3.2/js/ionic.bundle.min.js"></script> </head> <body> <div class="bar bar-header bar-assertive"> <h1 class="title">Example</h1> </div> <div ng-app="app" style="margin-top:64px;padding:20px;"> <div ng-controller="MainCtrl" class="has-header"> <label class="item item-input"> <textarea msd-elastic ng-model="answer.three" placeholder="Your answer"></textarea> </label> <div> <ion-checkbox class="cs-checkbox" ng-model="selected" ng-true-value="'no'" ng-change="statethree(selected,answer)">No</ion-checkbox> <ion-checkbox class="cs-checkbox" ng-disabled="!answer.three" ng-checked="uncheck" ng-model="selected" ng-true-value="'yes'" ng-change="refresh(selected,answer)">Yes</ion-checkbox> </div> </div> </div> </body> </html>
1 個解決方案
解決方案1
1 已采納 2017-02-12 11:47:44
以下是帶有復選框的工作代碼，但通常在這種情況下，最好使用單選按鈕（但那樣會影響您的UI設計）
var app = angular.module("app", ['ionic']); app.controller("MainCtrl", function ($scope,$timeout,$state) { $scope.selected='other'; $scope.refresh = function(selected,answer){ if($scope.selected){ $timeout(function() { $scope.answer.three = ''; $scope.selected = ''; }, 250) }; } });
<html> <head> <link rel="stylesheet" href="http://code.ionicframework.com/1.3.2/css/ionic.css" /> <script src="http://code.ionicframework.com/1.3.2/js/ionic.bundle.min.js"></script> </head> <body> <div class="bar bar-header bar-assertive"> <h1 class="title">Example</h1> </div> <div ng-app="app" style="margin-top:64px;padding:20px;"> <div ng-controller="MainCtrl" class="has-header"> <label class="item item-input"> <textarea msd-elastic ng-model="answer.three" placeholder="Your answer"></textarea> </label> <div> <ion-checkbox class="cs-checkbox" ng-true-value="false" ng-model="selected">No</ion-checkbox> <ion-checkbox class="cs-checkbox" ng-disabled="!answer.three" ng-model="selected" ng-change="refresh(selected,answer)">Yes</ion-checkbox> </div> </div> </div> </body> </html>
另外請注意，您不應在$timeout回調中使用$apply因為$timeout已經觸發了角度摘要循環。
AngularJS：重置功能重置表，但不清除輸入字段並選擇？
[英]AngularJS: reset function resets the table but not clears input field and select?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.