2017-03-21 4 views
1

jsonを角型の外部ファイルからソートしようとしています。jsonを内部的に配列として宣言してもファイルを簡単にソートできます外部ファイルにjsonを宣言しました。私を助けてください。私を助けてくださいAngularjsを使用してhtml内のテーブルに外部jsonファイルをソート

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> 
Angularjs UI-Grid Example 
</title> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="http://ui-grid.info/release/ui-grid.js"></script> 
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css"> 
<script type="text/javascript"> 
var app = angular.module("uigridApp", ["ui.grid"]); 
app.controller("uigridCtrl", function ($scope, $http) { 
    $http.get("views.json") 
    .then(function (response) {$scope['users'] = response.data;console.log(response.data); 
          //$scope['counter'] = Object.keys(response.data).length; 

          }); 
/*$scope.users = [ 
{ name: "Madhav Sai", age: 10, location: 'Nagpur' }, 
{ name: "Suresh Dasari", age: 30, location: 'Chennai' }, 
{ name: "Rohini Alavala", age: 29, location: 'Chennai' }, 
{ name: "Praveen Kumar", age: 25, location: 'Bangalore' }, 
{ name: "Sateesh Chandra", age: 27, location: 'Vizag' } 
];*/ 
}); 
</script> 
<style type="text/css"> 
.myGrid { 
width: 500px; 
height: 200px; 
} 
</style> 
</head> 
<body ng-app="uigridApp"> 
<h2>AngularJS UI Grid Example</h2> 
<div ng-controller="uigridCtrl"> 
<div ui-grid="{ data: users }" class="myGrid"></div> 
</div> 
</body> 
</html> 

とviews.jsonは

[ 
    { 
     name:"Madhav Sai", 
     age:10, 
     location:"Nagpur" 
    }, 
    { 
     name:"Suresh Dasari", 
     age:30, 
     location:"Chennai" 
    }, 
    { 
     name:"Rohini Alavala", 
     age:29, 
     location:"Chennai" 
    }, 
    { 
     name:"Praveen Kumar", 
     age:25, 
     location: "Bangalore" 
    }, 
    { 
     name:"Sateesh Chandra", 
     age:27, 
     location:"Vizag" 
    } 
] 

が含まれています 私のコードです。あなたがこれを行うことができます

+0

同じ答え質問ここhttp://stackoverflow.com/questions/14478106/angularjs-sorting-by-property – imprezzeb

+0

それをなし私は外部ファイルからスコープに直接json配列を定義する代わりにjsonを得ることができないので、私のHttp.get()メソッドをコメントし、$ scope.usersを心配しないでください。 views.jsonは外部です。しかし、私を助けてくれてありがとう。 –

答えて

1

、可能な

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { 
    $scope.gridOptions = { 
    columnDefs: [ 
     { field: 'name' }, 
     { field: 'age' }, 
     { field: 'location' } 
    ] 
    }; 

    $http.get('data.json') 
    .success(function (data) { 
    $scope.gridOptions.data = data; 
    }); 
}]); 

DEMO

+0

これはSajeetharanに感謝しています:) –

+0

upvote場合は助けて – Sajeetharan

+0

完了しましたupvoting :) –

関連する問題