2016-09-02 5 views
0

私はチームと1リーグと呼ばれるAzure db 1に2つのテーブルを持っており、リーグ内のIDもチームに関連付けられています。チームaはleagueID 1に属しています。イオンラジオを使用しようとしているので、ユーザーは自分のチームを選ぶことができますが、リーグでフィルタリングできますが、ng-ifまたはフィルタが最適なオプションかどうかは分かりません。私は紺碧からデータを呼び出すためにサービスを設定している:外部dbからの角度イオンラジオフィルタデータ

.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チーム:

 .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(); 
    }, 
} 
    }); 

services.js現時点では、コントローラは、ちょうどすべてのチーム、controller.jsを引き戻します.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> 

誰もが正しい方向に私を指す

+0

こんにちは、任意の更新で完全な例を参照することができますか? –

答えて

0

ローラーは別々のものなので、簡単な解決方法があります。LeagueTeamを同じコントローラーと同じスコープに入れることができます。コントローラのフィルタ機能をカスタマイズして要件を満たすことができます。一般

<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

関連する問題