En este paso, agregará una función que permita a los usuarios controlar el orden en el que se muestra la lista de teléfonos. La clasificación dinámica se puede implementar de esta manera, agregando una nueva propiedad modelo, integrándola con el iterador y luego permitiendo que el enlace de datos realice el resto.
Restablezca el directorio de trabajo:
Git Checkout -F Paso 4
Debe encontrar que, además del cuadro de búsqueda, su aplicación tiene un menú de baja adicional que permite controlar el orden de la disposición del teléfono.
Las diferencias más importantes entre el paso 3 y el paso 4 se enumeran a continuación. Puedes ver la diferencia completa en GitHub.
plantilla
app/index.html
Búsqueda: <input ng-model = "QUIERY"> Sort by: <select ng-model = "ordenprop"> <opción valor = "name"> alfabético </ppection> <opción valor = "edad"> nuevo </option> </select> <ul> <li ng-repeat = "teléfono en teléfonos | filtro: consulta | ordenby: ordenprop"> {{{{{{{{teléfono}}} <p> {{phone.snippet}} </p> </li> </ul>Hicimos los siguientes cambios en index.html:
Primero, agregamos una etiqueta <Select> llamada OrderProp para que nuestros usuarios puedan elegir los dos métodos de clasificación que proporcionamos.
Luego, agregue un filtro OrderBy después del filtro de filtro para procesar los datos que ingresan al iterador. El filtro OrderBy toma una matriz como entrada, copia una copia y reordena la copia y la lleva al iterador.
AngularJS crea una unión de dos vías entre el elemento seleccionado y el modelo OrderProp. Luego, OrderProp se usará como entrada al filtro de Orderby.
Como dijimos cuando discutimos la vinculación de datos e iteradores en el paso 3, sin importar cuándo cambie el modelo de datos (como el usuario selecciona un orden diferente en el menú desplegable), AngularJS Data Binking actualizará automáticamente la vista. ¡No hay operación DOM torpe!
Controlador
app/js/controladores.js:
function PhoneListCtrl($scope) { $scope.phones = [ {"name": "Nexus S", "snippet": "Fast just got faster with Nexus S.", "age": 0}, {"name": "Motorola XOOM™ with Wi-Fi", "snippet": "The Next, Next Generation tablet.", "age": 1}, {"name": "Motorola Xoom ™", "Fragmento": "La siguiente tableta de la próxima generación"., "Age": 2}]; $ scope.orderprop = 'edad';}Modificamos el modelo de teléfonos, la matriz de teléfonos móviles, agregando un atributo de edad a cada registro de teléfonos móviles. Ordenaremos los teléfonos de acuerdo con el atributo de edad.
Agregamos una línea al código del controlador para que el valor predeterminado de OrderProp sea la edad. Si no establecemos el valor predeterminado, este modelo permanecerá no inicializado hasta que nuestros usuarios seleccionen un pedido en el menú desplegable.
Ahora deberíamos hablar sobre el enlace de datos de dos vías. Tenga en cuenta que cuando la aplicación se está cargando en el navegador, "más nuevo" se selecciona en el menú desplegable. Esto se debe a que establecemos OrderProp en la 'edad' en el controlador. Por lo tanto, la vinculación funciona en la dirección de nuestro modelo a la interfaz de usuario, es decir, el enlace de datos del modelo a la vista. Ahora, cuando seleccione "alfabéticamente" en el menú desplegable, el modelo de datos se actualizará al mismo tiempo y se reordenará la matriz de la lista de teléfonos. En este momento, el enlace de datos surta efecto desde otra dirección, es decir, el enlace de datos desde la vista al modelo.
prueba
Los cambios que hacemos pueden verificarse mediante una prueba unitaria o una prueba de extremo a extremo. Primero veamos las pruebas unitarias:
prueba/unidad/controlersspec.js:
Describa ('Controladores Phonecat', function () {Describe ('PhonElistCtrl', function () {var Scope, ctrl; antes que la función (function () {scope = {}, ctrl = new PhoneListCtrl (scope);}); it ('debe crear "teléfonos" modelo con 3 teléfonos', function () {esperanza (scope.l longitud). });Pruebas unitarias ahora verifique que el valor predeterminado se establezca correctamente.
Utilizamos la interfaz de Jasmine para extraer el controlador PhonElSistCTRL en un bloque anterior a Borre.
Ejecute estas pruebas unitarias, al igual que antes, ejecute el script ./scripts/test.sh, y debería ver la siguiente salida (nota: ¡debe abrir http: // localhost: 9876 en su navegador e ingresar el modo estricto antes de que se ejecute la prueba!)::
Chrome: RESET del corredor ... Total 2 pruebas (aprobadas: 2; falla: 0; errores: 0) (3.00 ms) Chrome 19.0.0.1084.36 Mac OS: Ejecutar 2 pruebas (aprobado: 2; falla: 0; errores 0) (3.00 ms)
Ahora dirigimos nuestra atención a las pruebas de extremo a extremo.
prueba/e2e/escenarios.js:
... it('should be possible to control phone order via the drop down select box', function() { //let's narrow the dataset to make the test assertions shorter input('query').enter('tablet'); expect(repeater('.phones li', 'Phone List').column('phone.name')). toEqual(["Motorola XOOM/u2122 with Wi-Fi", "MOTOROLA Xoom/u2122 "]); select ('OrderProp'). Opcion ('Alphabetical'); WIEPT (Repeater ('.Las pruebas de extremo a extremo verifican que el mecanismo de clasificación del cuadro de opción es correcto.
Ahora puede actualizar su navegador y ejecutar la prueba de extremo a extremo nuevamente, o puede ejecutarla en el servidor AngularJS.
práctica
En el controlador PhoneListCTRL, elimine la configuración de la instrucción OrderProp, y verá que AngularJS agregará temporalmente una opción en blanco en el menú desplegable, y el orden de clasificación es el tipo predeterminado (es decir, antihorable).
Agregue una `{{ordenprop}} vinculante a la plantilla index.html para mostrar su valor en tiempo real.
Resumir
Ahora ha proporcionado funcionalidad de búsqueda para su aplicación y la ha probado en su totalidad. Paso 5 Aprenderemos sobre los servicios de AngularJS y cómo AngularJS usa la inyección de dependencia.
Lo anterior es una compilación de la información para la unión de dos vías AngularJS. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio web!