$watch configuration error angularjs

Question

I want to display some items in several rows. The user can choose if displaying 3 or 4 items per row. Columns get updated with the correct class, but items per row doesn't. I've commented the $watch sentence where I think the problem is.

html file:

<!DOCTYPE html>
<html lang="en" ng-app="miTienda">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href=" node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>

<body ng-controller="TiendaController as tienda">
    <div class="container">
    <div class="row">
        Número de columnas: <input ng-model="tienda.numColumnas" type="number" min="3" max="4" />
    </div>
        <div class="row" ng-repeat="fila in tienda.filas">
            <div ng-class="{'col-sm-4': tienda.numColumnas == 3, 'col-sm-3': tienda.numColumnas == 4}" ng-repeat="producto in fila">
                <h4>
            {{producto.nombre}} 
            <span class="label" ng-class="tienda.stockClass({{producto.stock}})">Stock: {{producto.stock}}</span>
            </h4>
                <p>{{producto.precio|currency}}</p>
                    <img class="img-responsive" ng-src="{{producto.imagen}}">
                    <button type="button" class="btn btn-primary pull-right" ng-disabled="producto.stock===0">
                        <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Añadir al carro</button>

            </div>
        </div>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script src="scripts/angular-locale_es-es.js"></script>
    <script src="scripts/app7c.js"></script>
</body>

</html>

js file:

'use strict';
var app = angular.module('miTienda', []);
app.controller('TiendaController', function() {
    this.productos = articulos;
    this.stockClass = function(stock) {
        if (stock >= 15) {
            return 'label-info';
        } else if (stock === 0) {
            return 'label-danger';
        } else {
            return 'label-warning';
        }
    };

    /*las columnas que quiero por cada fila*/
    this.numColumnas = 3;

    this.getFilas = function(array, columns) {
        var filas = [];

        //http://stackoverflow.com/questions/8495687/split-array-into-chunks
        var i, j, temparray, chunk = columns;
        for (i = 0, j = array.length; i < j; i += chunk) {
            temparray = array.slice(i, i + chunk);
            filas.push(temparray);
        }
        return filas;
    };
    this.filas = this.getFilas(this.productos, this.numColumnas);
    /*el observador:*/
    /*this.$watch('this.numColumnas', function() {
        this.filas = this.getFilas(this.productos, this.numColumnas);
    });*/
});
var articulos = [{
    nombre: 'FUJIFILM FinePix S8600 - negro - Cámara fotográfica digital',
    precio: 149.00,
    imagen: 'img/fujifilm.jpg',
    stock: 5
}, {
    nombre: 'PANASONIC VIERA TX-55AS650E - Televisor LED 3D Smart TV',
    precio: 1499.00,
    imagen: 'img/tv.jpg',
    stock: 9
}, {
    nombre: 'SAMSUNG Galaxy S4 Value Edition - blanco - 16 GB - Smartphone',
    precio: 399.00,
    imagen: 'img/fujifilm.jpg',
    stock: 22,
}, {
    nombre: 'WD WD Red WD40EFRX - 4 TB - Disco duro interno - 3.5"',
    precio: 174.90,
    imagen: 'img/disco-duro.jpg',
    stock: 0,
}, {
    nombre: 'SAMSUNG Gear Fit - negro - Reloj conectado',
    precio: 199.00,
    imagen: 'img/samsung-gear.jpg',
    stock: 34,
}];

Kjell Ivar · Accepted Answer · 2015-02-23 00:36:19Z

1

I'm guessing the problem has to do with this not referring to what you think it does within the watch callback. If you try binding this to a variable, does it work?

var self = this;
this.$watch('this.numColumnas', function() {
    self.filas = self.getFilas(self.productos, self.numColumnas);
});

answered Feb 23, 2015 at 0:36

Kjell Ivar

1,1648 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2670996 Over a year ago

Nope. Maybe you're right but the error is before. I get this in $watch line: TypeError: undefined is not a function at new <anonymous> (app7c.js:32)

Kjell Ivar Over a year ago

Allright, the issue might be with the $watch itself then. I've only used $scope.$watch(...), maybe this.$watch doesn't work, as $watch is a function on $scope. I'm not sure of this, but just another guess :)

Kjell Ivar Over a year ago

You can see this question: stackoverflow.com/questions/24078535/…

user2670996 Over a year ago

Thanks, it was that and also 'this.numColumnas'.

user2670996 · Accepted Answer · 2015-02-23 01:17:24Z

0

This way it works:

'use strict';
var app = angular.module('miTienda', []);
app.controller('TiendaController', ['$scope', function($scope) {
    this.productos = articulos;
.....

var self=this;

    $scope.$watch('tienda.numColumnas', function() {
        self.filas = self.getFilas(self.productos, self.numColumnas);
    });

answered Feb 23, 2015 at 1:17

user2670996

2,6747 gold badges32 silver badges45 bronze badges

Collectives™ on Stack Overflow

$watch configuration error angularjs

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related