2015-02-23 7 views
0

Я хочу отобразить некоторые элементы в нескольких строках. Пользователь может выбрать отображение 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> 

файл расслоение плотной:

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

ответ

1

Я предполагаю, что проблема связана с this не ссылаясь на то, что вы думаете, он делает в часы обратного вызова. Если вы попытаетесь связать this с переменной, это сработает?

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

Неа. Возможно, вы правы, но ошибка была раньше. Я получаю это в $ watch line: TypeError: undefined не является функцией при новом (app7c.js: 32) – user2670996

+0

Хорошо, проблема может быть в этом случае с часами $. Я использовал только $ scope. $ Watch (...), может быть, это. $ Watch не работает, поскольку $ watch - это функция в $ scope. Я не уверен в этом, но только другое предположение :) –

+0

Вы можете увидеть этот вопрос: http://stackoverflow.com/questions/24078535/angularjs-controller-as-syntax-and-watch –

0

Таким образом, он работает:

'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); 
    }); 
Смежные вопросы