Ionic，通過搜索填充列表

我正在使用backemnd服務（在這種情況下解析，但這對此問題並不重要），並且只是簡單地搜索它。我有一個文本框，在輸入文本時搜索服務器並返回一個匹配數組。Ionic，通過搜索填充列表

我的下一步是將我的返回對象很好地顯示在列表中。用ng-repeat足夠簡單，但因爲視圖已經被加載，UI將不會更新以反映正在加載到列表中的數組。那有意義嗎？

我想知道是否有刷新列表並顯示返回的搜索元素的技術，並希望我不會貪婪，而是以一種看起來不錯而且不笨重的方式進行操作。

我做了很多，沒有運氣谷歌搜索:(任何意見將是驚人的。

2016-01-15 Joe Caraccio

把一些代碼..什麼hav你做.. ?? –

如果我得到它是正確的，並且因爲您提到了Ionic，我相信您正在使用angular。所以，你可以保持你的列表雙向綁定到你的作用域中的數組，這個數組最初是空的。一旦你從服務中得到結果，將結果推送到數組，並且你的列表應該刷新爲雙向綁定。 – kkap

我正在使用angular！是角度設置爲自動刷新？因爲在我的情況下..它不刷新它的HTML部分..它看起來像它的初始運行 –

沒有任何代碼，只要它是很難猜測什麼是錯的。角具有雙向綁定，所以認爲應更新改變數組的內容後自動運行。如果不是的話，就意味着你可能做錯了什麼在你的代碼。我來舉一個例子代碼應在這種情況下工作。

控制器

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)" /> 

    <!-- A simple ngRepeat --> 
    <div ng-repeat="item in view.arrayWithData"> 
     <!-- Do what you want with the item --> 
    </div> 
</div>

結論

通過使用拼接（）和推（）您確保引用您的陣列沒有改變。如果您使用的是controllerAs語法（如示例中所示），則使用'='分配新數據可能會起作用。但是，如果您使用$ scope將數據存儲在控制器中，則丟失對數組的引用是代碼無法工作的最可能原因。

來源

2016-01-16 13:34:20 PJDev

Ionic，通過搜索填充列表

回答

相關問題