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

Asked

Viewed 65 times

0

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.

  • @Lucas Duete, could you make the rest of the code available? would be simpler to understand where the problem is. For example, what is performed with category object information?

  • Please provide more snippets of your code to make it easy to find the problem

  • Thanks for the help!

1 answer

0

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.

  • It helped a lot, it was this doubt that I had at the time to select the value and save it. Thanks for helping Cleyton!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.