Question

我在ng-repeat上有一个列表，显示$ http查询的结果列表（绑定到输入）。当用户点击其中一个结果并恢复要恢复的模型的初始空值时，我希望列表都消失。基本上，功能如下：

用户搜索字词，列表显示结果，用户点击结果，列表消失，用户再次点击输入以进行其他搜索，列表中显示新结果。

到目前为止，我已设法使列表消失，但在用户进行其他搜索时不会再次显示。

以下是相关代码：

<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

我整理了你的代码。请注意，div仅在定义artist时显示。因此，当undefined方法将其设置为$scope.clear()时，会隐藏上述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。

Answer 2

尝试仅使用一个ng-hide或ng-show，而不是两者。由于您从未将clicked设置为false，因此可能会覆盖retype。这两个函数都是双向的，所以你可以使用ng-hide="clicked"，在函数Research里面，将$ scope.clicked设置为false。

Answer 3

您的研究功能是不必要的，因为您不需要同时ng-show和ng-hide ...

其次，您将clicked设置为ok，但在完成研究后再也没有设置false ...

此处正在运作PLUNKER

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

3 个答案: