Updating table based on select option value with AngularJS

Question

I have a drop down (select option) menu with various url query strings. Each option represents a server side query that sends back json data. What I'm trying to implement is that when the user selects an option, Angular sends a $http.get that fetches the json data and updates a table in my app. Below is a mock-up of the html with some Angular to (hopefully) clarify:
...

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

What would be the cleanest way to do this in Angular?

thorgilsv · Accepted Answer · 2013-01-27 23:53:39Z

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>

edited Jan 27, 2013 at 23:53

thorgilsv

3331 gold badge3 silver badges11 bronze badges

answered Jan 27, 2013 at 18:51

Max

8,8465 gold badges35 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

thorgilsv Over a year ago

Thank you very much. This solves my problem. I edited the code because $http was missing from MyCtrl().

Collectives™ on Stack Overflow

Updating table based on select option value with AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related