angjjs http jsonの結果をスコープ内で別に使用する

Question

Angularjs $ httpと$ scopeを使用してSQL Serverからデータを取得し、スコープ内で問題なく正常に表示しました。しかし、同じスコープ内で別々の関数からhttpjsonの結果を表示しようとしたときに何も起こりませんでした。

すべて私が知りたかった。パラメータにjsonオブジェクトを取得し、それを表示する前にスライスを選択したい場合は、毎回httpリクエストを行うか、スコープを独立した関数でhttpリクエストから切り離すことができますか？

<%--Angular--%> 
<script src="../Scripts/angular.min.js"></script> 
<script> 

    var jsonObj; 
    var app = angular.module('myApp', []); 

    app.controller('myCtrl', function ($scope, $http) { 
     $http.get('../C_Angular.asmx/ShowSlider') 
     .then(function (response) { 
      jsonObj = response.data; // this part work well and retrieve data as expected by tracing C_Angular.asmx code 
     }); 
      Select_From_Json = function (x, y) { 
       $scope.Categories = jsonObj.slice(x, y); // but this part don't work when I press Button1 to call Select_From_Json 
      }; 
    }); 
</script> 

Button1を押してSelect_From_Jsonを呼び出すと、表示が行われません。

<input id="Button1" type="button" value="button" onclick="Select_From_Json(2, 4)" /> 

    <div data-ng-app="myApp" data-ng-controller="myCtrl"> 

     <div data-ng-repeat="Cat in Categories"> 

      <div style="background-image: url('{{Cat.Cat_Pic}}');"> 
       <span>{{Cat.Cat_Name}}</span> 
      </div> 

     </div> 

    </div> 

Answer 1

あなたのボタンはコントローラの範囲外です。 Select_From_Jsonが正しく実行されないのはこのためです。 コントローラが定義されているdiv内のボタンを移動します。

<div data-ng-app="myApp" data-ng-controller="myCtrl"> 
<input id="Button1" type="button" value="button" ng-click="select_From_Json(2, 4)" /> 

    <div data-ng-repeat="Cat in Categories"> 

     <div style="background-image: url('{{Cat.Cat_Pic}}');"> 
      <span>{{Cat.Cat_Name}}</span> 
     </div> 

    </div> 

</div> 

をし、コントローラ自体に：あなたはまた、使用されなければならない

<div data-ng-app="myApp" data-ng-controller="myCtrl"> 
<input id="Button1" type="button" value="button" onclick="Select_From_Json(2, 4)" /> 

    <div data-ng-repeat="Cat in Categories"> 

     <div style="background-image: url('{{Cat.Cat_Pic}}');"> 
      <span>{{Cat.Cat_Name}}</span> 
     </div> 

    </div> 

</div> 

そうのようなコントローラから機能を実行するためのNGクリック

$scope.select_From_Json = function(x, y){ 
    $scope.Categories = jsonObj.slice(x, y); 
}