2015-09-04 4 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); 
    }); 
}); 

Я положил событие на мой поиск TextBox, как это.

<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

Привет, абхишек, я очень ценю ваш ответ. Я действительно хочу обновить переменную $ scope.myVidoes. Когда я выполняю поиск в окне поиска. Но его выдача ошибки $ применяется уже в процессе. Поэтому я использовал несколько разных карточек и установил другую переменную, в то время как я перепутал другую. Есть ли способ обновить переменные $ cope? – Seyi

+0

Просто помогите кому-то другому, я просто разместил новое обновление $ scope.myVidoes в функции тайм-аута: '$ timeout (function() { \t $ scope.myVideos = response.items; })' – Seyi