2016-06-15 2 views
2

データがネストされたJSON配列の場合、バインディング値にアクセスする正しい構文を指導できますか?ここでは、ユースケースのプランナーです。UIグリッドネストされたJSON配列のバインディング値にアクセスする方法

基本的には、ここで見られるように、アドレスは異なるアドレスのコレクションです。私はこれまでに試したAngular JSフィルタ式に似たフィルタリングが必要ですワーキング。しかし、MainAttribute [childAttribute = 'XYZ']。valueなどのUIグリッドに固有の式がいくつかあります。

問題AngularJS式を使用して配列からフィルタリングされた子アトリビュートを取得できますが、バックエンドで配列が残っていて、フロントエンドからそのカラムでフィルタリングできないなどの問題が発生しています。その列に対して完全なJSON配列を与えています。

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']); 

app.controller('MainCtrl', ['$scope', function ($scope) { 
    var statusTemplate = "<div>{{(address | filter:{street:'303 Dove Ave'})[0].city}}</div>"; 

    $scope.gridOptions = { 
     enableSorting: true, 
     columnDefs: [{ 
      name: 'firstName', 
      field: 'first-name' 
     }, { 
      name: '1stFriend', 
      field: 'friends[0]' 
     }, { 
      name: 'city', 
      cellTemplate: statusTemplate 
     }, { 
      name: 'getZip', 
      field: 'getZip()', 
      enableCellEdit: false 
     }], 
     data : [{ 
      "first-name": "Cox", 
      "friends": [ 
       "friend0" 
      ], 
      "address": [{ 
       street: "301 Dove Ave", 
       city: "Nairobi", 
       zip: "39565" 
      }, { 
       street: "302 Dove Ave", 
       city: "Delhi", 
       zip: "39565" 
      }, { 
       street: "303 Dove Ave", 
       city: "Patna", 
       zip: "39565" 
      }, { 
       street: "304 Dove Ave", 
       city: "Jamshedpur", 
       zip: "39565" 
      }, { 
       street: "305 Dove Ave", 
       city: "Bangalore", 
       zip: "39565" 
      }], 
      "getZip": function() { 
       return this.address.zip; 
      } 
     }] 
    }; 
}]); 

index.htmlを

<html ng-app="app"> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script> 
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> 
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> 
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> 
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script> 
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css"> 
    <link rel="stylesheet" href="main.css" type="text/css"> 
    </head> 
    <body> 

<div ng-controller="MainCtrl"> 
    <div ui-grid="gridOptions" class="grid"></div> 
</div> 
    <script src="app.js"></script> 
    </body> 
</html> 

答えて

0

あなたは "row.entity" を使用して行のエンティティにアクセスすることができます。だからstatusTemplateを含む行を変更:

var statusTemplate = "<div>{{(row.entity.address | filter:{street:'303 Dove Ave'})[0].city}}</div>"; 

これは私をたくさん助けた: http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed/

+0

私はどのように」、と私plunkerに言及したが、それはここで本当の問題である問題をもたらしたことを試してみましたネストされたJSON配列のバインディング値にアクセスする " 私のプランナーリンクを通って実際の動作を見ることができます。子属性を取得できますが、その列をフィルタリングしても機能しません。また、エクスポートするとコンプリータJSONがCSV/PDFファイルに表示されます。

{{(row.entity.address | filter:{street:'303 Dove Ave'})[0].city}}

関連する問題