#angularjs #ng-class
#angularjs #ng-класс
Вопрос:
Здравствуйте, я хочу создать простую таблицу поиска данных. Я хочу подчеркнуть, соответствуют ли данные вводимому пользователем типу. Я сделал это с помощью документа ниже, так как я начинаю использовать angular, интересно, есть ли лучший способ? Может быть, какой-то пользовательский фильтр?
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html ng-app="myApp">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<style type="text/css">
table td{
padding: 5px;
}
.true{
color: green;
background-color: blue;
}
</style>
</head>
<body>
<div ng-controller="filtrController">
<div>{{search}}<hr/></div>
<input type="text" ng-model="search"/>
<table>
<thead>
<tr>
<td>Name:</td>
<td>Param1:</td>
<td>Param2:</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="foo in data | filter:search">
<!--<td ng-class="{true:'true',false:''}[search === foo.Name]">{{foo.Name}}</td>-->
<td ng-class="customFilter(search,foo.Name)">{{foo.Name}}</td>
<td ng-class="customFilter(search,foo.param1)">{{foo.param1}}</td>
<td ng-class="customFilter(search,foo.param2)">{{foo.param2}}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.controller('filtrController',function ($scope)
{
$scope.customFilter = function(search,searchTo)
{
if(search != '')
{
if(searchTo.indexOf(search) > -1) return 'true';
return '';
}
};
$scope.data =
[
{
Name:'name foo1',
param1:'param of foo1',
param2:'param 2 of foo1'
},
{
Name:'name foo2',
param1:'param of foo2',
param2:'param 2 of foo2'
},
{
Name:'name sfoo3',
param1:'param of foo3',
param2:'param 2 of foo3'
},
]
});
</script>
</body>
Ответ №1:
Вам просто нужно настроить такой фильтр:
$scope.customFilter = function(data, searchFor) {
if (angular.isUndefined(data) || angular.isUndefined(searchFor)) return data;
angular.forEach(data, function(item) {
if(angular.equals(item, searchFor)) item.highlighted = true;
});
return data;
}
и html, подобный этому
<tr ng-repeat="foo in data | customFilter:{something:1}" ng-class="{highlighted: foo.highlighted}">
Обновить:
Итак, мне просто нужно объяснить мой подход более подробно. У вас есть данные, некоторые из которых необходимо выделить. Итак, вам нужно установить новое свойство в ваших данных и выделить его (используя css и ng-class), если для свойства установлено значение true. Для настройки этого свойства вы можете создать пользовательский фильтр, который принимает ваш массив данных, изменяет его внутреннее состояние, задав это свойство, и возвращает этот массив в качестве результата. Это то, что я реализовал для вас.
Обновление # 2
Требуется то же поведение, что и для ng-filter. Итак, вот оно.
Комментарии:
1. это фильтр? или просто функция? Я пытаюсь сделать свой собственный фильтр, но все равно не знаю, как это сделать, какая-нибудь помощь? var myAppFilters = angular.module(‘myAppFilters’,[]) .filter(‘CustomFilter’,функция() { возвращает функцию (ввод, поиск) { ……… возвращаемый ввод; }; }) ;
2. Та же история с пользовательским фильтром. Переместите мой код туда, и он будет доступен не только в этом контроллере, но и во всем приложении. Все та же история. И все же я исправлю одну вероятную ошибку.
3. Я попробую thx. Тем не менее, я запускаю свой собственный фильтр, суть которого в том, чтобы изменить элемент, соответствующий битовому коду. Я могу утешить. запишите результат, но я не знаю, как передать его в массив, можете ли вы помочь в этом? код находится в следующем комментарии…
4. [код]angular.module(‘highModule’,[]) .filter(‘high’,функция() { returnfunction(ввод, поиск данных) { varfiltered=[]; angular.forEach(ввод, функция (ввод) {varres=[]; res=angular.forEach(ввод,функция (ввод) { //console.log(ввод); if(input.indexOf(поиск данных)>-1) { console.log(«<span> ввод «</span>); } }) //console.log(res); filtered.push(res); });возвращаемый фильтр; } });[/code]
5. Пожалуйста, прочтите мой ответ еще раз. Я сообщу вам об этом прямо сейчас.