设置清除输入字段时遇到问题 AngularJS

Question

设置清除输入字段时遇到问题

我目前正在尝试在添加新指令文本后清除 ng-model="newInstruction.instructionText" 上的输入框。这是我尝试将其重置为空字符串但输入字段未清除的代码。这是为什么？

我尝试在 updateInstructionText 函数中记录以下内容：

Console.log (newInstruction) returns 未在控制台中定义。

Console.log ($scope.newInstruction) returns 在控制台中未定义。

Console.log（指令）returns 一个包含指令文本的对象 ex: Object {instructionText: ‘new instruction’}

控制器：

angular.module('app').controller('InstructionController', function($scope, $http, NgTableParams, $filter) {
  $scope.initList = function() {
    $scope.getRemoteInstructions = function(typed) {
      $http.get("/api/instructions?searchInstructionText=" + typed).then(function(response) {
        $scope.instructionChoices = _.map(response.data, function(instruction) {
          instruction.instructionText;
        });
      });
    };
    $scope.updateInstructionText = function(instruction) {
      var instructionPromise;
      if (instruction.id) {
        instructionPromise = $http.put("api/instructions/" + instruction.id, instruction);
      } 
      else {
        instructionPromise = $http.post("/api/instructions", instruction);
      }

      $scope.newInstruction = '';
      $instruction = '';

      instructionPromise.then(function(response) {
        $('#instructionModal').closeModal();
        $scope.instructionTable.reload();
      });
    };
  };
});

HTML

<div class="container-fluid" ng-init="initList()">
  <div class="row">
      <h3>Total Instructions: {{totalInstructions}}</h3>
      <table class="striped highlight bordered" ng-table="instructionTable" show-filter="true">
        <tr>
          <td class="input-field">
            <input placeholder="Enter New Instruction Text" ng-model="newInstruction.instructionText" type="text">
          </td>
          <td>
            <a class="waves-effect waves-light btn" ng-click="updateInstructionText(newInstruction)">Add</a>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <ng-include src="'/views/modals/instructionModal.html'"></ng-include>
</div>

Answer 1

只需执行：

instruction.instructionText = null

由于您是通过name指令访问函数内部的参数（对象），如果将其设置为null，则可以清空输入字段

Answer 2

简单做 $scope.newInstruction.instructionText=空

设置清除输入字段时遇到问题 AngularJS

Having trouble setting clearing input field AngularJS

html

javascript

angularjs

angular-ngmodel