How do I bring a select of values defined in a Controller in angular.js?

Question

I’m sorry, but I’m a layman and I’m starting! In HTML, I want to display the data defined in an angular controller class. As below:

$scope.tiposCategorias = [
                            { id: 1, descricao:'Processados'},
                            { id: 2, descricao:'Naturais'}, 
                            { id: 3, descricao:'Perecíveis'}, 
                            { id: 4, descricao:'Antiperecíveis'}
                    ];

In the view I do a basic crud, but selecting only the data that is already defined in the controller class. As below:

<select class="form-control" ng-model="categoria.tipoCategoria" ng-options="tp.id as tp.descricao for tp in tiposCategorias" required></select> 

After that, I want to present them in an HTML table. According to the code below:

<tr ng-repeat="cate in listaCategorias | filter:criteria">
    <td>
        {{cate.tipoCategoria==1?'Processados':'Naturais':'Perecíveis':'Antiperecíveis'}}
    </td>
</tr>

However, when I choose the option and save, no information appears. The table is null. I know the error is when I call the angular parameter to show the information inside the table, but I don’t know how to fix it.

Thanks in advance if anyone can understand where the mistake is.

Answer 1

Hello I think I understand what you need. I think it’s pretty quiet to do. To be cool you just need to use the filter function to find the item you want to register from the initial array. I’ll put the code down.

app = angular.module('meuapp', []);

    app.controller('moduloArray', function($scope) {
        $scope.tiposCategorias = [{
            id: 1,
            descricao: 'Processados'
        }, {
            id: 2,
            descricao: 'Naturais'
        }, {
            id: 3,
            descricao: 'Perecíveis'
        }, {
            id: 4,
            descricao: 'Antiperecíveis'
        }];

        $scope.listaCategorias = Array();
        $scope.adicionarItem = function(categoria) {
          $scope.categoria.tipoCategoria = null;
          //filtrando apenas o item que quer cadastrar para pegar a descrição
          var a = $scope.tiposCategorias.filter((item) => (item.id == categoria))[0].descricao;
          $scope.listaCategorias.push({
              id: categoria,
              descricao: a
          });
        }
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="meuapp">
    <div ng-controller="moduloArray">
        <select class="form-control" ng-model="categoria.tipoCategoria" ng-options="tp.id as tp.descricao for tp in tiposCategorias" required></select>
        <button ng-disabled="!categoria.tipoCategoria" ng-click="adicionarItem(categoria.tipoCategoria)">+</button>
        <table>
            <tr ng-repeat="cate in listaCategorias track by $index">
                <td>
                    {{$index+') '+'ID: '+cate.id+' Tipo: '+cate.descricao}}
                </td>
            </tr>
        </table>
    </div>
</div>

I hope I helped a little.