I'm using Smart table i want to keep matched rows on top of other rows in table using angularjs(1), in my case i have been matching string from table column, on the basis of matched string I'm changing row background color, but i want to show those colored rows on top of the other rows, so that I'm able see matched rows instantly.
it is worked if i sort like below, but it affect only current page, i want display all matched rows to top of other rows irrespective pagination and all.
<tr ng-repeat="emp in employees | orderBy:set_color" ng-style="set_color(emp)"> how i can achieve this. if you want more info please take a look at this link
var myApp = angular.module('myApp', []) .controller('employeeController', function ($scope) { var employees = [{ "Name": "Alfreds Futterkiste", "City": "Berlin", "Country": "Germany" }, { "Name": "Berglunds snabbköp", "City": "Luleå", "Country": "Sweden" }, { "Name": "Blauer See Delikatessen", "City": "Mannheim", "Country": "Germany" }, { "Name": "Blondel père et fils", "City": "Strasbourg", "Country": "France" }, { "Name": "Bólido Comidas preparadas", "City": "Madrid", "Country": "Spain" }, { "Name": "Bon app'", "City": "Marseille", "Country": "France" }, { "Name": "Bottom-Dollar Marketse", "City": "Tsawassen", "Country": "Canada" }, { "Name": "Cactus Comidas para llevar", "City": "Buenos Aires", "Country": "Argentina" }, { "Name": "Centro comercial Moctezuma", "City": "México D.F.", "Country": "Mexico" }, { "Name": "Chop-suey Chinese", "City": "Bern", "Country": "Switzerland" }, { "Name": "Comércio Mineiro", "City": "São Paulo", "Country": "Brazil" }]; $scope.employees=employees; $scope.set_color = function (emp) { var inputString = emp.Country; for (i = 0; i < inputString.length; i++) { var findme = "France"; if (inputString.indexOf(findme) > -1) { return { 'background-color': '#FFCCCB' } } } } })<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <body ng-app="myApp"> <div ng-controller="employeeController"> <div class="container" style="margin-top:40px;"> <div class="row"> {{error}} <div class="col-md-6"> <table class="table table-bordered table-condensed"> <thead> <tr> <th>Name</th> <th>City</th> <th>Country</th> </tr> </thead> <tbody > <tr ng-repeat="emp in employees" ng-style="set_color(emp)"> <td>{{emp.Name}}</td> <td>{{emp.City}}</td> <td>{{emp.Country}}</td> </tr> </tbody> </table> </div> </div> </div> </div> </body>Thank you
3 Answers
Answers 1
With AngularJS i believe I would choose this option:
HTML
orderBy can take multiple filters
<tr ng-repeat="emp in employees | orderBy: [sort, 'Name']" ng-class="{'matched': emp.matched }"> JS
var findme = "France"; $scope.sort = (emp) => { emp.matched = emp.Country.indexOf(findme) > -1; return !emp.matched; } See working fiddle:
Answers 2
You could treat the std as a list, and sorting it taking into account the similarities. For example you could do the following:
// This function will return a list with the matching elements first, // and the non matching after. $ordered = function(findme) { var values = Object.values(std); var matching = values.filter(e => e === findme); var notMatching = values.filter(e => e !== findme); return matching.concat(notMatching); } And then in the html you could do the following:
<tbody> <tr ng-repeat="std in students" ng-style="set_color(std)"> <td ng-repeat="x in ordered()">{{x}}</td> </tr> </tbody> I'm more familiar with angular 2, 4 and 5, so forget me if calling a function within the ng-repeat is not allowed. Other solution would be to store that list as a variable.
Hope it helps.
Answers 3
You can do it like this:
HTML
// I used `B` as `std.Name` for example in my code: function matchRowByName() { $.each($('tr[ng-repeat="std in students"'), function() { if ($(this).find('td').first().text() === "B") { $('table').prepend($(this)); $(this).addClass('matched'); } }); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr ng-repeat="std in students" ng-style="set_color(std)"> <td>A</td> <td>a@test.com</td> </tr> <tr ng-repeat="std in students" ng-style="set_color(std)"> <td>B</td> <td>b@test.com</td> </tr> <tr ng-repeat="std in students" ng-style="set_color(std)"> <td>C</td> <td>c@test.com</td> </tr> </table>
0 comments:
Post a Comment