0

En mi html muestro de forma dinámica información traída desde un web services y los muestro con ng-repeat quedado de la siguiente manera:

como queda

a esto le quiero agregar este check numérico para agregar y restar cantidad

check

pero no encuentro la manera de asociar el check a cada objeto dentro del array, es decir que me muestre el precio a cada uno que corresponda, hasta el momento toma el precio del primer valor y al sumar se suman todos, lo mismo al restar.

Este es mi codigo:

<ion-list class="text-left" style="padding-left:1px;">
  <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="co in coffe" type="item-text-wrap" href="">

<div class="row">
  <div class="col-sm-8">
    <h2 style="color:#878787;"><b>{{co.producto}}</b></h2>
    <div style="width:250px;">
      <h5 style="color:#878787;">{{co.descripcion}}</h5>
    </div>
    <h4 style="color:#878787;">{{co.calorias}}</h4>
  </div>
    <div class="col-sm-4 text-right" style="width:90px">
      <h-number value="test.count"  min="1" max="5" step="1" change="onNumberChanged(co.precio)"></h-number>
      <div class="precio">
        ${{total}}
      </div>
    </div>
</div>
</ion-item>
</ion-list>

Intente poner un id y for pero no funciono! :c

en controlador la cosa esta así para no confundir:

 $scope.test = {};
 $scope.test.count = 1;

 $scope.onNumberChanged = function(valor){
   var numero = parseInt(valor);
   $scope.total = numero * $scope.test.count
 }

 HernannMovil.Getcafe({

   id_servicio: id

 },function(response){
   console.log(response);
   $scope.coffe = response;
 });

Primero defino las variables, luego creo la funcion onNumberChanged y por ultimo consumo los datos con getCofe que trae lo que esta en el array de la imagen...

3 respuestas 3

2

Para una respuesta mas concreta sería bueno ver el codigo de tu controlador, pero a simple vista y teniendo en cuenta el comentario que haces en la respuesta de Fernado Forcen, asumo que tu variable $scope.total esta declarada en algun punto en el controlador y no es una propiedad de tus objetos co incluidos en tu arreglo coffe. Es decir que estas mostrando $scope.total en todos los casos, como una especie de variable global del controlador, cuando deberias mostrar co.total; realizar la suma del objeto en cuestion y poner el resultado de esa sumatoria en una propiedad del mismo objeto en cuestion, y en vez de poner en tu vista html {{total}} deberia verse como {{co.total}} En el ng-click puedes mandar como parámetro el item en cuestion para realizar los calculos; seria algo como ng-click="realizarSuma(co)" de esa forma ya en la funcion haces lo correpondiente para afectar a ese item en especial.

9
  • ok agregare mi controller code Commented el 17 ene. 2017 a las 15:22
  • en efecto lo que te comentaba sobre la variable $scope.total esta en el ámbito global del controlador, por lo que si afectas a esa variable, todas las partes de tu html donde tengas {{total}} van a cambiar, para que se produzca el resultado que creo que buscas, lo conveniente seíra agregarle a cada objeto dentro de $scope.coffe la propiedad total para que sea esa propiedad la que afectes en la suma y a su vez la que muestres en la vista html
    – KikinRdz
    Commented el 17 ene. 2017 a las 15:42
  • sería llamar a suma primero como ng-click="realizarSuma(co)" despues en tu controlador declaras dicha funcion $scope.realizarSuma = function(item){ item.total = item.valor * $scope.test.count; }; .... y en la vista como vas a tener {{co.total}} deberia cambiar de forma automatica el resultado solo de ese elemento en el que se esta haciendo click... no soy muy bueno explicando las cosas espero haberme dado a entender
    – KikinRdz
    Commented el 17 ene. 2017 a las 15:56
  • esta perfet! funciono, es decir muestra sus precios correspondientes pero el checkbox al estar en el ng-repeat se duplica según el lenght y no tiene propiedad distinta, es el mismo en todo, ej: si sumo el primero se suman todos los demaces y eso tengo que solucionarlo. :0 estoy casi casi Commented el 17 ene. 2017 a las 16:10
  • Como es que construyes tu directiva que maneja la etiqueta h-number?
    – KikinRdz
    Commented el 17 ene. 2017 a las 16:48
1

Yo creo que el problema puede ser que están usando co.precio en lugar de co.numero que parece ser tu identificador. En cualquier caso es mejor que utilices ng-click en lugar de gestionarlo con eventos nativos. Solo tendrías que invocar tu método con el objeto o con el identificador del mismo:

ng-click='onNumberChanged(co.numero) o ng-click='onNumberChanged(co)

Espero que te sirva.

2
  • yo mando el precio porque en la function lo transformo a int ,lo multiplico por test.count que es 1 ++ y el resultado lo guardo en $scope.total y ese valor lo muestro como ${{total}}. al ir sumando o restando automaticamente me va mostrando el precio Commented el 17 ene. 2017 a las 14:56
  • mmm, no se si lo he entendido muy bien. En cualquier caso, si usas la segunda aproximación ng-click='onNumberChanged(co) ya tendrás el objeto completo en tu Controller y podrás sacar la información que necesites de el. Commented el 17 ene. 2017 a las 15:00
1

Puedes modificar tú método change="onNumberChanged(co.precio)" de la siguiente manera :

$scope.onNumberChanged = function($index, cantidad){

/* Recorres tú array hasta encontrar el elemento a ser modificado, una vez encontrado lo modificas realizando el calculo de precio * cantidad, es importante que le agregues el atributo total a tú objeto, por data binding la actualización va ser refrescada en tú vista. */

}

Espero te sea de utilidad.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.