Update tbody when selecting option in ng-options

Question

Update tbody when selecting option in ng-options

Navigation

#1 by (0 votes)

0

I need to update a div after selecting the option in ng-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 change the tbody CDI to an IBOV tbody according to the option selected in the ng = option or to update the data in a single tbody.

angularjs angularjs-directives angularjs-scope

asked by anonymous 08.11.2018 / 12:47

1 answer

Losing value of POST fields when user connection is slow Difference from $ apply () and $ evalAsync ()

score 0 · Accepted Answer

You can use ng-if to change the tables:

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

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

OR creates an array / object with the table data:

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

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