Introducción de AngularJS
AngularJS es un marco JavaScript. Se puede agregar a las páginas HTML a través de la etiqueta <script>.
AngularJS extiende HTML a través de directivas y une datos a HTML a través de expresiones.
AngularJS es un marco de JavaScript
AngularJS es un marco JavaScript. Es una biblioteca escrita en JavaScript.
AngularJS se publica como un archivo JavaScript y se puede agregar a la página web a través de etiquetas de script:
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script>
Los siguientes son todos para la introducción de la función de etiqueta de filtrado de página AngularJS en este artículo. Consulte la siguiente introducción al contenido clave:
Página html:
<div> <iv> categoría de noticias </div> <botón ng-click = "clean ()"> clare </boton> </div> <ion-content scroll = "false"> <ul> <li> <p> país y región: </p> <ul> <li ng-repeat = "regionsname en la categoría. Regiones" ng-click = "onClick (regionsname.name, regionsname.ecked)"> <input type = "checkbox" value = "regionsname.name" ng-checked = "regionsname.checked"/> <span> {{regionsname.cn}} </span> </li> </ul> </li> <li> <p> Capitales: </p> <ul> <li ng-repeat = "CapitalSname en categoría de categoría" ng-click = "onClick (CapitalSname.name, CapitalsName.Checked)"> <input type = "checkBox" value = "CapitalSname.name" ng-checked = "capitalSname.checked"/> <span> {{CapitalsName.cn}}} </span> </li> </ul> </li> <li> <p> dominio: </p> <ul> <li ng-repeat = "Scopesname en categoría. ng-chick = "onClick (scopesname.name, scopesname.Checked)"> <input type = "checkBox" value = "scopesname.name" ng-checked = "ScopesName.Checked"/> <Span> {{Scopesname.cn}}} </span> </li> </li> </li> </pan> <pan> Información: </p> <ul> <li ng-repeat = "EconomicData en categoría .ConomicData" ng-click = "onClick (EconomicData.Name, EconomicData.Checked)"> <input type = "checkbox" value = "EconomicData.name" ng-checked = "EconomicData.Checked"/> <span> {{EconomicData.cn}} </span> </li> </ul> </li> <li> <p> Datos del banco central: </p> <ul> <li ng-repeat = "CentralBank en categoría. type = "CheckBox" Value = "CentralBank.name" ng-checked = "CentralBank.Checked"/> <span> {{CentralBank.cn}} </span> </li> </ul> </li> </ul> <botón ng-Click = "infoSref ()"> Confirmar </botin>Edificio de la página:
Se divide en 5 elementos principales en total, y las etiquetas de clasificación pequeñas bajo cada elemento principal se generan a través de Repeat.
Análisis de requisitos: el usuario hace clic en cada etiqueta de filtro, agrega el nombre de la etiqueta seleccionado a una matriz y envía la matriz a los programadores de fondo para que los programadores de fondo filtren.
Código JS:
// Clasificación de datos de filtro de noticias (simulación Data) $ scope.category = {regions: [{nombre: "regions_china", cn: "china", verificado: falso}, {nombre: "regions_unitedStates", cn: "us", verificado: fa lse}, {nombre: "regions_unitedkingdom", cn: "uk", versado: falso}, {nombre: "regions_eurozone", cn: "europe", cheched: false}, {nombre: "regions_ja Pan ", cn:" Japón ", verificado: False}, {nombre:" Regions_canada ", CN:" Canadá ", verificado: False}, {nombre:" Regions_australia ", cn:" Australia ", checked: false}, {nombre:" regio: "regio:" regio ns_switzerland ", cn:" switzerland ", cn:" switzerland ", verificado: falso}, {nombre:" regions_others ", cn:" otros ", verificado: falso}], capitales: [{nombre:" Capitals_foreigne xchange ", cn:" forex ", verificado: falso}, {nombre:" capitals_stocks ", cn:" tesorury ", versado: falso}, {nombre:" Capitals_commodities ", cn:" productos ", verificados : falso}, {nombre: "Capitals_BondsBonds", CN: "Brand", Checked: False}], Scopes: [{Nombre: "Scopes_Macroscópico", CN: "General", Checked: FALSE}, {Nombre: "Scopes_In Dustrial ", Cn:" Industrial ", Checked: False}, {Nombre:" Scopes_Company ", CN:" Company ", Checked: False}], EconomicData: [{name:" EconomicData_yes ", CN:" Datos económicos ", versificados: falso}], Central Bank: [{Nombre:" CentralBank_yes ", cn:" CentralBank Bankbank Datos ", verificados: falso}]}; // viaja los datos para encontrar el objeto con el mismo nombre en el nombre entrante (utilizado para averiguar la ubicación del objeto en los datos simulados que el usuario hace clic) var cada samename = category [k] [j]; samename.checked = true; return samename}}}}; // Este método recibe principalmente una matriz al elemento al principio, y verifica la etiqueta que se seleccionó como estado seleccionado al atravesar la matriz y los datos simulados en el inicio init = () => {letra = appSettings.filterinfecoscosorías; para (var i = 0; i <item.length; i ++) {var samename = cada uno (item [i]); // Porque todo el método se ejecutará dos veces, la razón aún no se ha encontrado, por lo que el juicio de si se debe agregar repetidamente if ($ scope.categories.indexof (samename.name) <0) {$ scope.categories.push (samename.name);}}}; init (); // filtra la matriz de clasificación (después de que el usuario haga clic en la etiqueta, el nombre de la etiqueta se transmite y si está en el estado seleccionado. Si está en el mismo nombre de la etiqueta en el mismo nombre en la matriz de la matriz a ser excitada. a la matriz se desmayará) $ Scope.OnClick = (FilterItem, check) => {var samename = cada uno de los días i = 0; i <$ scope.categories.length; i ++) {if ($ scope.categories [i] === filterItem) {$ scope.categories.splice (i, 1);}}}}; // Confirma el botón $ scope.infosRef = () => {$ scope.onCategoryChange (); $ scope.modal.hide ();}; // clare $ scope.clean = () => {let che = $ ("entrada: chequeado"); // Esto no se puede borrar asignando el valor a [], y el exterior ha sido copiado y referenciado. $ scope.categories.length = 0; che.each (function (k, filtreInput) {filterInput.ecked = false;}); $ scope.infosref ();}}Lo anterior es la pequeña función de las etiquetas de filtrado de la página AngularJS introducidas por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!