來自外部數據庫的角度離子無線電過濾器數據

Question

我在Azure db 1中有2個表格叫做團隊，1個叫做聯盟，聯盟中的id也與團隊相關，例如，球隊a屬於leagueID 1.我正在嘗試使用離子收音機，因此用戶可以選擇他們的球隊，但在聯盟中進行篩選，但無法確定ng-if或filter是否是最佳選擇。我已成立了一個服務從湛藍的調用數據：services.js

 .factory('League', function ($ionicPopup) { 
    var url = 'http://'; 
var client = new WindowsAzure.MobileServiceClient(url); 
var LeagueTable = client.getTable('League'); 

function refreshDisplay() { 
    return LeagueTable 
     .read() 
     .then(createList, handleError); 
} 

function createList(items) { 
    return items; 
} 

function handleError(error) { 
    var LeagueName = error + (error.request ? ' - ' + error.request.status :  ''); 
    console.error(LeagueName); 
    console.log('error', error.request.status); 
    if (error.request.status == '0' || error.request.status == '404') { 
     $ionicPopup.alert({ 
      title: 'Connection Failure', 
      template: 'Connection with backend can not be established.' 
     }); 
    } 
} 
return { 
    all: function() { 
     return refreshDisplay(); 
    }, 
}; 
}) 






.factory('Team', function ($ionicPopup) { 
var url = 'http://'; 
var client = new WindowsAzure.MobileServiceClient(url); 
var TeamTable = client.getTable('Team'); 

function refreshDisplay() { 
    return TeamTable 
     .read() 
     .then(createTeamList, handleError); 
} 

function createTeamList(items) { 
    return items; 
} 

function handleError(error) { 
    var text = error + (error.request ? ' - ' + error.request.status : ''); 
    console.error(text); 
    console.log('error', error.request.status); 
    if (error.request.status == '0' || error.request.status == '404') { 
     $ionicPopup.alert({ 
      title: 'Connection Failure', 
      template: 'Connection with backend can not be established.' 
     }); 
    } 
} 
    return { 
    all: function() { 
     return refreshDisplay(); 
    }, 
} 
    }); 

目前控制器只拉回所有的球隊，controller.js：

.controller('LeagueCtrl', function ($scope, $window, League) { 

    $scope.doRefresh = function() { 
    League.all().then(function (newList) { 
     $scope.items = newList; 
     $scope.$broadcast('scroll.refreshComplete'); 
     $scope.$apply(); 
    }); 

}; 

$scope.doRefresh(); 
console.log(League); 
$scope.League; 

    }) 




    .controller('TeamCtrl', function ($scope, $window, Team) { 

    $scope.doRefresh = function() { 
    Team.all().then(function (newList) { 
     $scope.items = newList; 

     $scope.$broadcast('scroll.refreshComplete'); 
     $scope.$apply(); 
     return $scope.items 
    }); 
}; 


$scope.doRefresh(); 
}); 

和HTML隊html的：

<ion-view view-title="Choose your Team"> 
    <ion-nav-buttons side="primary"> 

</ion-nav-buttons> 
<ion-content> 
    <ion-refresher pulling-text="Pull to refresh..." 
        on-refresh="doRefresh()"> 
    </ion-refresher> 

     <div ng-controller="SportCtrl"> 
     <h2> Choose sport</h2> 
     <ion-radio ng-model="item.complete" ng-repeat="item in items" > {{item.text}}</ion-radio> 
    </div> 

     <div ng-controller="LeagueCtrl"> 
      <h2> Choose Conference</h2> 
      <ion-radio ng-model="item.complete" ng-repeat="item in items">  {{item.LeagueName}}</ion-radio> 
     </div> 

     <div ng-controller="TeamCtrl"> 
      <h2> Choose Team</h2> 
      <ion-radio ng-model="item.complete" ng-repeat="item in items"> {{item.TeamName}}</ion-radio> 
     </div> 
    <div > 
    <button class="button button-large-font-size button-block button- assertive" ui-sref="app.home">Booyah</button> 
     </div> 
</ion-content> 
</ion-view> 

任何人都可以點我在正確的方向

Answer 1

在不同的續範圍滾子是分開的，所以有一個簡單的解決方案，你可以把League和Team放在一個相同的控制器和相同的範圍內，然後你可以在你的控制器中定製一個過濾功能來達到你的要求。

一般：

<div ng-controller="LeagueTeamCtrl"> 
     <h2> Choose Conference</h2> 
     <ion-radio ng-model="data.league_id" ng-repeat="item in league" ng-value="item.id">{{item.LeagueName}}</ion-radio> 

     <h2> Choose Team</h2> 
     <ion-radio ng-model="data.team_id" ng-repeat="item in team" ng-value="item.id">{{item.TeamName}}</ion-radio> 
    </div> 

而且自定義濾鏡功能：

$scope.myFilter = function (item) { 
    return item.leagueId === $scope.league_id ; 
}; 

而且你可以在http://codepen.io/liuguixiao/pen/ZpYLAB