AngularJS Introdução
AngularJS é uma estrutura JavaScript. Ele pode ser adicionado às páginas HTML através da tag <Script>.
AngularJS estende HTML através de diretrizes e vincula dados ao HTML por meio de expressões.
AngularJS é uma estrutura JavaScript
AngularJS é uma estrutura JavaScript. É uma biblioteca escrita em JavaScript.
AngularJS é publicado como um arquivo JavaScript e pode ser adicionado à página da web através de tags de script:
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </sCript>
A seguir, é apresentada a introdução da função de tag de filtragem de página do AngularJS neste artigo. Consulte a seguinte introdução ao conteúdo principal:
Página html:
<div> <div> Categoria de notícias </div> <button ng-click = "clean ()"> claro </butut> </div> <ion-content scroll = "false"> <ul> <li> <p> país e região: </p> ng-click = "OnClick (regionName.name, regionName.Checked)"> <input type = "Caixa de seleção" value = "regionName.name" ng-checked = "regionname.checked"/> <pan> {{regionname.cn}} </span> </li> </ul> </li> <li> <p> capitals: </p> ng-click = "OnClick (capitalsname.name, capitalsname.checked)"> <input type = "caixa de seleção" value = "capitalsname.name" ng-checked = "capitalsname.checked"/> <pan> {{capitalsname.cn}} </span> </li> </ul> </li> <li> <p> Domínio: </p> <ul> <li ng-repeat = "ScopeSname na categoria.Scopes". ng-click = "OnClick (scopesname.name, scopesname.checked)"> <input type = "caixa de seleção" value = "scopesname.name" ng-checked = "scopesname.checked"/> <pan> {{scopeesname.cn} </span> Informação: </p> <ul> <li ng-repeat = "EconomicData na categoria.economicdata" ng-click = "OnClick (EconomicData.name, EconomicData.Checked)"> <Tipo de entrada = "Caixa de seleção" Valor = "EconomicData.name" ng-checked = "EconomicData.Checked"/> <pan> {{EconomicData.cn}} </span> </li> </ul> </li> <li> <p> Dados do banco central: </p> ng-click = "OnClick (centralbank.name, centralbank.checked)"> <input type = "caixa de seleção" value = "centralbank.name" ng-checked = "centralbank.checked"/> </span> {{Centralbank.cn}/span> </li> </lum> ng-click = "InfosRef ()"> Confirmar </botão>Página Edifício:
Ele é dividido em 5 itens principais no total, e pequenas tags de classificação em cada item principal são geradas através da repetição de NG.
Análise de requisitos: o usuário clica em cada tag de filtro, adiciona o nome da tag selecionado a uma matriz e envia a matriz ao plano de fundo para que os programadores de fundo filtrem.
Código JS:
// Classificação de dados do filtro de notícias (simulação Dados) $ scope.category = {regiões: [{name: "region_china", cn: "China", verificado: false}, {name: "region_unitedstates", cn: "nós", verificado: fa lse}, {name: "region_unitedkingdom", cn: "uk", verificado: false}, {name: "region_eurozone", cn: "Europe", verificado: false}, {name: "regiões_ja Pan ", cn:" Japão ", verificado: false}, {name:" region_canada ", cn:" Canadá ", verificado: false}, {name:" region_australia ", cn:" Austrália ", verificado: false}, {name:" Regio ns_switzerland ", CN:" Suíça ", CN:" Suíça ", verificado: false}, {name:" region_others ", cn:" outros ", verificado: false}], capital: [{name:" capitals_foreigne xchange ", cn:" forex ", verificado: false}, {name:" capitals_stocks ", cn:" tesouraria ", verificado: false}, {name:" capitals_commodities ", cn:" commodities ", verificado : false}, {name: "capitals_bondsbonds", cn: "marca", verificado: false}], escopos: [{name: "scopes_macroscópico", cn: "geral", verificado: false}, {name: "scopes_in Dustrial ", CN:" Industrial ", verificado: false}, {name:" scopes_company ", CN:" Company ", verificado: false}], EconomicData: [{Nome:" EconomicData_yes ", CN:" Dados econômicos ", verificação:"], CentralBank: [{Names "" " Dados ", verificado: false}]}; // viaje os dados para encontrar o objeto com o mesmo nome no nome de entrada (usado para descobrir o local do objeto nos dados simulados que o usuário clica) var e cadalist = (nome) => {let category = $ scope.categy; para (var k na categoria) {para (var j na categoria [k] [k] samename = categoria [k] [j]; samename.checked = true; retorna o samename}}}}; // Esse método recebe principalmente uma matriz no item no início e verifica o rótulo que foi selecionado como o estado selecionado = o aplicativo do APLATION. para (var i = 0; i <item.length; i ++) {var samename = cadalist (item [i]); // porque todo o método será executado duas vezes, o motivo ainda não foi encontrado, o julgamento de se o julgamento é adicionado repetidamente if ($ scope.categories.indexof (samename.name) <0) {$ scope.categories.push (samename.name);}}}; init (); // filtre a matriz de classificação (depois que o usuário clicar na etiqueta, o nome da tag passou e se é o nome do estado. Selecionado, adicione -o à matriz a ser desmaiado) $ SCOPE.ONCLICK = (FILTERIDEM, CHECK) => {var samename = Everlist (filterItem); if (! check) {samename.checked = true.checked; i = 0; i <$ scope.categories.length; i ++) {if ($ scope.categories [i] === filterItem) {$ scope.categories.splice (i, 1);}}}}; // Confirme o botão $ scope.infosref = () => {$ scope.oncategoryChange (); $ scope.modal.hide ();}; // clear $ scope.clean = () => {let Che = $ ("entrada: verificado"); // Isso não pode ser limpo pela atribuição do valor para [], e o exterior foi copiado e indicado. $ scope.categories.length = 0; Che.Each (function (k, filterInput) {filterInput.checked = false;}); $ scope.infosRef ();}}O exposto acima é a pequena função das tags de filtragem de página do AngularJS introduzidas pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!