Resetting an input to initial value when a search result is clicked with AngularJS

Question

I've a list on ng-repeat that displays a list of results from a $http query (bind to an input). I'd like both for the list to disappear when the user clicks on one of the results and for the initial empty value of the model to be restored. Basically, the functionality is as follows:

User searches term, list displays results, user clicks on result, list disappears, user clicks on input again to make another search, list with new results appear.

So far I've managed to make the list disappear, but not to make it appear again when the user makes another search.

Here's the relevant code:

<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>

And the 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 is down, I'll make one as soon as possible. Any idea about what am I missing?

Answer 1

Your Research function is unnecessary because you don't need ng-show and ng-hide same time...

secondly you set clicked to ok but never set it false again after your research done...

here is working PLUNKER

Answer 2

I tidied up your code a little bit. Please note that the div is shown only when artist is defined. So when it is set to undefined by the $scope.clear() method, the mentioned div is hidden.

Html part:

<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 part:

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;
    }
}

There is working JSFiddle.

Answer 3

Try using just one ng-hide or ng-show, instead of both. Since you never set clicked back to false, it is probably overriding the retype. Both functions are two-way, so you can just use ng-hide="clicked", and inside function Research, set $scope.clicked to false.