2016-05-25 3 views
2

私はAngularJSを初めて使用しています。ここで私は問題に直面しています。送信ボタンがあるページがあります。送信モーダルを開く必要があり、URLのデータがモーダル内になければなりません。AngularJSのエラー

Index.htmlと::

<!doctype html> 
<html ng-app="plunker"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script> 
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script> 
<script src="example.js"></script> 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
</head> 
<body> 
<div ng-controller="ModalDemoCtrl"> 
<script type="text/ng-template" id="myModalContent.html"> 
<div class="modal-header"> 
<h3>Modal</h3> 
</div> 
     <div class="modal-body"> 
      {{items}} 
     </div> 
<div class="modal-footer"> 
    <button class="btn btn-warning" ng-click="cancel()">Close</button> 
</div> 
</script> 
    <button class="btn" ng-click="open()">Submit</button> 
</div> 
</body> 
</html> 

example.js:

angular.module('plunker', ['ui.bootstrap']); 
var ModalDemoCtrl = function ($scope, $modal, $log, $http) { 


//$scope.items = ['item1', 'item2', 'item3']; 

$scope.open = function() { 
    debugger 
    $http.get("URL") 
     .success(function (response) { 
      debugger 
      $scope.items = response.data.Table; 
      console.log(response.Table); 
     }); 
      var modalInstance = $modal.open({ 
       templateUrl: 'myModalContent.html', 
       controller: 'ModalInstanceCtrl', 
       resolve: { 
        items: function() { 
         return $scope.items; 
        } 
       } 
      });   
}; 
}; 
var ModalInstanceCtrl = function ($scope, $modalInstance, items) { 
$scope.items = items; 

$scope.cancel = function() { 
    $modalInstance.dismiss('cancel'); 
}; 
}; 

エラーそれは空で、URL.Belowからフェッチされていないデータは、私が持っているコードですが、今のところ、モーダルが開きます送信をクリックした後にIAMが取得されます:

リソースを読み込めませんでした:サーバーは404 のステータスで応答しました発見OT)

は、リソースの読み込みに失敗しました:サーバーは

、これは間違って起こっている

Here is a demo plunker

(メソッド許可されていません)405の状態で、私はローカルホストのために使用しています(URL)を応答しました?誰もが助けることを願っています。前もって感謝します!!

+0

クロムまたは郵便配達時に残りのクライアントから返されているURLを確認できます。モーダルは正常に動作しているようです。 – Sajal

+0

@ Dev-One:yup URLはブラウザで問題なく動作しています。しかし、データはモーダル内部でフェッチされず、 'console.log()'であっても、コンソール上のオブジェクトを見ることができませんでした。 – Deborah

答えて

1

私はあなたのコードを少し更新...
その作業罰金

angular.module('plunker', ['ui.bootstrap']); 
var ModalDemoCtrl = function ($scope, $modal, $log, $http) { 

    $scope.open = function() { 
     $http.get("http://jsonplaceholder.typicode.com/posts") 
      .success(function (response) { 
       var modalInstance = $modal.open({ 
        templateUrl: 'myModalContent.html', 
        controller: 'ModalInstanceCtrl', 
        resolve: { 
         items: function() { 
          return response; 
         } 
        } 

       }); 
      }); 


    }; 
}; 

var ModalInstanceCtrl = function ($scope, $modalInstance, items) { 
    $scope.items = items; 

    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 
}; 

問題は、その細かいfunction.now決意で戻りました。
もう1つの結果、結果は配列内のデータのセットです。あなたはそれをループする必要があります。

+0

これはサンプルURLで問題ありませんが、元のURLにはJSONデータがあります:{"Table":[{"......"}}}。だから私は解決として解決コードを更新している:{items:function(){$ scope.items = response.data.Table; return $ scope.items; }。これは正しいです? – Deborah

+0

"$ scope.items = response.data.Table;を割り当てる必要はありません。 "response.data.Table;"を返すだけです –

+0

私は答えのようにしています。 –

0

ajaxコールとmodalInstanceオープンメソッドは、ajax呼び出し成功メソッドの外にあるため、データを返す場合としない場合があります。

modalInstanceロジックが正常に動作しているようです。 Dev-Oneは、データが返されているかどうかを確認するために、サービスを休止することを提案しました。

この作業にplunkrいくつかのサンプルデータの呼び出し方法
$ http.get( "URL")で

http://plnkr.co/edit/tH97V6m54P7TFZzcS8CA

$http.get("http://jsonplaceholder.typicode.com/posts").success(function (response) { 
       debugger 
       $scope.items = response; 
       console.log(response); 
       var modalInstance = $modal.open({ 
        templateUrl: 'myModalContent.html', 
        controller: 'ModalInstanceCtrl', 
        resolve: { 
         items: function() { 
          return $scope.items; 
         } 
        } 

       }); 
      }); 
+0

$ http.get( "http://jsonplaceholder.typicode.com/posts").success(function(response){)で試したところ、コンソールのエラーは: 'プロパティを読み取れません 'テーブル'未定義 ' – Deborah

0

を参照してください
私が正しく表示されませんurl。 urlを "url"と指定しているためです。 "localhost:8000/GetItems"のようなものでなければなりません。

そして成功メソッドでモデルを開いてください。
そうしないと、モデルがデータを取得しません。今

+0

Iここで "URL"として言及していますが、元のURLで試してみました。 – Deborah

+0

成功方法の中に何かを得ていますか? –

+0

成功したものは見つかりませんでした。 plunkをチェックしてください:http://plnkr.co/edit/tH97V6m54P7TFZzcS8CA?p=preview(http:// – Deborah

関連する問題