【问题标题】:Ionic+Angular : Unable to clear input fieldIonic+Angular:无法清除输入字段
【发布时间】:2017-05-31 06:13:20
【问题描述】:

在我的 Ionic 应用程序中,我有一个表单,在 formbutton 内有一个 input 字段。在点击button 时,controller 内应该会发生一些操作,input 字段应该会被清除,但它确实不会发生。这似乎很容易,但我不明白它出了什么问题。请指教。 我读了hereherehere,没有任何帮助。 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 = "";
}

编辑:

没有出现错误,没有任何反应..

【问题讨论】:

  • 一些错误输出?
  • 不,没有任何反应。
  • 类别也没有添加?
  • 正在添加一个新类别。

标签: javascript angularjs ionic-framework


【解决方案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

【讨论】:

  • 有效!你能用几句话详细说明吗?我以前从未见过ng-model 的这种用法。
  • 基本上你不应该在双向绑定中使用原始类型。始终使用对象。来自this answer如果你双向绑定到一个原语(比如你的情况下的布尔值),setter 会将它设置在当前范围而不是定义它的范围上,这可能会导致当你有一个带有很多子作用域的大型用户界面时会让人头疼。另一个很好的解释可以在this video中找到。
猜你喜欢
  • 1970-01-01
  • 2020-05-20
  • 2017-05-30
  • 2020-04-25
  • 2020-12-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多