Question

我在HTML中添加了一个清除按钮，但我还是一个新手。如何点击清除按钮清空搜索字段？如果用户输入了一些文字而没有出现任何内容，我希望能够将其删除。

小提琴：https://jsfiddle.net/kiddigit/znasgeez/1/

  <button class="btn btn-success pull-right">
    <span ng-model="search" ng-click="clearSearch()"></span> Clear
  </button>


var artistControllers = angular.module('artistControllers', []);

artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
  $http.get('js/data.json').success(function(data) {
    $scope.artists = data;
    $scope.artistOrder = 'name';
  });
}]);

artistControllers.controller('DetailsController', ['$scope', '$http','$routeParams', function($scope, $http, $routeParams) {
  $http.get('js/data.json').success(function(data) {
    $scope.artists = data;
    $scope.whichItem = $routeParams.itemId;

    if ($routeParams.itemId > 0) {
      $scope.prevItem = Number($routeParams.itemId)-1;
    } else {
      $scope.prevItem = $scope.artists.length-1;
    }

    if ($routeParams.itemId < $scope.artists.length-1) {
      $scope.nextItem = Number($routeParams.itemId)+1;
    } else {
      $scope.nextItem = 0;
    }

  });
}]);

Answer 1

您可以将输入绑定的范围变量设置为空字符串。

http://jsfiddle.net/Lvc0u55v/5156/

基本上，在你的clearSearch（）方法中你可以

$scope.query = "";

Answer 2

尝试使用angular.copy（{}）。哪个会清空你的田地看看我创建的plunker：https://plnkr.co/edit/LYZeKt3jZXhoCmfvgmLw?p=preview

$scope.search = angular.copy($scope.default);

是关键。

如何使用角度清除搜索字段？

2 个答案: