Question

我有一个单输入的表单和另外两个标有Yes和No.的复选框。我想点击是[这不是问题]时保存输入值。单击是后，输入和复选框应重置。我怎样才能做到这一点？将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>

Answer 1

下面是带有复选框的工作代码，但通常在这种情况下，最好使用单选按钮（但它会更新你的UI设计）

＆＃13;

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)
    };
     
  }
});

＆＃13;

<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>

＆＃13;

另请注意，您不应在$apply回调中使用$timeout，因为$timeout已触发角度摘要周期。

如何重置angularjs中的输入字段和复选框

1 个答案: