将多个ng模型绑定到单个HTML元素

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

这里是我的角度代码：

<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":""}]

来源

2014-02-27 deepseas

Deepseas你好，请你给我们一个什么样的从“HTTPS取回的样本：// url_local /时间/ timesheet_json.php'来帮助我回答你的问题？ – Charlesthk

嗨，查尔斯，我编辑了我的问题来添加JSON响应。谢谢回复。 – deepseas

你必须与你的代码的几个问题，我可以看到。主要的一点是绑定应该基于“查询”来突出显示。请参阅以下内容：

<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标签
简化控制器并加入假（样本）数据的一个明显例子

来源

2014-02-27 17:55:34

感谢您的回答和建议。正确的目标。 – deepseas

将多个ng模型绑定到单个HTML元素

回答

相关问题