Question

我有一个带有各种url查询字符串的下拉（选择选项）菜单。每个选项代表发送回json数据的服务器端查询。我想要实现的是，当用户选择一个选项时，Angular会发送一个$ http.get来获取json数据并更新我的应用程序中的表。下面是一个html的模型，其中一些Angular（希望）澄清：
...

<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中最干净的方法是什么？

Answer 1

<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>

使用AngularJS基于选择选项值更新表

1 个答案: