Angularapp1 (9 de 9): category.html

Éste es el código completo:
>>>>>>>>
<div>
<form>
<h1>Items of Category {{currCategory.name}}</h1>
<div ng-repeat=”item in currCategory.items” class=”item”>
<!– no me gusta mucho como he resuelto el tema de mostar rellena esta parte cuando se navega por la app. –>
<!– en el scope que puesto las variables auxiliares ckeckboxValues y selectValues –>
<input type=”checkbox” ng-click=”updateOrder(item.id)” id=”checkbox-{{item.id}}” ng-model=”ckeckboxValues[item.id]“/>
<select ng-change=”updateOrder(item.id)” id=”select-{{item.id}}” ng-model=”dummySelect”><!– el ng-change me obliga a poner un ng-model. No uso ng-click para que no se ejecute solo con clickar en el desplegable –>
<option value=”1″ ng-selected=”selectValues[item.id][1]“>1</option>
<option value=”2″ ng-selected=”selectValues[item.id][2]“>2</option>
<option value=”3″ ng-selected=”selectValues[item.id][3]“>3</option>
</select>
{{item.price}}$
<img ng-src=”img/items/{{item.image}}” width=”100″ height=”100″/> {{item.name}}
</div>
<div>
<button ng-disabled=”model.order.getNumberOfItems() < 1" ng-click="go('/summary')">Checkout</button>
</div>
</div>
>>>>>>>>

Las cosas a destacar de este archivo son:

<input type=”checkbox” ng-click=”updateOrder(item.id)” id=”checkbox-{{item.id}}” ng-model=”ckeckboxValues[item.id]“/>

Con ng-click hacemos que al modificar el checkbox se llame al updateOrder pasando el item id.

Este upddateOrder modifica el model y por tanto se actualiza el resumen del carrito, que en el html está así (en el index.html):

<div>Number of items: {{model.order.getNumberOfItems()}}</div>
<div>Total cost: {{model.order.getTotalCost()}}</div>

Es un ejemplo de data binding. El html coje automáticamente los valores que devuelven esas dos funciones.

El id de checkbox-{{item.id}} lo pongo para luego poder acceder al checkbox con document.getElementById.

La parte más importante aquí es el ng-model=”ckeckboxValues[item.id]“. Esto es el two way data binding. Cuando el usuario marca/desmarca el checkbox, la variable ckeckboxValues[item.id] pasa a ser true/false. Y viceversa, si algún js modifica por programación la variable ckeckboxValues[item.id], el checkbox aparecería marcado o desmarcado en consecuencia, en tiempo real.

Esto evita al programador el código de tener que hacer todo esto “a mano”.
ckeckboxValues es un array asociativo que relleno en el controller.

<select ng-change=”updateOrder(item.id)” id=”select-{{item.id}}” ng-model=”dummySelect”>
<option value=”1″ ng-selected=”selectValues[item.id][1]“>1</option>

Aquí utilizo ng-change en lugar de ng-click porque el ng-click se ejecuta sólo con clickar en el desplegable y no quiero.

El uso de ng-change me ha obligado a poner un ng-model, el cual me ha valido apuntar a una variable tonta que he llamado dummySelect.

El uso de ng-selected hace que la opción esté seleccionada si la variable selectValues[item.id][1] es true. Es otro ejemplo de two way databinding.

Todo esto seguro que se puede hacer mejor pero como he dicho en artículos anteriores sólo he querido hacer un ejemplo básico.

<button ng-disabled=”model.order.getNumberOfItems() < 1″ ng-click=”go(‘/summary’)”>Checkout</button>

El ng-disabled hace que el botón salga desactivado si no hay ningún elemento en el carrito. En cuanto el usuario selecciona un elemento sale activado y se vuelve a desactivar si el usuario quita todos los elementos.