仅在输入输入内容时如何加载数据答案

【问题标题】：How to load data only if something typed in input仅在输入输入内容时如何加载数据
【发布时间】：2016-03-23 23:43:00
【问题描述】：

我有：

<input type="search" name="" placeholder="Search" class="inputsearchform" ng-model="search"/> 

<tr class="rowR" ng-repeat="data in loaded | filter:{song_name: search}">

是否只有在我输入 4 个或更多字符时才能加载数据？我写了inputChange函数，但是我不知道如何从tr的属性中调用它。

app.controller('main_control',function($scope, $http){
    $scope.inputChange = function(){
        if($(".inputsearchform").val().length > 3){
            $http.get("http://localhost:7001/load").success(function(data){
                $scope.loaded=data; 
            });
        }
    }       
});

或者在页面加载时加载数据但不向用户显示数据可能是更好的解决方案，因为它有 10000 个项目。然后仅在输入 4 个字符后搜索并显示结果。我该怎么做？

【问题讨论】：

标签： javascript jquery angularjs

【解决方案1】：

你会想要使用 ngChange：https://docs.angularjs.org/api/ng/directive/ngChange

您可以将其添加到输入中

<input ng-change="inputChange()" ... />

您还可以更改 inputChange 函数以检查 $scope.search.length 而不是使用 $(".inputsearchform").val().length。

if($scope.search.length > 3 && !$scope.loaded){...

【讨论】：

只是补充一点为什么 OP 不应该在控制器中使用 jQuery：Angular 的想法是让模板变得智能并根据数据更改进行渲染（这被称为“声明”）。您不希望将 jQuery 插入图片并尝试强制操作 DOM，因为这可能会干扰控制器中其他地方的数据更改。
谢谢，它可以工作，但根本不行。我尝试输入 5 个字符，它搜索得很好。然后我清除了输入并输入了 1 个字符。它不应该搜索，但它会搜索。
在 if 语句中添加另一个条件，这样如果数据已经加载，它就不会再查看。我将编辑我的答案。
@MatthewClise 这种情况没有帮助。我的意思是我只有在输入 4 个字符时才需要开始搜索。也许我应该向tr 添加功能？
也许试试 if($scope.search.length === 4)？

【解决方案2】：

在输入中添加ng-change="inputChange()"。

【讨论】：

【解决方案3】：

只要听马修的回答

删除 jquery 并使用 angular。

app.controller('main_control',function($scope, $http){
    $scope.inputChange = function(){
        if($scope.search.length > 4){
            $http.get("http://localhost:7001/load").success(function(data){
                $scope.loaded=data; 
            });
        }
    }       
});

【讨论】：