水平滾動到基於在angularjs中搜索的動態列

在表中，我有多個動態列與水平滾動條。我需要實現的搜索功能是用戶搜索列名或列數據。如果列名和數據存在，那麼我的滾動條應滾動到特定列。水平滾動到基於在angularjs中搜索的動態列

我試圖實現這一點，但無法弄清楚，我不能使用這個小功能的任何第三方庫或工具。

作爲參考，我已經看到谷歌瀏覽器具有這樣的功能，如果我通過瀏覽器搜索搜索它直接指向特定的列。我想要這樣的東西，但不是瀏覽器搜索或任何第三方工具。

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的功能，這樣做。這裏有一個JSFiddle

1）定義一個容器元素，其中滾動事項將於

2）找到目標元素，然後滾動到它。

在控制器

$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()); 
    } 

}

注意：如果你想匹配是局部的，使用

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

然後，在你的HTML：

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

，並添加id來以正確定位它

<form id='myform'>

終於$scope.filter變量添加到您的控制器

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

來源

2017-10-17 01:50:36

由於它有助於找出解決方案。 –

水平滾動到基於在angularjs中搜索的動態列

回答

相關問題