I have a AngularJS application in which I have a table as You can see in the image below,
as you can see the last column contains a delete and and a edit button for every row. How can I highlight row when the corresponding delete button is pressed?
Here is my code: https://plnkr.co/edit/ZNzgVO59eWJSVMH7?preview
var myApp = angular.module('myApp', []);
myApp.constant('Employees',
[{ Name: "Ishan", Code: 1, Is_Intern: "Yes", DateOfJoining: "01/02/2022", Skills: "VB, DOT.NET, Angular", Status: "Working" },
{ Name: "Ashwin", Code: 2, Is_Intern: "No", DateOfJoining: "21/03/2021", Skills: "VB, Ruby, Angular", Status: "Inactive" },
{ Name: "Shailesh", Code: 3, Is_Intern: "Yes", DateOfJoining: "27/04/2021", Skills: "VB, Python, Angular", Status: "Working" },
{ Name: "Pawan", Code: 4, Is_Intern: "No", DateOfJoining: "14/01/2022", Skills: "VB, Sapphire, Angular", Status: "Inactive" }]);
myApp.component('employeeDetail', {
bindings: {
Name: '<',
Code: '<',
Is_Intern: '<',
DateOfJoining: '<',
Skills: '<',
},
controller: 'empCtrl',
});
myApp.controller('empCtrl', function empCtrl($scope, Employees) {
$scope.EmployeeDetails = Employees;
$scope.Name = Employees.Name;
$scope.Code = Employees.Code;
$scope.Is_Intern = Employees.Is_Intern;
$scope.DateOfJoining = Employees.DateOfJoining;
$scope.Skills = Employees.Skills;
$scope.Status = Employees.Status;
$scope.add = function () {
$scope.EmployeeDetails.push({
Name: $scope.Name,
Code: $scope.Code,
Is_Intern: $scope.Is_Intern,
DateOfJoining: $scope.DateOfJoining,
Skills: $scope.Skills,
Status: $scope.Status,
});
$scope.id = '';
$scope.Code = '';
$scope.Is_Intern = '';
$scope.DateOfJoining = '';
$scope.Skills = '';
$scope.Status = '';
};
function select(Name) {
for (let i = 0; i < $scope.EmployeeDetails.length; i++) {
if ($scope.EmployeeDetails[i].Name == Name) {
return i;
}
}
return -1;
};
$scope.edit = function (Name) {
let index = select(Name);
let emp = $scope.EmployeeDetails[index];
$scope.Name = emp.Name;
$scope.Code = emp.Code;
$scope.Is_Intern = emp.Is_Intern;
$scope.DateOfJoining = emp.DateOfJoining;
$scope.Skills = emp.Skills;
$scope.Status = emp.Status;
}
$scope.save = function () {
let index = select($scope.Name);
$scope.EmployeeDetails[index].Name = $scope.Name;
$scope.EmployeeDetails[index].Code = $scope.Code;
$scope.EmployeeDetails[index].Is_Intern = $scope.Is_Intern;
$scope.EmployeeDetails[index].DateOfJoining = $scope.DateOfJoining;
$scope.EmployeeDetails[index].Skills = $scope.Skills;
$scope.EmployeeDetails[index].Status = $scope.Status;
$scope.Name = '';
$scope.Code = '';
$scope.Is_Intern = '';
$scope.DateOfJoining = '';
$scope.Skills = '';
$scope.Status = '';
}
$scope.delete = function (emp) {
if (confirm("Are You Sure You want to delete this record ?")) {
$scope.EmployeeDetails.splice(emp, 1)
alert("Deleted")
}
}
$scope.selectedRow = null;
$scope.setClickedRow = function (index) {
$scope.selectedRow = index;
}
});
table {
border-collapse: collapse;
font-family: Arial;
}
td {
border: 1px solid black;
padding: 5px;
}
th {
border: 1px solid black;
padding: 5px;
text-align: center;
}
label,
input {
display: block;
}
label {
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<body ng-app="myApp" ng-controller="empCtrl">
<table>
<thead>
<th colspan="8">Names of Employees</th>
</thead>
<tbody>
<tr>
<th>Name</th>
<th>Code</th>
<th>Is_Intern</th>
<th>Skills</th>
<th>Status</th>
<th>DateOfJoining</th>
<th colspan="2" style="text-align: center;">Action</th>
</tr>
<tr ng-repeat="emp in EmployeeDetails">
<td>{{emp.Name}}</td>
<td>{{emp.Code}}</td>
<td>{{emp.Is_Intern}}</td>
<td>{{emp.Skills}}</td>
<td>{{emp.Status}}</td>
<td>{{emp.DateOfJoining}}</td>
<td><button ng-click="edit(emp.Name)">Edit</button></td>
<td><button ng-click="delete($index)">Delete</button></td>
</tr>
</tbody>
<label>
Name
<input ng-model="Name" type="text" />
</label>
<label>
Code
<input ng-model="Code" type="number" />
</label>
<label>
Is_Intern
<input ng-model="Is_Intern" type="text" />
</label>
<label>
Skills
<input ng-model="Skills" type="text" />
</label>
<label>
Status
<input ng-model="Status" type="text" />
</label>
<label>
Date Of Joining
<input ng-model="DateOfJoining" type="text" />
</label>
<label>
<button ng-click="add()">Add</button>
</label>
<button ng-click="save()">Update</button><br><br>
</table>
<br>
</body>
This can be achieved by using ng-class in angular js.
Logic.
On delete button click set some flag on the row to indicate that the row is active I used an isActive class.
Then use a ng-class condition, ng-class="{'highlight': emp.isActive == true}".
Since you are making use of a JavaScript confirm method, you have to use a setTimeout function to trigger the confirm dialog. Or else the changes will not be visible in the DOM.
Since you have used setTimeout, you have to use $scope.$apply() to get your changes reflected in the UI.
Working Fiddle.
var myApp = angular.module('myApp', []);
myApp.constant('Employees',
[{ Name: "Ishan", Code: 1, Is_Intern: "Yes", DateOfJoining: "01/02/2022", Skills: "VB, DOT.NET, Angular", Status: "Working" },
{ Name: "Ashwin", Code: 2, Is_Intern: "No", DateOfJoining: "21/03/2021", Skills: "VB, Ruby, Angular", Status: "Inactive" },
{ Name: "Shailesh", Code: 3, Is_Intern: "Yes", DateOfJoining: "27/04/2021", Skills: "VB, Python, Angular", Status: "Working" },
{ Name: "Pawan", Code: 4, Is_Intern: "No", DateOfJoining: "14/01/2022", Skills: "VB, Sapphire, Angular", Status: "Inactive" }]);
myApp.component('employeeDetail', {
bindings: {
Name: '<',
Code: '<',
Is_Intern: '<',
DateOfJoining: '<',
Skills: '<',
},
controller: 'empCtrl',
});
myApp.controller('empCtrl', function empCtrl($scope, Employees) {
$scope.EmployeeDetails = Employees;
$scope.Name = Employees.Name;
$scope.Code = Employees.Code;
$scope.Is_Intern = Employees.Is_Intern;
$scope.DateOfJoining = Employees.DateOfJoining;
$scope.Skills = Employees.Skills;
$scope.Status = Employees.Status;
$scope.add = function () {
$scope.EmployeeDetails.push({
Name: $scope.Name,
Code: $scope.Code,
Is_Intern: $scope.Is_Intern,
DateOfJoining: $scope.DateOfJoining,
Skills: $scope.Skills,
Status: $scope.Status,
});
$scope.id = '';
$scope.Code = '';
$scope.Is_Intern = '';
$scope.DateOfJoining = '';
$scope.Skills = '';
$scope.Status = '';
};
function select(Name) {
for (let i = 0; i < $scope.EmployeeDetails.length; i++) {
if ($scope.EmployeeDetails[i].Name == Name) {
return i;
}
}
return -1;
};
$scope.edit = function (Name) {
let index = select(Name);
let emp = $scope.EmployeeDetails[index];
$scope.Name = emp.Name;
$scope.Code = emp.Code;
$scope.Is_Intern = emp.Is_Intern;
$scope.DateOfJoining = emp.DateOfJoining;
$scope.Skills = emp.Skills;
$scope.Status = emp.Status;
}
$scope.save = function () {
let index = select($scope.Name);
$scope.EmployeeDetails[index].Name = $scope.Name;
$scope.EmployeeDetails[index].Code = $scope.Code;
$scope.EmployeeDetails[index].Is_Intern = $scope.Is_Intern;
$scope.EmployeeDetails[index].DateOfJoining = $scope.DateOfJoining;
$scope.EmployeeDetails[index].Skills = $scope.Skills;
$scope.EmployeeDetails[index].Status = $scope.Status;
$scope.Name = '';
$scope.Code = '';
$scope.Is_Intern = '';
$scope.DateOfJoining = '';
$scope.Skills = '';
$scope.Status = '';
}
$scope.deleteRow = function (emp, row) {
row.isActive = true;
setTimeout(function () {
$scope.delete(emp, row);
});
}
$scope.delete = function (emp, row) {
if (confirm("Are You Sure You want to delete this record ?")) {
$scope.EmployeeDetails.splice(emp, 1)
$scope.$apply();
alert("Deleted");
}
row.isActive = false;
}
$scope.selectedRow = null;
$scope.setClickedRow = function (index) {
$scope.selectedRow = index;
}
});
table {
border-collapse: collapse;
font-family: Arial;
}
td {
border: 1px solid black;
padding: 5px;
}
th {
border: 1px solid black;
padding: 5px;
text-align: center;
}
label,
input {
display: block;
}
label {
margin-bottom: 5px;
}
.highlight {
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<body ng-app="myApp" ng-controller="empCtrl">
<table>
<thead>
<th colspan="8">Names of Employees</th>
</thead>
<tbody>
<tr>
<th>Name</th>
<th>Code</th>
<th>Is_Intern</th>
<th>Skills</th>
<th>Status</th>
<th>DateOfJoining</th>
<th colspan="2" style="text-align: center;">Action</th>
</tr>
<tr ng-repeat="emp in EmployeeDetails" ng-class="{'highlight': emp.isActive == true}">
<td>{{emp.Name}} - {{ emp.isActive }}</td>
<td>{{emp.Code}}</td>
<td>{{emp.Is_Intern}}</td>
<td>{{emp.Skills}}</td>
<td>{{emp.Status}}</td>
<td>{{emp.DateOfJoining}}</td>
<td><button ng-click="edit(emp.Nam, emp)">Edit</button></td>
<td><button ng-click="deleteRow($index, emp)">Delete</button></td>
</tr>
</tbody>
<label>
Name
<input ng-model="Name" type="text" />
</label>
<label>
Code
<input ng-model="Code" type="number" />
</label>
<label>
Is_Intern
<input ng-model="Is_Intern" type="text" />
</label>
<label>
Skills
<input ng-model="Skills" type="text" />
</label>
<label>
Status
<input ng-model="Status" type="text" />
</label>
<label>
Date Of Joining
<input ng-model="DateOfJoining" type="text" />
</label>
<label>
<button ng-click="add()">Add</button>
</label>
<button ng-click="save()">Update</button><br><br>
</table>
<br>
</body>
Related
I'm trying to do strict and progressive search on same fields in 2 different ways. That is when filter through drop down it should to a strict search and through input search it should do a progressive search. I tried to do it using <tr ng-repeat="x in names | filter:{name:name||dropdownFieldName:true, country:country}"> but is giving some error, Its not working.
Please check the bellow code and help me to solve this issue
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<select id="fieldDropdownHtml" ng-model="fieldSelected" ng-options="x.name for x in names" ng-change="searchOnField()">
<option value=""></option>
</select>
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr>
<td><p><input type="text" ng-model="name" ng-disabled="disablese"></p>
<td><p><input type="text" ng-model="country"></p>
</td>
</tr>
<tr ng-repeat="x in names | filter:{name:name||dropdownFieldName, country:country}">
<!--tr ng-repeat="x in names | filter:{name:name||dropdownFieldName:true, country:country}" -->
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.disablese = false;
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Jani1',country:'England'},
{name:'Jani',country:'Norway'}
];
$scope.searchOnField = function() {
var e = document.getElementById("fieldDropdownHtml");
var strUser = e.options[e.selectedIndex].text;
angular.forEach($scope.names, function(dsElement) {
if (dsElement.name === strUser) {
$scope.dropdownFieldName = dsElement.name;
console.log($scope.dropdownFieldName);
}
if(document.getElementById('fieldDropdownHtml').selectedIndex == 0){
$scope.dropdownFieldName= undefined;
}
if(document.getElementById('fieldDropdownHtml').selectedIndex != 0){
$scope.disablese = true;
$scope.name = "";
}
else{
$scope.disablese = false;
}
});
}
});
</script>
</body>
</html>
Additional to Allabakash answer, you can use this code to your controller to make it simpler and minimize vanilla JavaScript codes:
angular
.module('myApp', [])
.controller('namesCtrl', function ($scope) {
$scope.disablese = false;
$scope.names = [
{ name: 'Jani', country: 'Norway' },
{ name: 'Carl', country: 'Sweden' },
{ name: 'Margareth', country: 'England' },
{ name: 'Hege', country: 'Norway' },
{ name: 'Joe', country: 'Denmark' },
{ name: 'Gustav', country: 'Sweden' },
{ name: 'Birgit', country: 'Denmark' },
{ name: 'Jani1', country: 'England' },
{ name: 'Jani', country: 'Norway' }
];
$scope.searchOnField = function () {
if ($scope.fieldSelected) {
$scope.dropdownFieldName = $scope.fieldSelected.name;
$scope.name = null;
$scope.disablese = true;
} else {
$scope.dropdownFieldName = undefined;
$scope.disablese = false;
}
};
});
You can achieve this by separating filters like below.
ng-repeat="x in names | filter:{name:name||dropdownFieldName}: disablese | filter: { country:country }"
Hope this helps.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<select id="fieldDropdownHtml" ng-model="fieldSelected" ng-options="x.name for x in names" ng-change="searchOnField()">
<option value=""></option>
</select>
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr>
<td><p><input type="text" ng-model="name" ng-disabled="disablese"></p>
<td><p><input type="text" ng-model="country"></p>
</td>
</tr>
<tr ng-repeat="x in names | filter:{name:name||dropdownFieldName}: disablese | filter: { country:country }">
<!--tr ng-repeat="x in names | filter:{name:name||dropdownFieldName:true, country:country}" -->
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.disablese = false;
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Jani1',country:'England'},
{name:'Jani',country:'Norway'},
{name:'Jani',country:'Harway'}
];
$scope.searchOnField = function() {
var e = document.getElementById("fieldDropdownHtml");
var strUser = e.options[e.selectedIndex].text;
angular.forEach($scope.names, function(dsElement) {
if (dsElement.name === strUser) {
$scope.dropdownFieldName = dsElement.name;
console.log($scope.dropdownFieldName);
}
if(document.getElementById('fieldDropdownHtml').selectedIndex == 0){
$scope.dropdownFieldName= undefined;
}
if(document.getElementById('fieldDropdownHtml').selectedIndex != 0){
$scope.disablese = true;
$scope.name = "";
}
else{
$scope.disablese = false;
}
});
}
});
</script>
</body>
</html>
I'm trying to filter some data from the select box. It works fine when I don't use the "multiple" flag. However, the idea here is to be able to select multiple environments and multiple applications and show it based the options I selected, but it is not working. I tried in many different ways, but I didn't find what I'm missing. Can someone help me here?
Here are the files which I'm using.
monitoring.html
<div ng-controller="monitoring" class="md-padding selectdemoOptionGroups" ng-cloak="" ng-app="monitor">
<div>
<h1 class="md-title">Monitoring</h1>
<div layout="row">
<md-input-container style="margin-right: 10px;">
<label>Segments</label>
<md-select ng-model="segment" >
<md-option ng-repeat="segment in segments" value="{{segment}}">{{segment}}</md-option>
</md-select>
</md-input-container>
<md-input-container>
<label>Environments</label>
<md-select ng-model="selectedEnvironments" multiple>
<md-optgroup label="environments">
<md-option ng-value="environment.name" ng-repeat="environment in environments | filter: {category: 'env' }">{{environment.name}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
<md-input-container>
<label>Applications</label>
<md-select ng-model="selectedApplications" multiple="">
<md-optgroup label="application">
<md-option ng-value="application.name" ng-repeat="application in applications | filter: {category: 'app' } ">{{application.name}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
<button ng-click="clear()" style="width: 55px; height: 50px;" id="iconTextButton">Clear</button>
<button style="width: 55px; height: 50px;" id="iconTextButton">Run</button>
</div>
<div class="md-card container-shadow" style="margin:15px">
<div class="card-header4">
Monitoring page1 for {{segment}}
</div>
<table id="grid422">
<colgroup>
<col style="width:830px" />
<col style="width:130px" />
<col style="width:130px" />
<col style="width:130px" />
</colgroup>
<thead align="left">
<tr>
<th >Application</th>
<th>Environment</th>
<th >StatusUP</th>
<th>StatusDown</th>
</tr>
</thead>
<tbody align="left" >
<tr ng-repeat="todo in todos | filter:segment | filter:selectedEnvironments | orderBy: 'application' ">
<td>{{todo.application}}</td>
<td>{{todo.environment}}</td>
<td>{{todo.statusUp}}</td>
<td>{{todo.statusDown}}<td>
</tr>
</tbody>
</table>
</div></div>
monitoring.js
(function (angular) {
angular
.module('monitor')
.controller('monitoring', function ($scope, $http) {
$scope.segments = [
"SegmentA",
"SegmentB",
"SegmentC"
];
$scope.selectedSegments = [];
$scope.printSelectedSegments = function printSelectedSegments() {
return this.selectedSegments.join('');
};
$scope.environments = [
{ category: 'env', name: 'ENV1' },
{ category: 'env', name: 'ENV2' },
{ category: 'env', name: 'ENV3' },
{ category: 'env', name: 'ENV4' }
];
$scope.selectedEnvironments = [];
$scope.printSelectedEnvironments = function printSelectedEnvironments() {
var numberOfEnvironments = this.selectedEnvironments.length;
if (numberOfEnvironments > 1) {
var needsOxfordComma = numberOfEnvironments > 2;
var lastEnvironmentConjunction = (needsOxfordComma ? ',' : '') + ' and ';
var lastEnvironment = lastEnvironmentConjunction +
this.selectedEnvironments[this.selectedEnvironments.length - 1];
return this.selectedEnvironments.slice(0, -1).join(', ') + lastEnvironment;
}
return this.selectedEnvironments.join('');
};
$scope.applications = [
{ category: 'app', name: 'App1' },
{ category: 'app', name: 'App2' },
{ category: 'app', name: 'App3' },
{ category: 'app', name: 'App4' }
];
$scope.selectedApplications = [];
$scope.printSelectedApplications = function printSelectedApplications() {
var numberOfApplications = this.selectedApplications.length;
if (numberOfApplications > 1) {
var needsOxfordComma = numberOfApplications > 2;
var lastApplicationConjunction = (needsOxfordComma ? ',' : '') + ' and ';
var lastApplication = lastApplicationConjunction +
this.selectedApplications[this.selectedApplications.length - 1];
return this.selectedApplications.slice(0, -1).join(', ') + lastApplication;
}
return this.selectedApplications.join('');
};
$scope.todos = [
{"segment":"SegmentA","application":"App1","environment":"ENV1","statusUp":57,"statusDown":"13"},{"segment":"SegmentB","application":"App2","environment":"ENV2","statusUp":12,"statusDown":"33"},{"segment":"SegmentC","application":"App3","environment":"ENV4","statusUp":357,"statusDown":"133"},{"segment":"SegmentA","application":"App1","environment":"ENV1","statusUp":57,"statusDown":"13"},{"segment":"SegmentB","application":"App2","environment":"ENV1","statusUp":12,"statusDown":"33"},{"segment":"SegmentC","application":"App3","environment":"ENV3","statusUp":333,"statusDown":"213"},{"segment":"SegmentB","application":"App1","environment":"ENV4","statusUp":357,"statusDown":"133"},{"segment":"SegmentC","application":"App2","environment":"ENV2","statusUp":57,"statusDown":"13"}
];
});
})(angular);
You can create custom function for filter
Updated code
<tbody align="left">
<tr ng-repeat="todo in todos | **filter: filterByGenres** | orderBy: 'application' ">
<td>{{todo.application}}</td>
<td>{{todo.environment}}</td>
<td>{{todo.statusUp}}</td>
<td>{{todo.statusDown}}
<td>
</tr>
angular controller side code
(function(angular) {
angular
.module('plunker', ['ngMaterial'])
.controller('monitoring', function($scope, $http) {
**$scope.filterByGenres = function(ele) {
var res = true
if ($scope.selectedEnvironments !== null && $scope.selectedEnvironments.length > 0) {
if ($scope.selectedEnvironments.indexOf(ele.environment) == -1) {
res = false;
}
}
if ($scope.selectedApplications !== null && $scope.selectedApplications.length > 0) {
if ($scope.selectedApplications.indexOf(ele.application) == -1) {
res = false;
}
}
return res;
}**
$scope.segments = [
"SegmentA",
"SegmentB",
"SegmentC"
];
...
Plunker here
Thanks
I just run your source on codepen.io and nothing output, try included md then everything ok. So, please try use .module('monitor', ['ngMaterial']) and test again.
There was a final problem when the project finished. How to avoid filtering when page loads first time.
For example : Opening page with TV checked ? (ng-checked="true") Other amenities is false. If the visitor lifts the tv checkin, the filter is renewed.
My project : fiddle
angular.module('hotelApp', [])
.controller('ContentControler', function ($scope, $timeout) {
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.location_name = "";
$scope.names = [{
prop_Name: 'Location 1',
lat: 43.7000,
long: -79.4000,
amenities: '3'
}, {
prop_Name: 'Location 2',
lat: 40.6700,
long: -73.9400,
amenities: '2'
}, {
prop_Name: 'Location 3',
lat: 41.8819,
long: -87.6278,
amenities: '4'
}, {
prop_Name: 'Location 4',
lat: 34.0500,
long: -118.2500,
amenities: '1, 2'
}, {
prop_Name: 'Location 5',
lat: 36.0800,
long: -115.1522,
amenities: '2, 3'
}];
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function (info) {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.prop_Name
});
marker.content = '<div class="infoWindowContent"><ul>' + '<li>' + info.prop_Desc + '</li>' + '<li>' + info.prop_Addr + '</li>' + '<li>' + info.prop_Price + '</li>' + '<li>' + info.prop_Dist + '</li>' + '</ul></div>';
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
for (i = 0; i < $scope.names.length; i++) {
createMarker($scope.names[i]);
}
$scope.openInfoWindow = function (e, selectedMarker) {
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
//PROBLEM FILTER HERE
$scope.am_en = function()
{
x = $(".hosting_amenities input:checkbox:checked").map(function(){return $(this).val();}).get();
$scope.ot_Filter = function (location) {
var shouldBeShown = true;
for (var i = 0; i < x.length; i++) {
if (location.amenities.indexOf(x[i]) === -1) {
shouldBeShown = false;
break;
}
}
return shouldBeShown;
};
}
$scope.$watch('nas',
function (newValue, oldValue) {
for (jdx in $scope.markers) {
$scope.markers[jdx].setMap(null);
}
$scope.markers = [];
for (idx in $scope.nas) {
createMarker($scope.nas[idx]);
}
}, true);
});
#map {
height: 220px;
width: 400px;
}
.infoWindowContent {
font-size: 14px !important;
border-top: 1px solid #ccc;
padding-top: 10px;
}
h2 {
margin-bottom: 0;
margin-top: 0;
}
#total_items
{
margin:0px auto;
padding:0px;
text-align:center;
color:#0B173B;
margin-top:50px;
border:2px dashed #013ADF;
font-size:20px;
width:200px;
height:50px;
line-height:50px;
font-weight:bold;
}
#amount
{
color:#DF7401;
font-size:18px;
font-weight:bold;
}
#slider-range
{
margin:0px auto;
padding:0px;
text-align:center;
width:500px;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js"></script>
<div ng-app="hotelApp" ng-controller="ContentControler">
<div id="map"></div>
<div id="class" ng-repeat="marker in markers"></div>
<ul>
<li ng-repeat="x in nas = (names | filter:ot_Filter)">{{ x.prop_Name }}</li>
</ul>
<div class="hosting_amenities">
<h3>Filter:</h3>
<input type="checkbox" name="more_filter[]" value="1" ng-checked="false">WIFI
<input type="checkbox" name="more_filter[]" value="2" ng-checked="true">TV
<input type="checkbox" name="more_filter[]" value="3" ng-checked="false">Cable TV
<input type="checkbox" name="more_filter[]" value="4" ng-checked="false">Klima
<button ng-click="am_en();">Submit</button>
</div>
Currently, you only change the filter once you press the button Submit. However, I recommend you to remove that and place the function ot_Filter outside of the function triggered when you click it. This will make the initial filtering when you load the page possible.
As the next step, I would use ng-model instead of ng-checked:
<input type="checkbox" name="more_filter[]" value="1" ng-model="ot_Checkboxes['wifi']">WIFI
<input type="checkbox" name="more_filter[]" value="2" ng-model="ot_Checkboxes['tv']">TV
<input type="checkbox" name="more_filter[]" value="3" ng-model="ot_Checkboxes['cableTV']">Cable TV
<input type="checkbox" name="more_filter[]" value="4" ng-model="ot_Checkboxes['klima']">Klima
The properties would be initialized in your javascript:
$scope.ot_Checkboxes = {
'wifi': false,
'tv': true,
'cableTV': false,
'klima': false
};
With these changes your code will update your locations automatically. This is a good practice and you can keep a good control of your elements. You will find more information about how to set this properly in this answer
In order for you to see how it looks like, I modified your fiddle here
Can anybody help me with angularjs sorting across all the pages when I am using Server side pagination and sorting.
I am using ui-bootsrap for pagination;
Code as attached.
My sorting is happening only once in ascending order.Any idea how to sort in both direction ? i.e i m passing the sortBy as +property to sort i need to toggle the property with - infront once its sorted in asc order. Any directive to handle that toggle?
$scope.maxSize = 5;
$scope.currentPage = 1;
$scope.itemsPerPage = 5;
//This method gets called each time the page is loaded or move to next page
$scope.isResultExist = function (list) {
$scope.list = list;
return $scope.populateResult();
};
$scope.populateResult = function () {
if ($scope.list != undefined) {
$scope.totalItems = $scope.list.length;
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage)
, end = begin + $scope.itemsPerPage;
$scope.result = $scope.list.slice(begin, end);
}
};
$scope.sort_by = function (sortBy) {
if ($scope.list != undefined) {
var sortOrder = 1;
$log.debug("**************list : " + $scope.list);
$scope.list.sort(function (a, b) {
for (var k = 0; k < $scope.list.length; k++) {
var valueA = a[sortBy];
var valueB = b[sortBy];
var result = (valueA < valueB) ? -1 : (valueA > valueB) ? 1 : 0;
return result * sortOrder;
}
});
$scope.populateResult();
}
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<th class="source"><a href="#" ng-click="sort_by('source')" data-toggle="tooltip" bs-tooltip
data-title="sort by Source ID">Source ID<i class="fa fa-sort"></i>
</a></th>
<tr data-ng-repeat="keyRingItem in result ">
Pagination:
<pagination items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage"
max-size="maxSize" class="pagination-sm" boundary-links="true">
</pagination>
If your paging is being done server-side, then the sorting must be done server-side.
Angular will only be able to sort the page of data that it has.
Either implement the sorting server-side, or retrieve all data and implement the paging client-side.
$scope.propertyName = 'age';//Amol sorting angularjs
$scope.reverse = true;
$scope.Shiftsort = function(propertyName) {
$scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
$scope.propertyName = propertyName;
};
angular.module('orderByExample2', [])
.controller('ExampleController', ['$scope', function($scope) {
var friends = [
{name: 'John', phone: '555-1212', age: 10},
{name: 'Mary', phone: '555-9876', age: 19},
{name: 'Mike', phone: '555-4321', age: 21},
{name: 'Adam', phone: '555-5678', age: 35},
{name: 'Julie', phone: '555-8765', age: 29}
];
$scope.propertyName = 'age';
$scope.reverse = true;
$scope.friends = friends;
$scope.sortBy = function(propertyName) {
$scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
$scope.propertyName = propertyName;
};
}]);
.friends {
border-collapse: collapse;
}
.friends th {
border-bottom: 1px solid;
}
.friends td, .friends th {
border-left: 1px solid;
padding: 5px 10px;
}
.friends td:first-child, .friends th:first-child {
border-left: none;
}
.sortorder:after {
content: '\25b2'; // BLACK UP-POINTING TRIANGLE
}
.sortorder.reverse:after {
content: '\25bc'; // BLACK DOWN-POINTING TRIANGLE
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js"></script>
<div ng-controller="ExampleController">
<pre>Sort by = {{propertyName}}; reverse = {{reverse}}</pre>
<hr/>
<button ng-click="propertyName = null; reverse = false">Set to unsorted</button>
<hr/>
<table class="friends">
<tr>
<th>
<button ng-click="sortBy('name')">Name</button>
<span class="sortorder" ng-show="propertyName === 'name'" ng-class="{reverse: reverse}"></span>
</th>
<th>
<button ng-click="sortBy('phone')">Phone Number</button>
<span class="sortorder" ng-show="propertyName === 'phone'" ng-class="{reverse: reverse}"></span>
</th>
<th>
<button ng-click="sortBy('age')">Age</button>
<span class="sortorder" ng-show="propertyName === 'age'" ng-class="{reverse: reverse}"></span>
</th>
</tr>
<tr ng-repeat="friend in friends | orderBy:propertyName:reverse">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
</div>
I have an ng-repeat for a table, I want to be able to add a class when <td> is clicked, and remove the class when un-clicked. Multiple <td> can be selected at the same time. Right now ALL of the cities are or are not getting the class applies.
For example: (lets say nodes has 100 items)
<tr ng-repeat node in nodes>
<td>{{node.name}}</td>
<td>{{node.date}}</td>
<td ng-click="toggleMe( node.city )" ng-class"{clicked : isClicked()}" >{{node.city}}</td>
</tr>
in my JS
$scope.cityArr = [];
$scope.toggleMe = function(city) {
if ($scope.count > 0) {
angular.forEach($scope.cityArr, function(value) {
if (city === value) {
$scope.clicked = false;
} else {
$scope.cityArr.push(city);
$scope.clicked = true;
}
});
} else {
$scope.cityArr.push(city);
$scope.clicked = true;
}
$scope.count = 1;
};
$scope.isClicked = function() {
return $scope.clicked;
};
Right now there is a single clicked property on the scope that you're changing and everything refers to that. Try to put clicked on the node instead...
$scope.toggleMe = function(node) {
if ($scope.count > 0) {
angular.forEach($scope.cityArr, function(value) {
if (node.city === value) {
node.clicked = false;
} else {
$scope.cityArr.push(node.city);
node.clicked = true;
}
});
} else {
$scope.cityArr.push(node.city);
node.clicked = true;
}
$scope.count = 1;
};
And in the ngRepeat...
<tr ng-repeat node in nodes>
<td>{{node.name}}</td>
<td>{{node.date}}</td>
<td ng-click="toggleMe( node )" ng-class"{clicked : node.clicked}" >{{node.city}}</td>
</tr>
You don't need a special function or controller to accomplish this:
<table>
<tbody>
<tr ng-repeat="node in nodes">
<td>{{node.name}}</td>
<td>{{node.date}}</td>
<td ng-click="node.highlight = !node.highlight"
ng-class="{ highlight: node.highlight }">
{{node.city}}
</td>
</tr>
</tbody>
</table>
Full Plunker example: http://plnkr.co/edit/1hdcIOfz0nHb91uFWKrv
I could show you the controller I used by it's empty except for the test data. You don't need a function.
Alternately, the code can use a separate array and $index to set classes:
<tr ng-repeat="node in nodes"
ng-class="{ highlight: highlightRows[$index] }">
<td class="x" ng-click="toggleHighlight($index)">
X
</td>
This approach is useful if you want to separate Model data from View data.
The DEMO
angular.module("app", [])
.controller("TestController", function($scope) {
$scope.highlightRows = [];
$scope.toggleHighlight = function(idx) {
$scope.highlightRows[idx] = !$scope.highlightRows[idx];
};
$scope.nodes = [
{ name: "Alpha", date: new Date(), city: "Omaha" },
{ name: "Bravo", date: new Date(), city: "New York" },
{ name: "Charlie", date: new Date(), city: "Minneapolis" }
];
})
table {
border-collapse: collapse;
font-family: sans-serif;
}
td {
padding: 5px;
border: solid black 1px;
}
.x {
cursor: pointer;
}
.highlight {
background: yellow;
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="TestController">
<table>
<h3>Click on X to highlight</h3>
<tbody>
<tr ng-repeat="node in nodes"
ng-class="{ highlight: highlightRows[$index] }">
<td class="x" ng-click="toggleHighlight($index)">
X
</td>
<td>{{node.name}}</td>
<td>{{node.date | date}}</td>
<td>{{node.city}}</td>
</tr>
</tbody>
</table>
highlightRows={{highlightRows}}
</body>