在AngularJs中不能显示$scope数组对象

Cant display $scope array of objects in AngularJs

本文关键字:scope 数组 对象 显示 AngularJs 不能      更新时间:2023-09-26

我有这个奇怪的问题,我不能显示我的范围变量值。我是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切换状态。所以,这就是发生的事情。

  1. 当你点击你的href链接,它寻找search()方法在你的MainCtrl,然后改变状态为"搜索"

  2. 它然后从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");
    });