【问题标题】:Defining an empty value on ng-model in AngularJS在 AngularJS 中的 ng-model 上定义一个空值
【发布时间】:2014-03-13 08:58:14
【问题描述】:

我有一个带有 $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

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

【问题讨论】:

    标签: javascript angularjs ngresource angular-ngmodel


    【解决方案1】:

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

    【讨论】:

    • 你是高手。
    猜你喜欢
    • 1970-01-01
    • 2014-06-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-01-19
    • 2013-04-04
    相关资源
    最近更新 更多