Question

我已经阅读了很多像这样的问题，但由于某种原因，我找不到为什么我的代码无效。

目标是让页面加载ng-repeat加载的项目列表，这可以正常工作，但是当用户执行一个函数时，将ng-repeat数组替换为另一个相同的结构。这是通过http。

代码是这样的。

// in HomeController

$scope.content = {
    items: [ {
        title: "hi!"
    } ]
}

$scope.search = function() {
    if ( $scope.query == '' )
        return $scope.content = null

    $http
        .get( '/api/search', { params: 
            { terms: $scope.query }
        } )
        .success( function ( results ) {
            console.log( results)
            $scope.content.items = results
        })
        .error( function ( error ) {
            $flash.error = error
        })
}

然后

// in the HTML

<div ng-controller="HomeController" class="list-container">

    <div class="panel panel-item" ng-repeat="item in content.items">
        <h2 ng-bind="item.title"></h2> // ... etc

然后在其他地方有ng-change触发search()。我知道http.get有效，因为我在控制台中看到它。但它并没有更新ng-repeat的主要来源甚至是范围，从它的外观来看。

如果此控制器嵌套在另一个控制器中是否相关？

Answer 1

解决方案

您遇到的问题是这一行：

return $scope.content = null;

因为此时你会破坏你的对象$scope.content，这意味着它没有任何从属属性或任何东西。因此，当您稍后尝试为其属性赋值时，该属性在null变量上不存在，您会收到运行时错误：

无法设置属性＆＃39;项目＆＃39;为null

因此，如果您将上线更改为

return $scope.content.items = null;

一切都应该有效。这样，content不会被破坏，只需将其内部属性重新分配一个新值。

或者您也可以保留您的初始行，但之后将作业更改为

$scope.content = {
    items: result
};

因此，当您获得结果时，您将重新创建之前可能已被销毁的整个content对象（分配给null）。

但我个人建议你将上面的问题代码行更改为：

$scope.content.items = [];
return null; // change to whatever return value seems appropriate

这将使您的属性保持为最初的Array。你只是把它清空了。如果您认为Javascript是一种强类型语言并且不执行会破坏强类型语言的代码，那么它有时会是最好的。

Here's an example两个工作版本的并排比较与您正在使用且不起作用的版本。

更新ng-repeat数组

1 个答案:

解决方案