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

Question

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

Navigation

#1 by (0 votes)

0

Sorry, but I'm a layman and I'm starting! In HTML, I want to display the data defined in a controller's angular 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 make 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 saved, no information appears. The table is null. I know the error is when I call the angle parameter to show the information inside the table, but I do not know how to fix this.

Thank you in advance if anyone can understand where the error is.

javascript html angularjs

asked by anonymous 12.10.2018 / 06:48

1 answer

UNit Test Project and XamarinUITest cross-plataform test project in the same solution do not work together Web / Android C # Problem inserting data into the Firibird database

score 0 · 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 fetch the item you want to register from the initial array. I'll put the code below.

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><divng-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 have helped a little.