0

我有一个关于 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 坏了，我会尽快做一个。关于我错过了什么的任何想法？

4

3 回答 3

2

我稍微整理了你的代码。请注意，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。

于 2014-03-14T18:29:55.947 回答
1

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

于 2014-03-14T18:08:41.980 回答
1

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

其次，你设置clicked好，但false在你的研究完成后再也不会设置它......

这是工作的PLUNKER

于 2014-03-14T18:17:55.553 回答