在AngularJS中定义ng-model上的空值

时间:2014-03-13 00:48:52

标签: javascript angularjs ngresource angular-ngmodel

我使用$ watch实时更新搜索查询的输入,全部使用AngularJS。 我的问题是,即使将模型的初始值定义为空,它也会触发搜索并默认显示结果。

所以我的问题是,默认情况下有一个空值,当用户在输入中键入内容时,是否有某种方法可以实际触发搜索 ?我尝试过创建一个触发ng-click $ watch的功能,但到目前为止没有运气,与ng-init相同。也许在ng-repeat上创建一个条件,使它只在名字时运行!=''?

有关可能的解决方法的任何想法吗?

这是我的JS:

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

}

我的HTML:

<div ng-controller="Ctrl">
  <h1>Search Artist</h1>
  <input type="text" ng-model="name"/>
  <ul>
    <li ng-repeat="result in results">{{result.title}}</li>
  </ul>
</div>   

工作JSFiddle

任何帮助都将受到高度赞赏! 谢谢,埃里克

1 个答案:

答案 0 :(得分:1)

使用if get_results函数中的条件来检查名称为空的天气是否为空,并在非空字符串时执行请求。

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

JSFiddle