美文网首页
angularjs 模糊查询

angularjs 模糊查询

作者: 落叶de故事 | 来源:发表于2018-03-07 15:47 被阅读0次

    接了一个需求,通过angularjs增加一个检索栏,检索数组并在列表中显示返回后的结果,代码:
    html代码:

    <ion-content>
      <div class="bar bar-header item-input-inset">
        <label class="item-input-wrapper" style="margin-right:16px">
          <i class="icon ion-ios-search-strong placeholder-icon"></i>
          <input id="search" type="search" placeholder="搜索" ng-model="searchCont.key" ng-change="search()">
        </label>
      </div>
    <div class="list lr-list-radio">
      <lr-ion-radio ng-repeat="user in userlist" class="lrdadadad" ng-value="user.userId" ng-model="selectValue" ng-change="flowUserChange(user)">
        <div class="royal-bg bgcolor_a">{{ user.realName }}</div>
      </lr-ion-radio>
    </div>
    </ion-content>
    

    js代码:

    /*搜索开始*/
    $scope.user = $scope.userlist;//待搜索数组
    $scope.searchCont = {};//搜索内容
    $scope.searchName = [];//搜索后页面遍历显示的数组  
    $scope.search = function () {
      $scope.searchName = []; //每次搜索先清空数组内容  
      var searchValue = document.getElementById('search').value;
      for (var i = 0; i < $scope.user.length; i++) {
        if ($scope.user[i].realName.indexOf(searchValue) >= 0) {
          $scope.searchName.push($scope.user[i]);
        }
      }
      if (!searchValue) {
        $scope.userlist = $scope.user;
      } else {
        $scope.userlist = $scope.searchName;
      }
    };
    /*搜索结束*/
    

    相关文章

      网友评论

          本文标题:angularjs 模糊查询

          本文链接:https://www.haomeiwen.com/subject/rsvjfftx.html