zoukankan      html  css  js  c++  java
  • angularJs 页面筛选标签小功能

    页面html:

    <div class="bar bar-calm bar-header">
        <div class="title">新闻分类</div>
        <button class="button button-balanced cleanbtn" ng-click="clean()">清空</button>
      </div>
      <ion-content class="content" scroll="false">
        <ul class="filter-item">
          <li>
            <p>国家地区:</p>
            <ul>
              <li ng-repeat="RegionsName in category.Regions" ng-click="onClick(RegionsName.name,RegionsName.checked)">
                <input type="checkbox" value="RegionsName.name" ng-checked="RegionsName.checked"/>
                <span>{{RegionsName.cn}}</span>
              </li>
            </ul>
          </li>
          <li>
            <p>资本:</p>
            <ul>
              <li ng-repeat="CapitalsName in category.Capitals" 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>领域:</p>
            <ul>
              <li ng-repeat="ScopesName in category.Scopes" ng-click="onClick(ScopesName.name,ScopesName.checked)">
                <input type="checkbox" value="ScopesName.name" ng-checked="ScopesName.checked"/>
                <span>{{ScopesName.cn}}</span>
              </li>
            </ul>
          </li>
          <li>
            <p>经济资料:</p>
            <ul>
              <li ng-repeat="EconomicData in category.EconomicData" 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>中央银行数据:</p>
            <ul>
              <li ng-repeat="CentralBank in category.CentralBank" ng-click="onClick(CentralBank.name,CentralBank.checked)">
                <input type="checkbox" value="CentralBank.name" ng-checked="CentralBank.checked"/>
                <span>{{CentralBank.cn}}</span>
              </li>
            </ul>
          </li>
        </ul>
        <button class="button button-calm confirmbtn" ng-click="infosRef()">确认</button>
    

    页面构建:  总共分为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<Item.length;i++){
              var sameName=EachList(Item[i]);
              //因为整个方法会执行两遍,暂未找出原因,所以加入是否重复的判断
              if($scope.categories.indexOf(sameName.name)<0){
                $scope.categories.push(sameName.name);
              }
            }
          };
          init();
    
          //筛选分类数组(用户点击标签后,传入点击的标签名称和是否在选中状态,如果在就将要传出数组中的同名标签名称移除,如果没选中就加入 这个要传出的数组中)
          $scope.onClick=(filterItem,check)=>{
            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();
          }
        }    
    

      

  • 相关阅读:
    WKWebView和WebView与JS的交互方式
    iOS 同一个workspace下创建多个项目编程
    换个视角来看git命令与代码库发生网络交互报错事件
    java 排序的几篇好文章
    Kafka学习资料
    Linux IO模型(同步异步阻塞非阻塞等)的几篇好文章
    "PECS原则"几篇好文章
    mac定时任务
    如何在idea中调试spring bean
    配置多个 git 账号的 ssh密钥
  • 原文地址:https://www.cnblogs.com/weblv/p/5611197.html
Copyright © 2011-2022 走看看