Question

我已经做了很多工作来解决这个问题，但它没有用。我正在使用 Ionic的搜索栏。当没有填写任何内容时，我的输入字段获得类ng-empty（因此这是默认状态）。输入字段在填写时会获得ng-not-empty类。

所以，我可以用jQuery或其他东西解决这个问题，但我看到Angular有办法做到这一点。这是HTML：

 <ion-view view-title="Testing">

     <ion-header-bar align-title="center" class="bar">
      </ion-header-bar>

         <ion-content class="scrollBar">

            <ion-searchbar class="searchBar" ng-app="myApp">
               <label>
                 <input class="searchField" type="search" ng-model="itemsSearch"/>
                  <a class="clear" data-ng-click="saveParentComment()">X</a>
                  <i class="icon ion-search placeholder-icon"></i>
              </label>
           </ion-searchbar>

      </ion-content>
  </ion-view>

我已将此添加到我的控制器中：

myApp.controller('SearchController', function ($http, $scope, $state) {

 $scope.saveParentComment = function () {
      $scope.itemsSearch = "";
  };

然而，这不起作用，我不明白为什么。难道我做错了什么？如果是这样，我该如何解决？我已经看到很多关于这个的问题，但没有答案对我有用。我也没有在控制台中看到任何错误......

我唯一看到的是，当我点击它时，锚点会获得一个新类＆＃34;激活＆＃34; 。

Answer 1

我没有在您的视图中看到您放置 SearchController 此外ng-model应该与 dot 运算符一起使用

尝试，

 <ion-view view-title="Testing"  ng-app="myApp" ng-controller="SearchController">
     <ion-header-bar align-title="center" class="bar">
      </ion-header-bar>
         <ion-content class="scrollBar">
            <ion-searchbar class="searchBar">
               <label>
                 <input class="searchField" type="search" ng-model="myObj.itemsSearch"/>
                  <a class="clear" data-ng-click="saveParentComment()">X</a>
                  <i class="icon ion-search placeholder-icon"></i>
              </label>
           </ion-searchbar>
      </ion-content>
  </ion-view>

在控制器中：

myApp.controller('SearchController', function ($http, $scope, $state) {
 $scope.myObj = {};
 $scope.saveParentComment = function () {
      $scope.myObj.itemsSearch = "";
};

Answer 2

在angular中，每个指令都会创建新范围。 itemsSearch绑定到指令范围，对控制器不可见。

将其用作控制器中$scope上定义的对象的一部分。

    myApp.controller('SearchController', function ($http, $scope, $state) {

    $scope.objItem = {itemsSearch : ""};

     $scope.saveParentComment = function () {
          $scope.objItem.itemsSearch = "";
      };

HTML：

<input class="searchField" type="search" ng-model="objItem.itemsSearch"/>

Answer 3

试试这个： -

 <input type="text" class="form-control" data-ng-model="searchAll"></input> 
        <a class="clear" href="" data-ng-click="clearSearch()">X</a>

 app.controller("SearchController", function ($scope) {
    $scope.searchAll = "";

    $scope.clearSearch = function () {
        $scope.searchAll = "";
    };
});

Answer 4

请你确定放SearchController，你可以试试这个吗

<ion-view view-title="Testing"  ng-app="myApp" ng-controller="SearchController">
 <ion-header-bar align-title="center" class="bar">
  </ion-header-bar>
     <ion-content class="scrollBar">
        <ion-searchbar class="searchBar">
           <label>
             <input class="searchField" type="search" ng-model="itemsSearch"/>
              <a class="clear" data-ng-click="saveParentComment()">X</a>
              <i class="icon ion-search placeholder-icon"></i>
          </label>
       </ion-searchbar>
  </ion-content>

和功能：

$scope.saveParentComment = function () {
  console.log("clear");
  $scope.itemsSearch = null;
};

如果您在控制台日志中看到清除，则表明您的功能正常运行。你也可以在控制器中设置初始值，就像itemSearch一样。 $scope.itemsSearch = "Search Here";

Answer 5

我认为您的控制器存在问题。首先在控制台中尝试功能是否正常

$scope.saveParentComment = function () {
          console.log("working");
      };

如何清除输入字段onclick？

5 个答案: