angularJs - 直到用户键入搜索字段时才显示数据

最终解决方案？看起来我有我的路由和控制器有点困惑。我用我的控制器模块将文件路由到了一个文件中。我将我的routeProvider移动到主模块中，就像在教程示例中一样。我的控制器和我的routeProvider在同一模块下。也许这一切都让人困惑。所以现在我在它自己的模块中有控制器，而routeProvider在主模块下。这似乎解决了问题，无需初始化搜索字段以强制绑定更新数据。angularJs - 直到用户键入搜索字段时才显示数据

更新：的解决方案，显示当时的页面加载是使用旧版本angularJs的，或使用ng-Init和搜索字段初始化为空白我的数据。

我从firebase网站获取JSON数据以更新表格。我有一个可用的搜索字段。直到我在搜索字段中输入内容后，数据才会显示在表格中。我不知道为什么只要控制器获得数据，数据就不会显示在表格中。

注意：现在删除了到后端数据的链接，我不想无限期地将该数据库文件保留在那里。

这里是链接到的jsfiddle代码： Last Version jsFiddle

这里是控制器的代码。

'use strict'; 
/* App Module */ 
// Create the module named 'testApp' 
var testApp = angular.module('theTestApp', [ 
    'ngRoute', 
    'testServices' 
]); 

'use strict'; 
/* Services */ 

var testServices = angular.module('testServices', []); 

testServices.controller('CommonController', 
    // function($scope, $http, $route) { 
    function($scope, $http) { 
    //access the customInput property using $route.current 
    //var dbKey = $route.current.customInput; 
    var dbKey = 'test-a-db-12345'; 
    var urlToDb = 'https://' + dbKey + '.firebaseio.com/rows/.json'; 
    $http.get(urlToDb).success(function(data) { 
    $scope.UsedItems = data; 
    }); 

});

如何在数据加载后立即显示数据？

更新1：我假设数据已经存在，但在搜索字段中输入内容会触发过滤器，然后数据显示。它显示过滤。

更新2：我在阅读关于$Watch有不断和事件循环监听事件。当在搜索框中按下某个键时，如果更改了某些内容，则会更新绑定{{name}}。在这种情况下，搜索输入字段的内容已更改。所以这个问题似乎与绑定更新有关，而不是数据是否被检索到。

更新3：此版本的代码运行。它在页面呈现时加载数据。这是jsBins中的一个工作示例。

更新4：从angularJs版本1.2.0开始，行为发生变化。版本1.0.8,1.0.7将在页面加载时立即显示我的数据，1.2.0不会！我碰巧正在使用使用1.0.7的jsBins，并开始工作。不知道为什么，直到我开始比较差异。希望有一种方法可以使它在更新的版本中工作。

jsBins Working Example

来源

2013-12-21 Sandy Good

如果你的控制器代码是你的小提琴的一部分，那会更好。 –

我把一个完整的工作拷贝到jsBins中。 [jsBins工作代码]（http://jsbin.com/araTUyO/2/edit?html,js输出） –

如果您将Firebase与Angular结合使用，请考虑使用AngularFire：http://angularfire.com/ – Anant

尝试

$scope.$apply(function(){ 
    $scope.UsedItems=data; 
}

来源

2013-12-21 05:19:23

无用。 $ http的成功函数已被Angular在$ apply中调用。 –

的问题是，theSearch.Txt是空的。你正在过滤。我的猜测是Angular在那个时候决定不让任何东西通过，从而不显示任何东西。

你应该做的：

初始化用空格填充的字符串变量。（即''）

这是一个工作jsFiddle。

我在这里使用了ngInit。但那是因为你决定链接？控制器而不是将其放入脚本标记中。我建议下一次您将额外的努力粘贴进去，因为使用ngInit指令让我感觉像使用eval。

来源

2013-12-21 20:20:45 Neikos

工作原理是，在DIV元素中添加：ng-init =“theSearch.Txt =''”。 –

使用空格初始化搜索字段时出现问题，以便获取要更新的数据绑定。用户可能不会意识到那里有空白区域，并且如果用户在搜索后没有删除该空白区域，原始数据不会回到显示所有记录。 –

在文档中，用红色字母表示应该使用控制器来初始化作用域上的值，而不是ng-init。这是一个引用，“ngInit的唯一适当的用法是用于别名的ngRepeat特殊属性”[angularjs文档]（http://docs.angularjs.org/api/ng.directive:ngInit） –

angularJs - 直到用户键入搜索字段时才显示数据

回答

相关问题