mysqlデータベースレコードに基づいてangularjsのレコードをグループ化する方法

Question

チームごとにhtmlページを表示するための静的なコードです。 mysqlデータベースレコードを使用して同じプロセスが必要です。どのような変更anuglarコントローラで必要とされているとAPI

HTML

<ul> 
    <li ng-repeat="(team, players) in teamPlayers | groupBy:'team'"> 
     {{team}} 
     <ul> 
      <li ng-repeat="player in players"> 
       {{player.name}} 
      </li> 
     </ul> 
    </li> 
</ul> 

コントローラ

app.controller('homeCtrl', function($scope) { 
    var teamAlpha = {name: 'team alpha'}; 
    var teamBeta = {name: 'team beta'}; 
    var teamGamma = {name: 'team gamma'}; 

    $scope.teamPlayers = [{name: 'Gene', team: teamAlpha}, 
         {name: 'George', team: teamBeta}, 
         {name: 'Steve', team: teamGamma}, 
         {name: 'Paula', team: teamBeta}, 
         {name: 'Scruath of the 5th sector', team: teamGamma}]; 
}); 

PHPのコード

$select=" select name, team from player where 1"; 
$result=$con->query($select)or die(mysqli_error()); 
$num=$result->num_rows; 
if($num > 0) 
{ 
    $arr = array(); 
    while($row=$result->fetch_array()) 
    { 
    $arr[]=array('name'=>$row['name'], 
        'team'=>$row['team'], 

        ); 

     } 

    } 

$outputArr = array(); 
$outputArr['Player'] = $arr; 
header("Content-type: application/json"); 
echo json_encode($outputArr); 

Answer 1

ある

<ul ng-repeat="(team, value) in teamPlayers | groupBy: 'team.name'"> 
    Group name: {{ team }} 
    <li ng-repeat="player in value"> 
    player: {{ player.name }} 
    </li> 
</ul> 

、すなわち

[{name: 'Gene', team: { name: 'team alpha'}}, 
{name: 'George', team: {name: 'team beta'}}, 
...]; 

角度を使用できますあなたは、例えば同じサービスを呼ぶ&コントローラを複数のビューを持っている場合には、例えば、別のサービスでサーバ呼び出しを置くことができ、良いプラクティスとして

app.controller('homeCtrl', function($scope, $http) { 
    var playerUrl = 'http::localhost/myapi/players'; 
    $http.get(playerUrl).then(function(response) { 
     $scope.teamPlayers = response.data; 
    }, function(responseError) { 
     // do something if backend return an error 
    }); 
}); 

：3210サービスは、このようなバックエンドを呼び出すために

app.factory('teamService', ['$http', function($http) { 
    var playerUrl = 'http::localhost/myapi/players';   
    return { 
     getTeamPlayers: function() { 
      return $http.get(playerUrl); 
     } 
    } 
}]); 

、あなたのコントローラは、次のとおりです。

app.controller('homeCtrl', ['$scope', 'teamService', function($scope, teamService) { 
    teamService.getTeamPlayers().then(function(response) { 
     $scope.teamPlayers = response.data; 
    }, function(responseError) { 
     // do something if backend return an error 
    }); 
}]); 

$httpサービスは非同期であるためpromise.then(function(response) {...});の使用を返します。詳細は$http documentationを参照してください。

注：
team.nameだけでなくteamでグループをあなたがgroupByフィルターにangular.filterに依存関係を設定する必要があり、そして、あなたがしなければなりません。

私はバックエンドサービスがハードコードされているplunkerをセットアップしました。

Answer 2

コントローラ：

var teamAlpha = {name: 'team alpha'}; 
var teamBeta = {name: 'team beta'}; 
var teamGamma = {name: 'team gamma'}; 

$scope.teamPlayers = [{name: 'Gene', team: teamAlpha}, 
        {name: 'George', team: teamBeta}, 
        {name: 'Steve', team: teamGamma}, 
        {name: 'Paula', team: teamBeta}, 
        {name: 'Scruath of the 5th sector', team: teamGamma}]; 

ビュー：これはあなたが彼らのチームと選手のリストを返しますhttp::localhost/myapi/playersでバックエンドサービスを持っていると仮定すると、デモhttp://jsbin.com/qobasocido/1/edit?html,js,output