Nesta etapa, você adicionará um recurso que permite aos usuários controlar o pedido em que a lista de telefones é exibida. A classificação dinâmica pode ser implementada dessa maneira, adicionando uma nova propriedade de modelo, integrando -a ao iterador e permitindo que a ligação de dados faça o resto.
Reinicie o diretório de trabalho:
checkout git -f etapa -4
Você deve descobrir que, além da caixa de pesquisa, seu aplicativo possui um menu de baixo para baixo que permite controlar o pedido do acordo de telefone.
As diferenças mais importantes entre a Etapa 3 e a Etapa 4 estão listadas abaixo. Você pode ver a completa diferença no Github.
modelo
app/index.html
Pesquise: <input ng-model = "consulta"> classificar por: <select ng-model = "orderprop"> <opção value = "name"> alfabético </pption> <option value = "idade"> mais recente </pption> </leclect> <ul> <li ng-repeat = "telefone em telefones | Filter: query | ordery: oderdy> <ul> <li ng-repeat =" em telefones | filtro: query | <p> {{Phone.snippet}} </p> </li> </ul>Fizemos as seguintes alterações no index.html:
Primeiro, adicionamos uma tag <select> chamada OrderProp para que nossos usuários possam escolher os dois métodos de classificação que fornecemos.
Em seguida, adicione um filtro OrderBy após o filtro para processar os dados que entram no iterador. O filtro Orderby pega uma matriz como entrada, copia uma cópia e reordesia a cópia e a produz para o iterador.
O AngularJS cria uma ligação bidirecional entre o elemento de seleção e o modelo OrderProp. Em seguida, o OrderProp será usado como entrada para o filtro Orderby.
Como dissemos quando discutimos a ligação de dados e os iteradores na etapa 3, não importa quando o modelo de dados altera (como o usuário seleciona uma ordem diferente no menu suspenso), a ligação dos dados do AngularJS atualizará automaticamente a exibição. Sem operação desajeitada do DOM!
Controlador
app/js/controllers.js:
função phoneListctrl ($ scope) {$ scope.phones = [{"name": "nexus s", "snippet": "rápido acabou de ficar mais rápido com o nexus s.", "idade": 0}, {"name": "next generration shoom ™ com wi-fi", "sinppet": "thext, next, next, next, next, next, nexting, next) e", "," name "," name ":" Nome ":" next) e ",", "nomes," nomes "," name "," next) e ",", "nomes", "nomes", "Nome": "Nome": Next). "Motorola Xoom ™", "Snippet": "O próximo tablet da próxima geração.", "Age": 2}]; $ scope.OrderProp = 'Age';}Modificamos o modelo de telefones - a matriz de telefones celulares - adicionando um atributo de idade a cada registro de telefone celular. Vamos classificar os telefones de acordo com o atributo de idade.
Adicionamos uma linha ao código do controlador para tornar o valor padrão do OrderProp ser idade. Se não definirmos o valor padrão, esse modelo permanecerá não inicializado até que nossos usuários selecionem um pedido no menu suspenso.
Agora devemos falar sobre a ligação de dados bidirecional. Observe que quando o aplicativo está carregando no navegador, "mais novo" é selecionado no menu suspenso. Isso ocorre porque definimos o OrderProp para a 'idade' no controlador. Portanto, a ligação funciona na direção do nosso modelo para a interface do usuário - ou seja, a ligação dos dados do modelo à visualização. Agora, quando você selecionar "Alfabeticamente" no menu suspenso, o modelo de dados será atualizado ao mesmo tempo e a matriz da lista de telefones será reordenada. No momento, a ligação de dados entra em vigor de outra direção - ou seja, a ligação dos dados da visualização ao modelo.
teste
As alterações que fazemos podem ser verificadas por um teste de unidade ou um teste de ponta a ponta. Vamos primeiro olhar para os testes de unidade:
teste/unidade/controllerspec.js:
Descreva ('Phonecat Controllers', function () {descreve ('PhoneListctrl', function () {var scope, ctrl; antes each (function () {scope = {}, ctrl = new PhoNElistctrl (scope);}; ('deve criar "modelos" com 3 fones', function (function);}; });Testes de unidade agora verifique se o valor padrão está definido corretamente.
Usamos a interface de Jasmine para extrair o controlador PhoneListCtrl para um bloco antes dos cada um, que será compartilhado por todos os testes em todos os blocos pais descritos.
Execute esses testes de unidade, como antes, execute o script ./scripts/test.sh e você deve ver a seguinte saída (Nota: Você precisa abrir http: // localhost: 9876 no seu navegador e insira o modo rigoroso antes que o teste seja executado!):
Chrome: Redefinição do corredor ... Total 2 testes (aprovados: 2; falha: 0; erros: 0) (3,00 ms) Chrome 19.0.1084.36 Mac OS: Execute 2 testes (aprovado: 2; falha: 0; erros 0) (3,00 ms)
Agora voltamos nossa atenção para os testes de ponta a ponta.
teste/e2e/cenarios.js:
... ele ('deve ser possível controlar o pedido de telefone através da caixa suspensa selecionar', function () {// Vamos restabelecer o conjunto de dados para fazer as afirmações de teste inputs mais curtas ('consulta'. XOOM/U2122 "]); SELECT ('OrderProp'). Opção ('Alfabético'); Espere (Repeater ('. Telefones Li', 'Lista de telefone'). Column ('Phone.name')).O teste de ponta a ponta verifica se o mecanismo de classificação da caixa de opções está correto.
Agora você pode atualizar seu navegador e executar o teste de ponta a ponta novamente, ou pode executá-lo no servidor AngularJS.
prática
No controlador PhoneListctrl, exclua a configuração do OrderProp de instrução e você verá que o AngularJS adicionará temporariamente uma opção em branco no menu suspenso, e a ordem de classificação é o tipo padrão (ou seja, não classificado).
Adicione um `{{OrderProp}} ligação ao modelo index.html para exibir seu valor em tempo real.
Resumir
Agora você forneceu funcionalidade de pesquisa para o seu aplicativo e o testou na íntegra. Etapa 5 Vamos aprender sobre os serviços do AngularJS e como o AngularJS usa a injeção de dependência.
O exposto acima é uma compilação das informações para a ligação bidirecional do AngularJS. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!