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

标签 javascript angularjs ngresource angular-ngmodel

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

所以我的问题是,默认情况下目标是空值,是否有某种方法可以在用户在输入中键入内容时真正触发搜索?我尝试创建一个在 ng-click 上触发 $watch 的函数,但到目前为止还没有成功,与 ng-init 相同。也许在 ng-repeat 上创建一个条件,使其仅在 name != '' 时运行?

对可能的解决方法有什么想法吗?

这是我的 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 .

任何帮助将不胜感激! 谢谢,埃里克

最佳答案

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

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

关于javascript - 在 AngularJS 中的 ng-model 上定义一个空值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22366965/

相关文章:

javascript - ngResource 如何将 promise 附加到数组

javascript - 在reactjs中显示文件上传成功或失败的消息

javascript - 需要禁用内联 Fancybox 画廊的循环 - 循环 : false and cyclic: false not working

javascript - 仅使用多个 Controller 的一个 View ,通过 ngresource 创建工厂服务

angularjs - ngResource 中的虚拟属性

javascript - AngularJS 不允许通过 requireJS 访问外部函数

javascript - 使用 css() 获取样式属性值

javascript - 你如何从 Kotlin 中调用 JavaScript delete?

javascript - 在Js中使用循环查找具有特定值的数据的索引

JavaScript:更改环境中的 src 文件