Eu aprendi sobre o uso do AngularJS antes, então simplesmente escreverei um pequeno programa para implementar as funções da filtragem e classificação de consultas.
Você pode aprender com este programa:
1 filtro AngularJS
2 Como usar o NG-REPEAT
3. Uso de controladores
4 Ligação de dados
Análise de programação
Primeiro, se você deseja consultar os filtros primeiro, precisará usar o filtro de filtro no AngularJS.
Use o caractere de comando do pipeline | diretamente após a expressão e siga o seguinte método de escrita para obter um efeito de filtragem:
{{PESSONS | filtro: consulta}}
Ao usar o filtro para implementar a filtragem, a consulta é a sequência inserida ao consultar a filtragem.
Da mesma forma, a função de classificação pode ser alcançada usando Orderby:
{{PESSONS | filtro: consulta | Ordemby: Order}}
A consulta e a classificação acima envolvem duas variáveis, consulta e ordem. Aqui você pode usar diretamente o modelo NG para implementar a ligação de dados:
Pesquise: <input ng-model = "query"> classificar por: <selecione ng-model = "order"> <opção value = "name"> name </pption> <opção value = "idade"> idade </pption> </leclect>
O AngularJS é um idioma da estrutura baseado em DOM; portanto, não há necessidade de implementar ouvintes e gatilhos de eventos. Quando qualquer alteração na caixa de entrada onde a consulta está localizada, a caixa de entrada e a expressão a seguir serão acionadas para atualizar a caixa de entrada e a seguinte expressão!
Comparado com algumas outras estruturas, ela é adicionada ao DOM através do nó DOM INNERHTML com base em seqüências de caracteres. A implementação do AngularJS acelera a exibição de modelos e vistas. Também reduz a escrita de códigos como ouvintes e gatilhos desnecessários, e realmente atinge efeitos parecidos com a mola ~
A apresentação dos dados pode ser alcançada através de NG-repetição. Quando a página da web analisar para NG-REPEAT, uma tag será clonada para cada elemento na matriz para compilação e análise.
<ul> <li ng-repeat = "Pessoa em Pessoas | Filtro: Query | OrderBy: Order"> {{Person.name}} {{Person.age}} </li> </ul>O restante do trabalho é inicializar a matriz de perons no script:
<div ng-controller="ctl"> ... </div> <script type="text/javascript"> function ctl($scope){ $scope.persons = [ {"name":"xingoo","age":25}, {"name":"zhangsan","age":18}, {"name":"lisi","age":20}, {"Nome": "Wangwu", "Age": 30}]; $ scope.order = "idade"; } </script>Código e resultados
Finalmente, todos os códigos são publicados:
<! doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script suncurs) </head> <body> <div ng-controller = "ctl"> pesquisa: <input ng-model = "query"> classificar por: <select ng-model = "order"> <opção value = "name"> name </option> </option value = "idade"> idade </option> </leclect> <li> filmer> {{person.name}} {{person.age}} </li> </ul> </div> <script type="text/javascript"> function ctl($scope){ $scope.persons = [ {"name":"xingoo","age":25}, {"name":"zhangsan","age":18}, {"Nome": "Lisi", "Age": 20}, {"Name": "Wangwu", "Age": 30}]; $ scope.order = "idade"; } </script> </body> </html>Use resultados:
Por padrão, use a idade para classificar:
Ao selecionar, você pode usar o tipo de nome
Ao inserir caracteres, algumas opções serão filtradas automaticamente através da consulta.
O exposto acima são as informações de classificação e classificação do AngularJs. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!