質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

解決済

1回答

2812閲覧

AngularJSでtableの更新

TJMYK

総合スコア82

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

0クリップ

投稿2016/12/24 10:57

編集2016/12/24 11:07

#実現したいこと
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に初挑戦しています。参考になるソースコードをご提示頂ければ幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

同じコントローラーをformtableの2箇所で宣言しているためです。
formtableの方は削除し、bodyなどに宣言してはどうでしょうか。

HTML

1<body ng-controller="ListController">

投稿2016/12/26 01:55

jcs502ulf

総合スコア307

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TJMYK

2016/12/27 11:07

ありがとうございます! 無事更新されました。 親切なご回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問