#実現したいこと
Newボタンを押すと、tableが更新されるようにしたい
#現状
ページがロードされた時は、initで取得されているlists.jsonが正しくテーブルにbindされます。
しかしながら、Newボタンを押してもnew_lists.jsonを取得はしているものの、tableが書き換えられません。
#現在のコード
JavaScript
1var app = angular.module('GetJSON', []); 2 3app.controller('ListController', function ($scope, $http){ 4 5 // ページロード時 6 $scope.init = function() { 7 $http.get('/lists.json') 8 .then(function (success){ 9 $scope.results = success.data; 10 },function (error){ 11 alert(error); 12 }); 13 }; 14 15 // 検索時 16 $scope.new = function() { 17 $http.get('/new_lists.json') 18 .then(function (success){ 19 $scope.results = success.data; 20 },function (error){ 21 alert(error); 22 }); 23 }; 24 25 26});
HTML
1<!doctype html> 2<html lang="ja" ng-app="GetJSON"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>GeoJSON</title> 9 10 <!-- Angular 1.6.0 --> 11 <script src="/js/angular.min.js"></script> 12 13 <!-- Bootstrap 3.3.7 --> 14 <script src="/js/bootstrap.min.js"></script> 15 <link rel="stylesheet" href="/css/bootstrap.min.css"> 16 <link rel="stylesheet" href="/css/bootstrap-theme.min.css"> 17 18</head> 19<body> 20 21 <form ng-controller="ListController"> 22 <div class="text-right form-group"> 23 <button ng-click="new()">New</button> 24 </div> 25 <hr /> 26 </form> 27 28 <table class="table" ng-cloak ng-init="init()" ng-controller="ListController"> 29 <thead> 30 <tr> 31 <th></th> 32 <th>Name</th> 33 </tr> 34 </thead> 35 <tbody> 36 <tr ng-repeat="result in results"> 37 <td>{{ result.id }}</td> 38 <td>{{ result.name }}</td> 39 </tr> 40 </tbody> 41 </table> 42</body> 43</html>
AngularJSに初挑戦しています。参考になるソースコードをご提示頂ければ幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/27 11:07