Javascript 将多个ng模型绑定到单个HTML元素
我已经创建了这个可以用搜索框过滤的表。我还想突出显示在搜索框中输入的术语。到目前为止，我还可以在不同的输入框中工作。我想我需要将两个ng模型传递到输入框，以便过滤和突出显示匹配项？还是我必须在ng show中通过过滤器？这把小提琴非常相似，但它在列表中起作用。我试过这个例子，但我想它对数组不起作用。请原谅任何新手的错误 这是我的角度代码：Javascript 将多个ng模型绑定到单个HTML元素,javascript,html,angularjs,Javascript,Html,Angularjs,我已经创建了这个可以用搜索框过滤的表。我还想突出显示在搜索框中输入的术语。到目前为止，我还可以在不同的输入框中工作。我想我需要将两个ng模型传递到输入框，以便过滤和突出显示匹配项？还是我必须在ng show中通过过滤器？这把小提琴非常相似，但它在列表中起作用。我试过这个例子，但我想它对数组不起作用。请原谅任何新手的错误 这是我的角度代码： <script> var app = angular.module('myApp',['ngSanitize']).filter('highlig
<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":""}]
var app=angular.module（'myApp'，['ngSanitize']）。过滤器（'highlight'，函数（）{
返回函数（文本、搜索、区分大小写）{
if（搜索| | angular.isNumber（搜索））{
text=text.toString（）；
search=search.toString（）；
如果（区分大小写）{
返回text.split（search）.join（“”+search+“”）；
}否则{
返回text.replace（新的RegExp（搜索，'gi'），'$&'）；
}
}否则{
返回文本；
}
};
});
app.controller（'MainCtrl'，函数（$scope，$http）{
$scope.orderByField='Activity_ID'；
$scope.reverseSort=false；
$scope.items=[]；//删除未定义的长度错误
$scope.loadPeople=function（）{
var httpRequest=$http({
方法：“GET”，
网址：'https://url_local/time/timesheet_json.php'
}).成功（功能（数据、状态）{
$scope.items=数据；
log（$scope.items）；
});
};
$scope.loadPeople（）；
});
//删除了突出显示特定部分的代码
{{item.Activity_Matrix_ID}
{{item.Activity_ID}
{{item.Activity_Date}
{{item.Activity_Category}
{{item.Activity_Hours}
{{item.Activity_Project}}
{{item.Activity_Description}
JSON回复：[{“活动矩阵ID”：“163”，“活动ID”：“131”，“活动ID”：“2062-02-16”，“活动类别”：“维护”，“活动项目”：“所有项目”，“活动描述”：“JSON数据”，“活动时间”：“2”}，{“活动矩阵ID”：“161”，“活动ID”：“129”，“活动日期”：“2044-02-25”，“活动类别”：“技术支持”，“活动项目”：“所有项目”、“活动描述”：“虚拟”、“活动时间”：“}]
<td ng-bind-html="item.Activity_ID | highlight:query"></td>
- angular的较新版本要求从单独的库中包含“ngSanitize”
- 为“ui匹配”添加了一个css样式，该样式不在您的问题或示例中
- 清理了html，因为您使用的是“ng bind html”，所以您不需要td标记中的任何内容
- 简化控制器并添加虚假（示例）数据，以获得清晰的示例