How to get the index of a populated list in the change of a select using the ng-options of Angularjs

Asked

Viewed 87 times

1

How do I get the index of an item selected in my select?

Html

<div class="row container">
    <div class="col s12 ">
        <h4>Cadastrar Pedido</h4>
    </div>
    <form class="" name="formulario">
         <div class="row">
            <div class="input-field col s6 m6 l6">
                <i class="material-icons prefix">store</i>
                <select ng-controller="ListaProdutos"
                        ng-model="pedido.ProdutoId"
                        ng-options="prod.Id as prod.NomeProduto for prod in ListaProdutos"
                        ng-change="MostraQuantidade(ListaProdutos.indexOf(prod))" material-select>
                    <option value="">Selecione um produto</option>
                </select>
                <label for="inputLoja">Produto</label>
            </div>

            <div class="input-field col s2 m2 l2">
                <i class="material-icons prefix">store</i>
                <input id="inputQtd" type="number" class="validate" name="Qtd" ng-model="pedido.Qtd" min="0" max="">
                <label for="inputLoja">Qua</label>
            </div>
            <div class="input-field col s2 m2 l2">
                <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
            </div>
        </div>
    </form>
</div>

Controller

angular.module("modaFeminina").controller("PedidoController", function ($scope, $http, $base64) {

    $scope.pedido = {}

    $scope.submeter = function () {
        var teste = $scope.pedido;
    }


}).controller("ListaProdutos", function ($scope, $http) {

    $scope.ListaProdutos = [];

    $http.get("/Produto/Listar").success(function (produtos) {
        $scope.ListaProdutos = produtos;
    })
    .error(function () {

    });

    $scope.MostraQuantidade = function (value) {

        var index = value;

    }
});
angularjs

  • Try this: ListaProdutos.indexOf(pedido.ProdutoId)

  • @bfavaretto ja tried it returns me -1 in my function.

1 answer

0

Within ng-options you must include the index with the value of your array example ng-options="produtos.indexOf(prod) as prod.NomeProduto for prod in produtos" done this the ng-model value becomes the index of the array

Follow the code I put together 

<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="ctrl">   
     <select 
                        ng-model="ProdutoId"
                        ng-options="produtos.indexOf(prod) as prod.NomeProduto for prod in produtos"
                        ng-change="MostraQuantidade(ProdutoId)" material-select>
                    <option value="">Selecione um produto</option>
      </select>  
</div>

<script>
angular.module('myApp', []).controller('ctrl', function($scope) {

   $scope.produtos = [
        {Id: 1, NomeProduto: 'produto1'},
        {Id:2 , NomeProduto:'produto2'}
    ];

    $scope.MostraQuantidade = function (index) {
        console.log(index);
    }
});

</script>

</body>
</html>

  • But that way I’ll be storing the Index of my list in my select value, I wanted to send the index only in event change and store the id in select value

Browser other questions tagged angularjs

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