angularjsの検索に基づいて動的列に水平スクロール

テーブルでは、水平スクロールバーを持つ複数の動的列があります。私は検索機能を実装する必要があるのは、列名または列データのユーザー検索でした。列名とデータが存在する場合、スクロールバーは特定の列にスクロールする必要があります。angularjsの検索に基づいて動的列に水平スクロール

私はこれを実装しようとしましたが、理解できず、この小さな機能に対してサードパーティのライブラリやツールを使用することはできませんでした。

参考までに、Google Chromeのブラウザには、ブラウザの検索で特定の列を直接指し示すような機能があります。私はこのようなものを望むが、ブラウザの検索やサードパーティーのツールは望んでいない。

var app = angular.module("myapp", []); 
 
app.controller("ListController", ['$scope', function($scope) { 
 
    $scope.personalDetails = [ 
 
     { 
 
      'fname':'Abc', 
 
      'lname':'Abc', 
 
      'email':'[email protected]', 
 
      'demo': 'xyz.com', 
 
      'Pnumber': '9892XXXXXX', 
 
      'Address': 'XYZ' 
 
     } 
 
     ]; 
 
}]);

.btn-primary{ 
 
    margin-right: 10px; 
 
} 
 
.container,.search{ 
 
    margin: 20px 0; 
 
} 
 

 
form{ 
 
    width: 200px; 
 
    overflow-y: hidden; 
 
    overflow-x: scroll; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myapp" ng-controller="ListController">  
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-8"> 
 
       <div class='search'> 
 
       <input type="search" placeholder="search column" required/> 
 
       </div> 
 
         <form> 
 
          <table class="table table-striped table-bordered"> 
 
           <thead> 
 
            <tr> 
 
             <th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th> 
 
             <th>Firstname</th> 
 
             <th>Lastname</th> 
 
             <th>Email</th> 
 
             <th>demo</th> 
 
             <th>Phone number</th> 
 
             <th>Address</th> 
 
            </tr> 
 
           </thead> 
 
           <tbody> 
 
            <tr ng-repeat="personalDetail in personalDetails"> 
 
             <td> 
 
              <input type="checkbox" ng-model="personalDetail.selected"/></td> 
 
             <td> 
 
              <input type="text" class="form-control" ng-model="personalDetail.fname" required/></td> 
 
             <td> 
 
              <input type="text" class="form-control" ng-model="personalDetail.lname" required/></td> 
 
             <td> 
 
              <input type="email" class="form-control" ng-model="personalDetail.email" required/></td> 
 
              <td> 
 
              <input type="text" class="form-control" ng-model="personalDetail.demo" required/></td> 
 
              <td> 
 
              <input type="text" class="form-control" ng-model="personalDetail.Pnumber" required/></td> 
 
              <td> 
 
              <input type="text" class="form-control" ng-model="personalDetail.Address" required/></td> 
 
            </tr> 
 
           </tbody> 
 
          </table> 
 

 
         </form> 
 
        </div> 
 
       </div> 
 
      </div> 
 
</body>

出典

2017-10-16 Raul_43

あなたは、角度との間で、夫婦jQueryの関数を使用して行うことができます。ここではスクロールが

2場所を取るものとするコンテナ要素は、）あなたのターゲット要素を検索し、それまでスクロール定義）JSFiddle

1です。お使いのコントローラ

$scope.textChanged = function() 
{ 
    var $container = $('#myform'), 
    $scrollTo = $('th').filter(function() { 
    return $(this).text() === $scope.filter;}); 

    if($scrollTo.length > 0) 
    { 
     $container.scrollLeft(
     $scrollTo.offset().left - $container.offset().left + $container.scrollLeft()); 
    } 
    else 
    { 
     $container.scrollLeft(-$container.scrollLeft()); 
    } 

}

注

：

<input type="search" ng-change='textChanged()' ng-model='filter' placeholder="search column" required/>

とにIDを追加します。あなたは試合は、部分的で、あなたのhtmlで、その後

$scrollTo = $('th:contains(' + $scope.filter + ')');

を使用したい場合それを正しく見つけるためのフォーム

<form id='myform'>

最終的にあなたのコントローラには、ソリューションを把握するのに役立ちます

app.controller("ListController", ['$scope', function($scope) { 
    $scope.filter = '';

出典

2017-10-17 01:50:36

感謝を$scope.filter変数を追加します。 –

angularjsの検索に基づいて動的列に水平スクロール

答えて

関連する問題