ng-optionsを指定したangularJSコントローラメソッド

Question

ng-repeat内でドロップダウンを動的に作成する必要があるシナリオがあります。また、ドロップダウンのデータソースも動的です。つまり、ドロップダウンをバインドする必要があるクエリに基づいています。 。

私はHTTPメソッドを呼び出すことに決めました。クエリに基づいてクエリを渡すことで、私のサービスはキー値のペアを持つ汎用データを返します。

コントローラ

無限$ダイジェストループをinfdigマイHtmlの

<table style="width: 100%"> 
        <tr> 
         <td colspan="2"><strong>Enter Parameters</strong></td> 
        </tr> 

        <tr ng-repeat="x in reportDataParameter.UserParameterList"> 

         <td>{{x.UserParamDefinition.DisplayLabel}}</td> 
         <td> 
          <select ng-model="x.Model" ng-options="item.ValueField as item.TextField for item in executeQuery(x.UserParamDefinition.Query)" class="form-control"> 
           <option value="">Please Select</option> 
          </select> 
         </td> 
        </tr> 
       </table> 

：$ rootScope：私は、コントローラのメソッドを呼び出すとき、私はinfinteループWIH

エラーが終わるいます

$scope.reportDataParameter = {}; $scope.reportDataParameter = { "UserParameterList": [ { "Key": "StateID", "Value": "?ddl,State,State", "UserParamDefinition": { "DataType": "ddl", "DisplayLabel": "State", "Model": null, "Query": "SELECT Id AS ValueField, BankName AS TextField FROM BankDetail" } }, { "Key": "FacilityParentID", "Value": "?ddl,FacilityParent,FacilityParent", "UserParamDefinition": { "DataType": "ddl", "DisplayLabel": "FacilityParent", "Model": null, "Query": "SELECT Id AS ValueField, Name AS TextField FROM Organization" } } ], "ReportTitle": "Facility List By Parent", "Description": null, "ReportPage": null }; $scope.executeQuery = function (query) { var baseUrl = 'https://localhost:62'; return $http.get(baseUrl + '/api/reports/executequery/' + query).then(function (result) { return result.data; }); } 

Answer 1

まず、テンプレートでバインドする関数は、ダイジェストサイクルごとに評価されることに注意してください。各ng-repeatエントリに対して、executeQuery(x.UserParamDefinition.Query)がダイジェストサイクルごとに呼び出されます。あなたのケースでは、サイクルあたり2つの関数呼び出しです。

さらに、各呼び出しは$httpを使用してサーバーに照会するので、毎回サーバーに照会します。

次に、約束が解決されると、ng-optionsの約束を使用して、新しいダイジェストが開始され、関数が再び呼び出されます。だからあなたは無限ループに終わるのです。約束は、ng-optionsの有効な入力ではないという問題は別として、

コールバックのreturn result.data;は、コントローラーにバインドされておらず、executeQuery（約束を返します）によって返されないため、空白になりません。

これを解決する最も簡単な方法は、クエリデータをUserParameterListエントリの変数にバインドし、変数が設定されていない場合はサーバーに照会することです。そのためにゲッターメソッドを使うことができます。このようなものも可能です：

$scope.executeQuery = function(item) { 
    var baseUrl = 'https://localhost:62'; 
    $http.get(baseUrl + '/api/reports/executequery/' + item.UserParamDefinition.Query) 
     .then(function (result) { 
      item.queryResult = result.data; 
     }); 
} 

テンプレートには、x.queryResultを使用してください。 UserParameterListが変更されない場合は、配列を1回実行して各エントリに対してexecuteQueryを実行するだけです。変更された場合は、ウォッチャーを使用して変更を追跡し、実行することができますexecuteQuery。 UserParameterListが実際に変更された場合は、「クエリが実行されているときにアイテムが変更される可能性がある」のように同時性を考慮して対処する必要があります。