javascript - ionic + Angular : Unable to clear input field

Question

在我的 Ionic 应用程序中，我有一个表单，其中 form 内有一个 input 字段和一个 button。单击按钮后， Controller 内部应发生某些操作，并且输入字段应清除，但它不会发生。这看起来很简单，但我不明白它出了什么问题。请指教。 我读过here , here和 here ，没有任何帮助。 html:

<form novalidate name="customCategoriesForm">
  <ion-list>
    <ion-item>
      <div class="item item-input item-stacked-label noBorder">
      <span class="input-label">Create a new category</span>
      <div class="catRow">
        <input type="text"
              id="newCategoryInput"
              name="addNewCategory" 
              placeholder="Category name" 
              ng-model="addNewCategory"
              ng-minlength="3"
              required
              >
            <button ng-click="addCategory(addNewCategory)"
                    ng-disabled="!customCategoriesForm.addNewCategory.$valid" 
                    class="button button-small button-outline button-positive catButton">Add</button>
      </div>
    </div>
    </ion-item>
    <ion-item>
       ...
    </ion-item>
  </ion-list>
</form>

JS:

$scope.addCategory = function (newCategory) {
  $scope.ExistingCategoriesArray.push(newCategory);
  $scope.addNewCategory = "";
}

编辑:

没有出现错误，什么也没有发生..

Answer 1

要解决您的问题，请将 $scope.addNewCategory 更改为 $scope.addNewCategory.value，如下所示:

.js:

$scope.addNewCategory = {value : ""}; // initialize a object addNewCategort with the property value = ''

$scope.addCategory = function (newCategory) {
  $scope.ExistingCategoriesArray.push(newCategory);
  $scope.addNewCategory.value = ""; // clear the property value of addNewCategory
}

HTML:

<form novalidate name="customCategoriesForm">
  <ion-list>
    <ion-item>
      <div class="item item-input item-stacked-label noBorder">
      <span class="input-label">Create a new category</span>
      <div class="catRow">
        <input type="text"
              id="newCategoryInput"
              name="addNewCategory.value" <!-- Edit this line -->
              placeholder="Category name" 
              ng-model="addNewCategory"
              ng-minlength="3"
              required
              >
            <button ng-click="addCategory(addNewCategory.value)" <!-- and this line -->
                    ng-disabled="!customCategoriesForm.addNewCategory.$valid" 
                    class="button button-small button-outline button-positive catButton">Add</button>
      </div>
    </div>
    </ion-item>
    <ion-item>
       ...
    </ion-item>
  </ion-list>
</form>

您始终需要在 ngModel 中使用点。阅读 this reference .