Question

我是AngularJs的新手。我需要创建一个可以应用于表的每一列的指令。指令应根据用户的输入过滤掉该特定列。

将有与列名对应的按钮。当用户点击按钮时，将出现一个输入框，用户将输入他的搜索。根据搜索结果，表格应该被过滤掉。

这样的东西

Answer 1

当用户在输入文本框中输入时，您可以使用Javascript过滤器功能来获取触发器。

filteredList = this.listToFIlter.filter(function (el) {
            return el.name.toLowerCase().indexOf(valueToMatch) >= 0;
        }));

Answer 2

我写了一个类似于其他答案的自定义函数。这是仅在显示名称上过滤的工作插件：

<!DOCTYPE html>

<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script>
  var app=angular.module("app",[]);
app.controller('userCtrl', ['$scope', function ($scope) {
  $scope.notebooks = [
          {
            name: "eventTime",
            displayName: "Event Time",
            type: "date"
          },
          {
            name: "eventName",
            displayName: "Event Name",
            type: "string"
          },
          {
            name: "eventId",
            displayName: "Event Id",
            type: "number"
          },
          {
            name: "contactPerson",
            displayName: "Person",
            type: "string"
          },
          {
            name: "eventPlace",
            displayName: "Event Place",
            type: "string"
          }
        ];

        $scope.customFilter = function(element){
          console.log(element);
          if(!$scope.filterDisplay){
            return true;
          }

          if(element.displayName.toLowerCase().includes($scope.filterDisplay.toLowerCase(), 0)){
            return true;
          }
          else{
            return false;
          }
        }

}]);

</script>

</head>

<body ng-controller="userCtrl">
    <table>
            <tr>
                <td><label>Only Display Name Filter:</label><input type="text" ng-model="filterDisplay" ></td>
            </tr>
            <tr>
                <th>Name</th>
                <th>Display Name</th>
            </tr>
            <tr ng-repeat="notebook in notebooks | filter:customFilter">
                <td>{{notebook.name}}</td>
                <td>{{notebook.displayName}}</td>
            </tr>
        </table>
</body>
</html>

https://plnkr.co/edit/PaiowJgDIM8sLjXZTwAH?p=preview

使用指令在Jira中创建过滤器需要帮助

2 个答案: