Question

我创建了这个可以使用搜索框过滤的表格。我还想突出显示在搜索框中输入的术语。到目前为止，我没有工作，但在单独的输入框中。它做了一个而不是另一个。我想我需要将两个ng模型传递到输入框以过滤和突出显示匹配的术语？或者我必须在ng-show中传递过滤器吗？这个小提琴http://jsfiddle.net/gion_13/ZDWdH/2/非常相似，但它适用于列表。我尝试了这个例子，但我猜它不适用于数组。请原谅任何新手错误。

这是我的角度代码：

<script>
var app = angular.module('myApp',['ngSanitize']).filter('highlight', function () {
  return function (text, search, caseSensitive) {
    if (search || angular.isNumber(search)) {
      text = text.toString();
      search = search.toString();
      if (caseSensitive) {
        return text.split(search).join('<span class="ui-match">' + search + '</span>');
      } else {
        return text.replace(new RegExp(search, 'gi'), '<span class="ui-match">$&</span>');
      }
    } else {
      return text;
    }
  };
});
app.controller('MainCtrl',function($scope,$http) {

 $scope.orderByField = 'Activity_ID';
  $scope.reverseSort = false;

$scope.items=[];//removes undefined length errors


    $scope.loadPeople = function() {
        var httpRequest = $http({
            method: 'GET',
            url: 'https://url_local/time/timesheet_json.php'

        }).success(function(data, status) {
            $scope.items = data;
            console.log($scope.items);
        });

    };
$scope.loadPeople();
});
</script>

<html>
<input ng-model="query" />
<input ng-model="hightlightText"/> 
//Removed code to highlight specific sections
<tbody>
      <tr ng-repeat="item in items | orderBy:orderByField:reverseSort"    ng-show="([item] | filter:query).length">
        <td ng-bind-html="item.Activity_Matrix_ID | highlight:highlightText">{{item.Activity_Matrix_ID}}</td>
        <td ng-bind-html="item.Activity_ID | highlight:highlightText">{{item.Activity_ID  }}</td>
        <td ng-bind-html="item.Activity_Date | highlight:highlightText">{{item.Activity_Date}}</td>
        <td ng-bind-html="item.Activity_Category | highlight:highlightText">{{item.Activity_Category}}</td>
        <td ng-bind-html="item.Activity_Hours | highlight:highlightText">{{item.Activity_Hours}}</td>
        <td ng-bind-html="item.Activity_Project | highlight:highlightText">{{item.Activity_Project}}</td>
        <td ng-bind-html="item.Activity_Description | highlight:highlightText">{{item.Activity_Description}}</td>
</html>


JSON Response: [{"Activity_Matrix_ID":"163","Activity_ID":"131","Activity_Date":"2062-02-16","Activity_Category":"Maintanence","Activity_Project":"All Projects","Activity_Description":"Json data ","Activity_Hours":"2"},{"Activity_Matrix_ID":"161","Activity_ID":"129","Activity_Date":"2044-02-25","Activity_Category":"Tech Support","Activity_Project":"All Projects","Activity_Description":"Dummy dummy ","Activity_Hours":""}]

Answer 1

我可以看到您的代码存在一些问题。主要的一个，是绑定应该是基于“查询”突出显示。请参阅以下内容：

<td ng-bind-html="item.Activity_ID | highlight:query"></td>

我做了这个改变，以及你可以在这里找到的一个plunkr的其他一些变化：http://plnkr.co/edit/yLYPnjyTpQZqoR1UE6yI?p=preview。祝你好运！

其他更改（在示例中）

较新版本的角度要求“ngSanitize”包含在单独的库中。
为“ui-match”添加了css样式，该样式不在您的问题或示例
清理了html，因为你使用的是“ng-bind-html”，你不需要td标签内的任何东西
简化了控制器并添加了伪造（样本）数据以获得清晰的示例

将多个ng-model绑定到单个HTML元素

1 个答案: