2015-09-04 90 views
0

我有一個離子列表。我想在單擊按鈕時將數據綁定到列表。離子 - 單擊按鈕時填充離子列表

$scope.searchY = function(){$scope.youtubeParam = { 
    key: 'myKey', 
    type: 'video', 
    maxResults: '10', 
    part: 'id,snippet', 
    q: $scope.searchKey , 
    order: 'date',}; 

$http.get('https://www.googleapis.com/youtube/v3/search', {params:$scope.youtubeParam}).success(function(response){ 
$scope.myVideos = response.items; 
    angular.forEach(response.items, function(child){ 
    console.log (child); 
    }); 
}); 

我把一個事件像這樣我的搜索文本框。

<ion-content> 
    <div> 
     <label class="item item-input"> 
      <i class="icon ion-search placeholder-icon"></i> 
      <input type="search" placeholder="Search" ng-enter="searchY()" ng-model="searchKey"> 
     </label> 
    </div> 
    <!--<div class="embed-responsive embed-responsive-16by9"><youtube-video video-id="theBestVideo"></youtube-video></div>--> 
    <div data-ng-controller="AppCtrl" class="list card" ng-repeat="video in myVideos"> 
     <div class="item item-text-wrap"> 
      <h2>{{video.snippet.title}}</h2> 
      <p>{{video.snippet.publishedAt | limitTo: 10}}</p> 
     </div> 
     <div class="item item-image"> 
      <div class="embed-responsive embed-responsive-16by9"><youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video></div> 
     </div> 
     <div class="item item-divider"> 
      <button class="button button-outline button-block button-positive"> 
       Share this Video 
      </button> 
     </div> 
    </div> 
</ion-content> 

當我做了搜索,我可以看到,有返回結果和$scope.myVideos變量是不是空的。但它沒有被列入名單卡。請問我做錯了什麼。已經在這上好幾天了。如果我直接調用該函數而不進行搜索,它會起作用。謝謝

回答

0

每個控制器都會創建一個新的範圍,因此您的搜索框和視頻列表正在查看不同的範圍。當您從搜索框正在查看的範圍修改myVideos時,更改將不會反映在AppCtrl正在查看的範圍中。

嘗試將ng-controller="AppCtrl"移動到ion-content標記,然後當您搜索返回時,您可以修改正確的範圍,並且這些更改應該反映在離子列表中。

+0

嗨abhishek,我真的很感激你的回覆。我確實想要更新$ scope.myVidoes變量。當我用搜索框進行搜索時。但它會拋出錯誤$ apply已在進行中。所以我使用了兩張不同的列表卡,並設置了另一個變量,而另一個變爲空。有沒有辦法更新$ cope變量? – Seyi

+0

只要把這個幫助別人,我只是把我的新的$ scope.myVidoes更新放在超時函數中:'$ timeout(function(){ \t $ scope.myVideos = response.items; })' – Seyi