Question

我正在使用后端服务（在这种情况下解析，但这对于这个问题并不重要）并且只想搜索它。我有一个文本框，在输入文本时搜索服务器并返回匹配数组。

我的下一步是简单地在列表中显示我返回的对象。使用ng-repeat足够简单，但由于视图已加载，因此UI不会更新以反映正在加载到列表中的数组。这有意义吗？

我想知道是否有一种技术来刷新列表并显示返回的搜索元素，希望我不是在这里贪婪，而是以一种看起来很好而且不笨重的方式来做。

我做了很多谷歌搜索没有运气:(任何建议都会很棒。

Answer 1

如果没有提供任何代码，很难猜出是什么问题。 Angular具有双向绑定，因此在更改数组内容后应自动更新视图。如果不是，则意味着您可能在代码中出错了。我提供了一个示例代码，在这种情况下应该可以使用。

<强>控制器

angular.module('moduleName')
  .controller('ViewController', ['ViewService', ViewController]);

function ViewController(ViewService) {
    var self = this;

    self.arrayWithData = [];
    self.searchText = "";

    // ---- Public functions ----

    self.searchData = searchData;

    // Function which loads data from service
    function searchData(searchText) {
        ViewService.getData(searchText).then(function(dataResponse) {

            // Clear the array with data
            self.arrayWithData.splice(0);

            // Fill it again with new data from response
            angular.forEach(dataResponse, function(item) {
                self.arrayWithData.push(item);
            });
        });
    }

    // --- Private functions ---

    // Controller initialization
    function _initialize() {
        self.searchData(self.searchText);
    }

    _initialize();
}

查看

<div ng-controller="ViewController as view"> <input type="text" ng-model="view.searchText" /> <input type="button" value="Search!" ng-click="view.searchData(view.searchText)" />  <div ng-repeat="item in view.arrayWithData">  </div> </div>

<强>结论

通过使用splice（）和push（），确保不更改对数组的引用。如果您正在使用controllerAs语法（如示例中所示），请使用＆＃39; =＆＃39;分配新数据。可能会奏效。但是，如果您使用$ scope将数据存储在控制器中，则丢失对该数组的引用是您的代码无法工作的最可能原因。

离子，通过搜索列出填充

1 个答案: