Update tbody when selecting option in ng-options

Question

I need to update a div after selecting the ng-option option.

Controller.js

    $scope.prop = {
            "type": "select", 
            "name": "Service",
            "value": "CDI", 
            "values": [ "CDI", "IBOVESPA"] 
    };

index.html

                        <label for="indice">Indices:</label> 

                          <select class="form-control input-sm" 
                          data-ng-model="prop.value" 
                          data-ng-options="v for v in prop.values">
                          </select>     


                        <tbody>
                            <tr>
                                <td class="text-center">CDI</td>
                                <td class="text-center">{{vm.lamina.cdi.mes ?
                                    (vm.lamina.cdi.mes | number : 2) :
                                    vm.messageService.getN('MN009')}}</td>
                                <td class="text-center">{{vm.lamina.cdi.ano ?
                                    (vm.lamina.cdi.ano | number : 2) :
                                    vm.messageService.getN('MN010')}}</td>
                                <td class="text-center">{{vm.lamina.cdi.ultimoAno ?
                                    (vm.lamina.cdi.ultimoAno | number : 2) :
                                    vm.messageService.getN('MN010')}}</td>
                            </tr>
                            <tr>
                                <td class="text-center">% CDI</td>
                                <td class="text-center" data-ng-if="vm.cdiMes != '(-)'">{{vm.cdiMes | number : 2}}</td>
                                <td class="text-center" data-ng-if="vm.cdiMes == '(-)'">{{vm.cdiMes}}</td>
                                <td class="text-center" data-ng-if="vm.cdiAno != '(-)'">{{vm.cdiAno | number : 2}}</td>
                                <td class="text-center" data-ng-if="vm.cdiAno == '(-)'">{{vm.cdiAno}}</td>
                                <td class="text-center" data-ng-if="vm.cdiUltimoAno != '(-)'">{{vm.cdiUltimoAno | number : 2}}</td>
                                <td class="text-center" data-ng-if="vm.cdiUltimoAno == '(-)'">{{vm.cdiUltimoAno}}</td>
                            </tr>
                        </tbody>

You would need the support to exchange the tbody CDI to a tbody IBOV according to the option selected in ng=option or to update the data in a single tbody.

Answer 1

You can use ng-if to change tables:

<tbody ng-if="prop.value === 'CDI'">
  ...
</tbody>

<tbody ng-if="prop.value === 'IBOVESPA'">
    ...
</tbody>

OR creates an array/object with table data:

$scope.dados = {
  CDI:{
    mes:"09",
    ultimoAno:"2018",
    ....
  },
  IBOVESPA:{
    mes:"09",
    ultimoAno:"2018",
    ....
  }
}

and changes your table to something:

<tr>
    <td class="text-center">% {{prop.value}}</td>
    <td class="text-center" data-ng-if="dados[prop.value].mes != '(-)'">{{dados[prop.value].mes | number : 2}}</td>
    <td class="text-center" data-ng-if="dados[prop.value].mes == '(-)'">{{dados[prop.value].mes}}</td>
....
</tr>