$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,
}];

score 1 · Accepted Answer · answered Feb 23 '15 at 00:36

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 '15 at 00:36

Kjell Ivar

1,154
8
8

Nope. Maybe you're right but the error is before. I get this in $watch line: TypeError: undefined is not a function at new (app7c.js:32) – user2670996 Feb 23 '15 at 00:51
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 Feb 23 '15 at 00:54
You can see this question: http://stackoverflow.com/questions/24078535/angularjs-controller-as-syntax-and-watch – Kjell Ivar Feb 23 '15 at 00:57
Thanks, it was that and also 'this.numColumnas'. – user2670996 Feb 23 '15 at 01:18

score 0 · Answer 2 · answered Feb 23 '15 at 01:17

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);
    });

$watch configuration error angularjs

2 Answers2