1

さまざまな URL クエリ文字列を含むドロップダウン (オプションの選択) メニューがあります。各オプションは、json データを送り返すサーバー側クエリを表します。私が実装しようとしているのは、ユーザーがオプションを選択すると、Angular が $http.get を送信して json データをフェッチし、アプリのテーブルを更新することです。以下は、(できれば) 明確にするために Angular を使用した html のモックアップです:
...

<select>
<option value="http://host:8000/getjsondata.jsp?var=1">option1</option>
<option value="http://host:8000/getjsondata.jsp?var=2">option2</option>

<option value="http://host:8000/getjsondata.jsp?var=N">optionN</option>
</select>

<table>
<tr ng-repeat="result in results">
<td>{{value1}}</td>
<td>{{value2}}</td>

<td>{{valueN}}</td>
</tr>
</table>

Angular でこれを行う最もクリーンな方法は何でしょうか?

4

1 に答える 1

3 
<select ng-options="obj.val as obj.txt for obj in slctOptions"
        ng-change="update()"
        ng-model="slctItem">

</select>
<table>
  <tr ng-repeat="result in results">
     <td>{{result.value1}}</td>
     <td>{{result.value2}}</td>
     <td>{{result.value3}}</td>
  </tr>
</table>
<script>
function MyCtrl($scope, $http) {
    $scope.slctOptions = [
        {
          val: 'a',
          txt: "option1"
        },
        {
          val: 'b',
          txt: "option2"
        },
        {
          val: 'c',
          txt: "option3"
        },
        {
          val: 'n',
          txt: "optionn"
        },
    ];
    $scope.update = function () {
      $http.get('http://host:8000/getjsondata.jsp?var=' + $scope.slctItem).success(function (data) {
        $scope.results = data;
      });
    };
}
</script>
于 2013-01-27T18:51:12.613 に答える