当前位置: 首页 > 面试题库 >

更改型号后ngRepeat不更新

山凌
2023-03-14
问题内容

我正在尝试编写一些搜索输入,以使用ngResource从数据库中获取数据。

数据在页面上显示为ng-repeat,但是当我执行搜索并且$ scope已更新时,该视图未更新并显示旧数据。

这是代码:

main.html(活动视图)

<div ng-controller="searchCtrl as searchCtrl" layout="column">
    <form class="form-inline search-form col-md-offset-1">
        <div class="form-group col-md-5">
            <label class="sr-only" for="search_location">Location</label> <input
                id="search_location" type="search" class="form-control"
                ng-Autocomplete ng-model="place" placeholder="Location" />
        </div>
        <div class="form-group col-md-5">
            <label class="sr-only" for="search_tags">Tags</label> <input
                style="width: 100%;" id="search_tags" type="search"
                class="form-control" id="search_tags" placeholder="Tags">
        </div>

        <div class="col-md-1">
            <md-button class="md-fab md-mini" aria-label="Search" ng-click="searchCtrl.search()"> <md-icon class="md-fab-center"
                md-font-icon="glyphicon glyphicon-search" style="color: black;"></md-icon>
            </md-button>
        </div>
    </form>
</div>

<div ng-controller="mainCtrl">

    <div ng-repeat="evento in eventi" ng-include="'views/components/event_card.html'" class="col-md-3"></div>

</div>

main.js

'use strict';
app.factory('Eventi', function($resource) {
    return $resource('/eventsws/events/:location', {location : '@location'}, { 
        search: {
            method: 'GET',
            params: {
                'location' : "@location"
            },
            isArray : true
        }
    })
});

app.controller('mainCtrl', function($scope, Eventi) {
    $scope.eventi = Eventi.query();
});

searchbar.js

'use strict';
app.controller('searchCtrl', function($scope, Eventi) {
    $scope.place = null;

    this.search = function() {

        $scope.eventi = Eventi.search({
            'location' : $scope.place
        });
    }
});

当它启动时,它从数据库中获取所有数据并正确显示它们,当我尝试进行搜索时,$ scope.eventi会更新(我可以从调试中看到$
scope.eventi中的新数据),但视图仍然显示旧数据,并且永远不会更新。

我试图在搜索功能的末尾使用$ scope。$ apply,但结果是相同的。

你知道为什么它不起作用吗?

谢谢你的时间。


问题答案:

调试中看到的$ scope.eventi是searchCtrl中的一个,而不是mainCtrl中的一个。要更新mainCtrl $
scope.eventi,您必须找到其他方法。

一个干净但漫长的解决方案将是使用服务在控制器中共享变量。

要在评论中回答问题:

我可以看到它已更新,但视图仍显示旧数据

我想是什么问题(即使我实际上没有看到您的代码)。

问题

如果您这样绑定var:

服务

[...]
service.serviceVar = 1;
return service
[...]

这将创建一个带有引用的“ 1”变量。

控制者

  [...]
  $scope.myvar = Service.serviceVar;
  [...]

这会将$ scope.myvar绑定到“ 1”引用。

如果在服务或其他控制器中执行此操作:

   service.serviceVar = 2;

您将使用新引用创建一个新的变量“ 2”,并将该引用分配给service.serviceVar。严重的是,您对旧的1 var的所有旧引用都不会更新。

为了避免这种情况,请执行以下操作:

服务

[...]
service.servicevar = {};
service.servicevar.value = 1;
return service
[...]

使用新引用创建一个对象,并将其分配给servicevar。您创建一个变量“ 1”,并将其分配给servicevar.value。

控制者

[...]
$scope.myvar = Service.servicevar;
[...]

您将servicevar引用分配给您的范围var。

视图

{{myvar.value}}

您可以通过使用var的属性来使用该值。

更新var这样做:

service.servicevar.value = 2;

您将使用新参考创建新的变量“ 2”,并用该参考替换旧参考。

但是这次您将所有对servicevar的引用保留在控制器中。

我希望我很清楚,它可以回答您的问题。

编辑:

尝试永远不要使用$ scope。$
apply。这是一个非常糟糕的做法。如果您使用它来使某些东西起作用,那么您可能应该找到另一个来做到这一点(这对Stacks来说是一个很大的问题,我想:“为什么我需要$
apply解决我的问题XXXXX”)

rsnorman15关于您使用异步调用有一个很好的观点。也看看他的答案。

这是我使用服务共享房屋的老手之一



 类似资料:
  • 问题内容: 我用来渲染一个。我的控制器看起来像这样: 如您所见,我正在定期更新阵列。但是,我的观点是这样构造的: 问题是,当我更新时,它不会用新数据重新渲染我的表。 我将如何解决这个问题? 问题答案: 您是否将更新包入 ?这应该可以解决问题。

  • 问题内容: 我正在尝试使用包含Latex样式方程式的AngularJS双向绑定文本。我想调用MathJax格式化方程式,但是我不确定在AngularJS完成更改模型后确保调用MathJax的最佳方法。我想我需要回调。这是我的JavaScript: } 这是我的HTML: 小提琴在这里:http : //jsfiddle.net/LukasHalim/UVjTD/1/。您会注意到,即使您单击两次更新

  • 我的视图中有一个树查看器,它从标准的Ecore编辑器中监听EMF模型,并用它做进一步的事情。我已经注册了一个选择监听器,它检查所选元素是否是树查看器需要作为输入的类型。因此,问题是,如果模型中有任何变化(例如,向现有元素添加新元素或新信息等),树查看器仅在用户更改选择时才显示更改后的模型,即单击任何模型元素等。 但是我需要做的是,如果底层模型发生变化,树查看器将直接得到通知,并显示新的模型元素,而

  • 我使用Eclipse创建了一个网站,Servlet在其中将数据发送到jsp。但是我不知道为什么我在Servlet中更改数据。它仍然将旧数据发送到jsp。即使我尝试了这些选项.. 菜单-项目-清理(如果不使用自动构建,请单击此选项) 菜单-项目-项目自动构建(选中此选项) 下面是一个例子: Product.java ProductModel.java ProductController.java i

  • 问题内容: 我是Postgresql的新手,正在使用9.3版。我有一张桌子,里面有几行。我的问题是,当我更新一行时,该行号被更改并将其移动到表中的最后一个位置。我的问题是:这是否是默认行为,因为我认为在更新行时,不应将其从其位置移开?该操作似乎就像先删除然后再插入该行。 这是示例SQL: 从今起: 将ID为1的更新后的行移动到最后一个位置。 谢谢 问题答案: 行号已更改 关系表中没有“行号”之类的

  • 问题内容: 我用来加载图像。值是从一些范围变量加载的,如下所示: 我的问题是,当我运行时,它会使属性为空,但不会在属性中反映出来。因此,我不断看到需要空占位符的图像。 我该如何处理? 问题答案: 这是ngSrc和ngHref指令的预期行为。这些指令仅支持识别新路径,但是当路径不可用时,这些指令将以静默方式退出(我在这里看到一个拉取请求。)。 因此,当图像变量不再可用时,可能的解决方法是将ngSho