0

Angularのチュートリアル「Phonecat」で紹介しています。チュートリアルに対して、すべての情報を含む1つのjsonのみを含むリストと詳細ビューを備えたシンプルなアプリを作成したいと思います。

リストビュー（jsonの完全なコンテンツを表示）は正常に機能しますが、詳細ビューにAngularサービスを設定する方法に苦労しています。私はXHRメソッドを使用しています：

Controller.js：

function PlaygroundDetailCtrl($scope, Playground) {
  $scope.playgrounds = Playground.query();
}

Services.js

angular.module('playgroundcatServices', ['ngResource']).
    factory('Playground', function($resource){
  return $resource('playgrounds/playgrounds.json', {}, {
    query: {method:'GET', isArray:true}
  });
});

playground.json

 [ 
   { 
     "id:" 1,
     "properties": "true"
     "lat": "51.347789"
     "lon": "12.232234"
   },
   {
     "id:" 2,
     "properties": "false"
     "lat": "51.347789"
     "lon": "12.766667"
   }
]

Angularにそのプロパティを持つエントリ（id：1）を1つだけ表示させたい。それを行う最も賢い方法は何ですか：すべてをもう一度表示してからフィルタリングしますか？

私は困惑しています。

4

3 に答える 3

2

ビューで Angularフィルターを使用します (サービスでデータをフィルター処理する必要はありません)。

<div ng-repeat="entry in playgrounds | filter:{id: 1}">
    <p>properties: {{entry.properties}}</p>
    <p>lat: {{entry.lat}}</p>
    <p>lon: {{entry.lon}}</p>
</div>

jsfiddle : http://jsfiddle.net/bmleite/Ad6u9/

于 2013-02-13T16:23:28.590 に答える
1

これは非常にうまくいきました：

コントローラ：

function PlaygroundDetailCtrl($scope, $routeParams, $http) {
    $http.get('playgrounds/playgrounds.json').success(function(data){
        angular.forEach(data, function(item) {
          if (item.id == $routeParams.playgroundId) 
            $scope.playground = item;
        });
    });
于 2013-02-15T22:09:30.920 に答える
0

私は今、まったく同じシナリオを持っていると思います（あなたは「モバイル」を念頭に置いて開発していると思います（私はそうであり、データ転送を最小限に抑えたいと考えています）-私は1つの「マスターjsonファイル」を使用しています、そして次に、詳細ビューで、ID 値でその json ファイルをフィルタリングするだけです (json をリロードする必要がないように)。

これは完全にテストされていませんが、元の質問のコードは次のように変更する必要があります。

angular.module('playgroundcatServices', ['ngResource'])
.factory('Playground', function($resource){
    return $resource('playgrounds/playgrounds.json', {}, {
        query: {method:'GET', isArray:true}
    });
});

function PlaygroundDetailCtrl($scope, Playground) {
  Playground.query(
    // params (none in this case)
    {},
    // Success
    function (data) {
        $scope.playgrounds = data.filter(function (o) {
            return o.id == $routeParams.playgroundId; // assuming you've set this up in your routes definition
        })[0];
    },
    // Error
    function (data) {
        //error handling goes here
    }
  );
}

'success' ハンドラーにも同様のものを入れて$scope.isDataLoaded = true;、それを監視し、データの読み込みがいつ完了したかを確認するために使用することができます (たとえば、ディレクティブ内)。

私はそこに満足していませんが、解決策はループ[0]よりも優れていると思います.forEach

于 2013-04-29T09:20:47.750 に答える