在AngularJs中不能显示$scope数组对象
Cant display $scope array of objects in AngularJs
我有这个奇怪的问题,我不能显示我的范围变量值。我是angular的新手,但我之前已经做过很多次了。这是index。html的主要部分。Div-ui位于body内部,但它看不到这里:
<input type="text" class="form-control" ng-model="searchUsers" placeholder="Search users"/>
<a ng-click="search()" ui-sref="search">Search</a>
<div ui-view>
</div>
这里是search.html:
<p>Hello world</p> // Shows normally
<p>{{test1}}</p> // Shows normally
<p>{{test2}}</p> // Nothing
<p ng-repeat="x in searchResult">{{x.username}}</p> // Nothing
<p ng-repeat="(key,value) in searchResult">{{value}}</p> // Nothing
<p ng-repeat="(key,value) in searchResult">{{value.username}}</p> // Nothing
这是控制器:
(function(){
angular.module('TimeWaste')
.controller('NavigationCtrl', ["$scope", "$http", "$state",
function($scope,$http,$state){
$scope.searchResult = [];
// Tried with and without this
if(localStorage['User-Data']){
$scope.loggedIn = true;
}else{
$scope.loggedIn = false;
}
$scope.logUserIn = function(){
$http.post('api/user/login', $scope.login)
.success(function(response){
localStorage.setItem('User-Data', JSON.stringify(response));
$scope.loggedIn = true;
}).error(function(error){
console.log(error);
});
}
$scope.logOut = function (){
localStorage.clear();
$scope.loggedIn = false;
}
$scope.test1 = "hi";
$scope.search = function (){
$scope.test2 = "hi again";
$http.post("api/user/search", {username: $scope.searchUsers})
.success(function(response){
$scope.searchResult = response;
console.log($scope.searchResult);
// returns array of objects. There is all information that i want.
}).error(function(error){
console.log("ei");
});
}
}]);
}());
一切看起来都很正常。在搜索函数内部,它正在工作,console.log返回的只是它所需要的。我也试过重复div和tables,但我很确定这不是这里的问题。
如果有问题,这里也是我的app.js:
(function(){
angular.module('TimeWaste', ['ui.router', 'ngFileUpload'])
.config(function ($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state("main", {
url: "/",
templateUrl: "app/main/main.html",
controller: "MainCtrl"
})
.state("search", {
url: "/search",
templateUrl: "app/main/search.html",
controller: "NavigationCtrl"
})
});
}());
还有几个状态,它们都工作得很好。我把它缩短了一点,这样这篇文章就不会太长了
你能够看到{{test1}}
而不是其他值的原因是因为你有两个不同的控制器称为'MainCtrl'和'NavigationCtrl'。您正在使用ui-sref
切换状态。所以,这就是发生的事情。
-
当你点击你的href链接,它寻找
search()
方法在你的MainCtrl,然后改变状态为"搜索" -
它然后从NavigationCtrl加载变量和方法到作用域,这就是为什么你能够看到
{{test1}}
被加载到作用域。但是您没有调用search()
方法,因此您无法看到其他值。
检查我的答案,在你的函数定义$scope.search();
如果你看到了结果,那就是你的问题了。
好的,此时必须添加一个$作用域。$apply or use '。然后用'而不是'success'来保持你的代码符合promise模式。当您刚刚发布时,需要强制摘要循环发生。
$http.post("api/user/search", {username: $scope.searchUsers})
.success(function(response){
$scope.$apply(function() {
$scope.searchResult = response;
});
}).error(function(error){
console.log("ei");
});
相关文章:
- $scope$观察数组中的一个特定对象——Angular JS控制器
- 为什么AngularJS$scope.watch()在我告诉它监视数组时会停止工作
- 我如何访问在 Angular JS 的 .then() 中定义的$scope数组
- Angular JS(离子)数据数组到$scope元素
- 将数组返回到$scope中;不起作用
- 我正在使用 $scope.$apply 在 http 调用后更新对象数组.谁能告诉我正确的方法
- AngularJS将字符串转换为引用$scope中的对象的对象/数组
- $scope绑定到空值数组 AngularJs
- 尝试将数据数组设置为从视图调用函数后$scope
- AngularJS在$scope数组上使用ng-repeat
- $localStroage数组没有't匹配$scope数组
- 将数组写入$scope(Javascript)
- AngularJS将项目推送到数组的第一个或0索引$scope
- 想要从$scope数组中添加和减去项
- Angular JS:更新$Scope.数组通过用户输入
- $scope数据在angular的数组格式
- 更改重复的$scope数组,但会影响原来的ng-repeat
- 在AngularJs中不能显示$scope数组对象
- Angular.js视图没有't在更新嵌套的$scope数组时更新
- 不能检索Angularjs $scope数组的最后一个对象