Question

我想使用ng-click重置输入值，将其值添加到$ scope var然后重置输入值

这是我的HTML

<form ng-controller="questionsCTRL" class="ui large form" name="questionForm" ng-submit="addSurvey(questionForm)" novalidate>

<div class="ui segment" id="quest-answers">


  <div class="two fields">
    <div class="field">
      <label>Add New Answer</label>
      <div class="ui action input">
        <input type="text" required name="answers" ng-model="answers"
        ng-required="true" ng-minlength="5" placeholder="answer...">
        <button type="button"
        ng-click="addAnswer(questionForm.answers.$viewValue)"
        ng-disabled="questionForm.answers.$invalid"
        class="ui teal right labeled icon button">
        <i class="add icon"></i>
        Add
      </button>
    </div>
    <small ng-show="questionForm.answers.$invalid" class="ui meta teal">Answers is required</small>
  </div>
</div>
<div class="ui grid">
  <div class="row">
    <div class="eleven wide column">

        <div class="field">
          <div class="ui  attached segment" ng-repeat="answer in answerGroup">
            {{answer.text}}
            <a href class="ui right floated link"><i class="circular delete icon"></i></a>
          </div>
        </div>

    </div>
  </div>
</div>
</div>
</form>

这是控制器内容

UIASSIGN1.controller('questionsCTRL', function($scope , $rootScope , $state, $stateParams , $http ) {
            // #dummy controller
      $rootScope.sectorName       = 'Questions';
      var _SID                    = $stateParams.id;
      $scope.answerGroup          = [];

      $http.get("api/survey/survey.json")
      .then(function(response) {
        var surveyArray = response.data;
        $scope.surveyArray = [];
        for (var i = 0; i < surveyArray.length; i++) {
          var thisItem  = surveyArray[i];
          var thisElm   = {name:thisItem.name,value:parseInt(thisItem._id)};
          $scope.surveyArray.push(thisElm)
        }

      });

      $scope.addAnswer = function(answer){
          var inArray = {
            text : answer
          };
          $scope.answerGroup.push(inArray);
          $scope.questionForm.answers = {};
      }
});

此ng-click为$ scope.userGroups添加值，但它不会重置表单输入值，只会将$ scope.questionForm.answers值重置为{}

Answer 1

你可以这样做。定义范围

的答案

$scope.theAnswer = '';

将此设置为输入字段的ngModel：

ng-model="theAnswer"

像这样简化你的ng-click并直接在控制器中添加数组的答案，然后清理答案：

ng-click="addAnswer()"

$scope.addAnswer = function(){
      var inArray = {
        text : $scope.theAnswer
      };
      $scope.answerGroup.push(inArray);
      $scope.theAnswer = '';
  }

Answer 2

正如我在评论中提到的，$scope.answer的值映射到此元素：

    <input type="text" required name="answers" ng-model="answers"
    ng-required="true" ng-minlength="5" placeholder="answer...">

ng-model="answers"表示在作用域中定义名为answers的变量。然后在角度，您可以使用$scope.answers访问它，这就是原因：

$scope.answers = "";

将重置输入元素。

不能使用ng-click重置表单输入

2 个答案: