javascript - 使用 AngularJS 单击搜索结果时将输入重置为初始值

Question

我在 ng-repeat 上有一个列表，它显示 $http 查询的结果列表(绑定(bind)到输入)。我希望当用户单击结果之一时列表消失，并恢复模型的初始空值。基本上，功能如下:

用户搜索术语，列表显示结果，用户单击结果，列表消失，用户再次单击输入进行另一次搜索，显示包含新结果的列表。

到目前为止，我已经设法使列表消失，但当用户进行另一次搜索时，无法使其再次出现。

相关代码如下:

<input type="text" ng-model="name" ng-click="Research()"/>
  <ul ng-hide="clicked" ng-show="retype">
    <li ng-repeat="result in results" ng-click="getDetails(result.id)">{{result.title}}</li>
  </ul>

还有 JS:

function Ctrl($scope, $http) {
var get_results = function(name) {
  if (name) {
    $http.get('http://api.discogs.com/database/search?type=artist&q='+ name +'&page=1&per_page=8').
      success(function(data3) {
        $scope.results = data3.results;
      });
  }
}
$scope.name = '';
$scope.$watch('name', get_results, true);


$scope.getDetails = function (id) {
  $http.get('http://api.discogs.com/artists/' + id).
    success(function(data) {
        $scope.artist = data;
    });
  $http.get('http://api.discogs.com/artists/' + id + '/releases?page=1&per_page=500').
    success(function(data2) {
        $scope.releases = data2.releases;
    });
  $scope.clicked = true;

}

function Research(){
  $scope.retype = true,
  $scope.name = '';
}

Plunkr 已关闭，我会尽快制作一个。知道我错过了什么吗？

Answer 1

我稍微整理了一下你的代码。请注意，仅当定义了 artist 时才会显示 div。因此，当通过 $scope.clear() 方法将其设置为 undefined 时，所提到的 div 就会被隐藏。

HTML 部分:

<div ng-controller="Ctrl">
    <input type="text" ng-model="name" ng-focus="clear()"/>

    <ul>
        <li ng-repeat="result in results" ng-click="getDetails(result.id)">{{result.title}}</li>
    </ul>

    <div ng-show="artist">
        <h1>Artist</h1>
        <ul>
            <li>{{artist.name}}</li>
            <li>{{artist.release_url}}</li>
            <li>{{artist.uri}}</li>
            <li>{{artist.resource_url}}</li>
        </ul>
    </div>
</div>

JavaScript部分:

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

function Ctrl($scope, $http) {
    $scope.name = undefined;
    $scope.artist = undefined;
    $scope.results = undefined;

    var search = function (name) {             
      if (name) {
        $http.get('http://api.discogs.com/database/search?type=artist&q='+ name +'&page=1&per_page=8').
          success(function(data3) {
            $scope.results = data3.results;
          });
      }        
    }    

    $scope.$watch('name', search, true);

    $scope.getDetails = function (id) {

      $http.get('http://api.discogs.com/artists/' + id).
        success(function(data) {
            $scope.artist = data;
        });

      $http.get('http://api.discogs.com/artists/' + id + '/releases?page=1&per_page=500').
        success(function(data2) {
            $scope.releases = data2.releases;
        });
    }

    $scope.clear = function () {
      $scope.name = undefined;
      $scope.artist = undefined;
      $scope.results = undefined;
    }
}

正在工作 JSFiddle 。