Browse input ng-repeat fields Angularjs

Asked

Viewed 141 times

1

/* Retorna produtos banco de dados */
    $scope.produtos = [];
    var carregaProduto = function () {
        $http.get("app/models/retornaProduto.php").then(function (response) {
            $scope.produtos = response.data;
        });
    };
    carregaProduto();
    
    /* Calcula valor produtos */
    $scope.multiplicaValor = function (index) {

        index.totalLinha = index.produtoQtd * index.produtoPreco;
        $scope.soma = 0;
        $scope.giga = 0;
        $scope.linha = 0;
        $scope.id = index.produtoId;
        $scope.ids = index.produtoQtd;

        angular.forEach($scope.produtos, function (value, key) {
            $scope.soma += value.produtoQtd * value.produtoPreco;
            $scope.giga += value.produtoQtd * value.produtoGB;
            if (value.produtoQtd > 0) {
                $scope.linha += (value.produtoQtd * value.produtoQtd) / value.produtoQtd;
            }
        });
    }

good evening! I need to go through the filled input and display in a modal (I want to hire?

<button class="btn btn-danger btn-sm mt-3 mb-2" data-toggle="modal" data-target="#exampleModal">Mais Informações</button>
<a ui-sref="simulaVivo" class="btn btn-sm mt-3 mb-2 ml-5" style="background: #932399;color: #FFF;">
    <i class="fa fa-binoculars"></i>&nbsp; Ver Planos Vivo</a>
<a ui-sref="simulaTim" class="btn btn-sm mt-3 mb-2" style="background: #004691;color: #FFF">
    <i class="fa fa-binoculars"></i>&nbsp; Ver Planos Tim</a>
<a ui-sref="comparaPlanos" class="btn btn-sm btn-secondary mt-3 mb-2">
    <i class="fa fa-balance-scale"></i>&nbsp; Comparar Planos</a>
<form name="formSimula" class="mb-4">
    <div class="card mt-2 sticky-top">
        <div class="card-header font-weight-bold" style="background: rgba(254,187,112,.4); border: 2px solid rgba(254,187,112,.5)">
            <img src="app/dist/images/icon-claro.png">
            <div class="float-right align-middle" ng-show="soma > 0" style="font-size: 30px; color: #2d1b53">
                <button class="btn btn-danger btn-sm mr-5" data-toggle="modal" data-target="#queroContratar"><i class="fa fa-check"></i> Quero Contratar!</button>
                <span>
                    <i class="fa fa-phone" style="font-size: 24px"></i> {{linha}}</span>&nbsp; | &nbsp;
                <span>{{giga}} GB</span>&nbsp; | &nbsp;
                <span>{{soma | currency}}</span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3" ng-repeat="claro in produtos | filter:{produtoOperadora:'Claro'}">
            <div class="card mt-2 mb-2" style="box-shadow: 3px 3px 3px #999">
                <div class="box-item-oferta-1" ng-if="claro.produtoOferta == 1">
                    <span class="label label-important font-fira">
                        <i class="fa fa-tags"></i> OFERTA</span>
                </div>

                <div class="card-header text-center font-weight-bold color-amarelo" style="font-size: 1.5em; background: #2d1b53">
                    {{claro.produtoGB}} GB - {{ claro.produtoPreco | currency}}
                    <p class="color-amarelo mb-0" style="font-size: 11px;">valor por linha</p>
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="col-sm-5">
                            <label for="exampleInputEmail1" class="font14 font-weight-bold">Qtd</label>
                            <input type="text" class="form-control form-control-sm text-center font-weight-bold" ng-model="claro.produtoQtd" ng-change="multiplicaValor(claro)"
                                style="font-size: 1.125em" value="{{claro.produtoId}}">
                        </div>
                        <div class="col-sm-7">
                            <label for="exampleInputEmail1" class="font14 font-weight-bold">Total</label>
                            <input type="text" class="form-control form-control-sm text-center font-weight-bold" disabled style="font-size: 1.125em"
                                value="{{claro.totalLinha | currency}}">
                        </div>
                    </div>
                    <p class="card-text mt-3 font13" style="font-weight: 600">{{claro.produtoDesc}}</p>
                </div>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="queroContratar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title text-danger" id="exampleModalLabel">
                                <i class="fa fa-info-circle"></i> Quero Contratar</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <ul>
                                <li></li>
                            </ul>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger">
                    <i class="fa fa-question-circle"></i> Informações Conteúdo Digital</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <img src="app/dist/images/conteudo-digital.png" width="100%">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

). Example I have 8 fields and only 2 fields were filled.. I would like to show only the fields filled in the modal to generate a proposal. I do this with foreach? Could someone give me an example. The fields see from ng-repeat how to go through the filled ones? inserir a descrição da imagem aqui

  • You can put the minimum example ???

  • There is a button on the Want to Hire page that opens a modal.. I need to go through the fields filled in in Qtd and move to that modal. In the example of the image is filled the field 30GB and the field 10GB would like to pass these two values to the modal. That’s what I can’t do. I do with foreach to go through the filled fields?

  • Ricardo I need to see your Angular code!? I don’t know where the data is coming from!

  • It was barely...!

  • You just want the die filtered to play a ng-repeat in modal?

  • Yes only those who had the field filled.

Show 1 more comment

1 answer

0


I made a minimal example where a filter on array as follows:

$scope.produtos.filter(function(it){
  return (it.Quant > 0);
});

Full example:

var app = angular.module('app', []);
app.controller('indexCtrl', function($scope) {
  $scope.produtos = [{
      'Name': 'Arroz',
      'Quant': '',
      'Valor': ''
    },
    {
      'Name': 'Feijão',
      'Quant': '',
      'Valor': ''
    },
    {
      'Name': 'Café',
      'Quant': '',
      'Valor': ''
    }
  ];
  $scope.filterProdutos = function(){
    var items = $scope.produtos.filter(function(it){
      return (it.Quant > 0);
    });
    console.log(items);
    return items;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app="app" ng-controller="indexCtrl">
  <div ng-repeat="p in produtos">
    <labe>{{p.name}}</label>
    <input type="text" ng-model="p.Quant" />
    <input type="text" ng-model="p.Valor" />
  </div>
  <button ng-click="filterProdutos()">Filtrar</button>
</div>

  • modal does not display the data

  • @Ricardochomics you wrote ngRepeat in those tag li!?

  • 1

    had forgotten now it worked out, worth once again

Browser other questions tagged

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