昨日はAjaxで取得したデータをリスト表示するところまででした。
このタイプでよくあるのはさらに表示とかで続きのデータを表示させることですよね。
ng-repeatで表示させているのでどうしたものかと考えましたが、単に配列にデータするだけであっさり表示されました。
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("testCtrl", function($scope, $http) {
$http.get('data.json').success(function(data, status){
$scope.thread = data;
});
$scope.addData = function() {
$http.get('data.json').success(function(data, status){
$scope.thread.mydata = $scope.thread.mydata.concat(data.mydata);
});
}
});
</script>
</head>
<body ng-controller="testCtrl">
<div>
<h1>{{thread.mytest}}</h1>
<ul>
<li ng-repeat="e in thread.mydata"><a href="{{e.url}}">{{e.title}}</a></li>
</ul>
<button ng-click="addData()" type="submit">さらに表示</button>
</div>
</body>
</html>
先に取得していた配列にconcatで配列を追加しています。
テストなのでデータは同じデータですが。
たったこれだけで表示までされてしまいます。
すごく楽なので、学習のモチベーションも上がります。
あと、クリック時はこのように書くんですね。慣れたら問題なく使えそうです。
あと、通常のWebであればクロスドメインを考慮してサーバー側もいろいろやらないといけない感じなんですが、Cordovaアプリからは特に問題なく取得できます。
上の例でdata.jsonを他のサーバーのURLに変えてもアプリからは問題なく取得できていました。
Cordova側でホワイトリストの設定はしていないと通信できないかもしれませんが、デフォルトで全てOKとなっているみたいなので特に設定しなくても大丈夫でした。
ちょっとしたサンプルを作成するにもいろいろ調べないといけないので最初はなかなか進まないのですが、しばらくは辛抱して勉強していきたいと思います。
CakePHPでも思ったのですが、MVCは慣れて書き方がわかってくると開発効率がものすごくいいです。フレームワークの流儀に合わすことに抵抗がなければかなりすんなりいくと思います。
逆に、自分流でないと嫌！みたいな方はちょっと厳しいかも。
僕は完全に合わせるほうです（笑
0 件のコメント:
コメントを投稿