Question

我想在多行中显示一些项目。用户可以选择是否每行显示3个或4个项目。使用正确的类更新列，但每行的项目不会更新。我已经评论了我认为问题所在的$ watch句子。

html文件：

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

Answer 1

我猜这个问题与this有关，而不是指你在监视回调中的想法。如果您尝试将this绑定到变量，它是否有效？

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

Answer 2

这种方式有效：

'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配置错误angularjs

2 个答案: