AngularJs页面筛选标签小功能

标签:业务范围    日期:2019-01-28 15:33    录入:美娱国际平台注册    浏览:

  

[angularjs,筛选]AngularJs页面筛选标签小功能

  

AngularJS 简介  

  

AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。

  

  

AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。

  

  

AngularJS 是一个 JavaScript 框架  

  

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

  

  

AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:  

  
  
  
  
  

下面都是为本文介绍angularjs页面筛选标签功能做铺垫的,重点内容请看下面介绍:  

  

页面html:  
  

  
  
  
  
新闻分类
    
    
      
  •   

    国家地区:

      
        
    •     {{RegionsName.cn}}  
    •   
      
  •   
  •   

    资本:

      
        
    •     {{CapitalsName.cn}}  
    •   
      
  •   
  •   

    领域:

      
        
    •     {{ScopesName.cn}}  
    •   
      
  •   
  •   

    经济资料:

      
        
    •     {{EconomicData.cn}}  
    •   
      
  •   
  •   

    中央银行数据:

      
        
    •     {{CentralBank.cn}}  
    •   
      
  •   
  
  
  

页面构建:  

  

总共分为5个大项,通过ng-repeat生成每个大项下的小分类标签。

  
  

  

需求分析:用户点击每一个筛选标签,将其所选的标签名称加入一个数组中,并将该数组发送到后台供后台程序员筛选。

  
  

  

js代码:  

  
  
  //新闻筛选数据分类(模拟数据)  $scope.category={  Regions:[{name:"Regions_China",cn:"中国",checked:false},{name:"Regions_UnitedStates",cn:"美国",checked:false},{name:"Regions_UnitedKingdom",cn:"英国",checked:false},{name:"Regions_Eurozone",cn:"欧洲",checked:false},{name:"Regions_Japan",cn:"日本",checked:false},{name:"Regions_Canada",cn:"加拿大",checked:false},{name:"Regions_Australia",cn:"澳大利亚",checked:false},{name:"Regions_Switzerland",cn:"瑞士",checked:false},{name:"Regions_Others",cn:"其他",checked:false}],  Capitals:[{name:"Capitals_ForeignExchange",cn:"外汇",checked:false},{name:"Capitals_Stocks",cn:"公债",checked:false},{name:"Capitals_Commodities",cn:"商品",checked:false},{name:"Capitals_BondsBonds",cn:"品牌",checked:false}],  Scopes:[{name:"Scopes_Macroscopic",cn:"整体",checked:false},{name:"Scopes_Industrial",cn:"工业",checked:false},{name:"Scopes_Company",cn:"公司",checked:false}],  EconomicData:[{name:"EconomicData_Yes",cn:"经济资料",checked:false}],  CentralBank:[{name:"CentralBank_Yes",cn:"中央银行数据",checked:false}]  };  //遍历数据查找传入name下同名的对象(用来找出用户点击的那个在模拟数据中的对象位置)  var EachList=(name)=>{  let category=$scope.category;  for( var k in category){  for(var j in category[k]){  if(category[k][j].name==name){  var sameName=category[k][j];  sameName.checked=true;  return sameName  }  }  }  };  //该方法主要是在页面一开始会接收一个数组给Item,通过遍历这个数组和模拟数据来勾选一开始就为选中状态的标签  let init=()=>{  let Item=appSettings.filterInfosCategories;  for(var i=0;i{  var sameName=EachList(filterItem);  if(!check){  sameName.checked=true;  $scope.categories.push(filterItem);  }else{  sameName.checked=false;  for(var 美娱国际注册 i=0;i<$scope.categories.length;i++){  if($scope.categories[i]===filterItem){  $scope.categories.splice(i,1);  }  }  }  };  //确认按钮  $scope.infosRef = () => {  $scope.onCategoryChange();  $scope.modal.hide();  };  //清空  $scope.clean=() => {  let che=$("input:checked");  //这里不能通过赋值为[]来清除,外面已经被复制引用。

  $scope.categories.length=0;  che.each(function(k,filterInput){  filterInput.checked=false;  });  $scope.infosRef();  }  }

  
  

  

★★★小编:美娱国际 整理文章,欢迎大家转载 ★★★
上一篇:在js中做数字字符串补0(js补零)
下一篇:没有了
相关文章阅读