Apply ng-class to array of items in angularjs - javascript

I am trying to highlight multiple row select functionality, so that when a user click's on a row it highlight the row and when it again select that row it un-highlight that. But the problem I am facing is how to give array of items to ng-class.
Here is my code.
<tr ng-click="selectRow(1)" ng-class="{row_selected: ArrayOfItems}" class="ng-scope odd">
<td class="">
test
</td>
</tr>
And in my controller
$scope.selectedArray = [];
$scope.selectRow = function(id) {
if($scope.selectedArray.indexOf(id) == -1) {
$scope.selectedArray.push(id);
}else {
$scope.selectedArray.splice($scope.selectedArray.indexOf(id),1);
}
});
So what I am doing in controller is on clicking a row it push the id's in an array and on clicking the same row it pops out that id from array.
Any help ?

First check whether the row is selected or not
<tr ng-click="selectRow(1)" ng-class="{row_selected: isRowSelected(1)}" class="ng-scope odd">
<td class="">
test
</td>
</tr>
Add the isRowSelected to controller:
$scope.selectedArray = [];
$scope.isRowSelected = function(id) {
$scope.selectedArray.indexOf(id) != -1
}
$scope.selectRow = function(id) {
if($scope.selectedArray.indexOf(id) == -1) {
$scope.selectedArray.push(id);
}else {
$scope.selectedArray.splice($scope.selectedArray.indexOf(id),1);
}
});

More proper setup would be with in use of 'ng-repeat'. See the working code at:
JSFiddle
HTML:
<div ng-controller="MyController">
<table>
<tr ng-repeat="item in items" ng-click="selectRow(item)" ng-class="{row_selected: isSelected(item)}">
<td>
<a id="{{item}}">test {{item}}</a>
</td>
</tr>
</table>
</div>
JS/AngularJS:
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', function ($scope) {
$scope.items = [1,2,3,4,5];
$scope.selectedArray = [];
$scope.selectRow = function (id) {
if($scope.selectedArray.indexOf(id) == -1) {
$scope.selectedArray.push(id);
}else {
$scope.selectedArray.splice($scope.selectedArray.indexOf(id),1);
}
};
$scope.isSelected = function (id) {
if( $scope.selectedArray.indexOf(id) > -1){
return true;
}
return false;
};
}]);

Related

AngularJS ng-init not working with ng-repeat

I've been trying to call passID() function when page initializes but the function still doesn't work.
The website works this way:
Page-A passes data to Controller-A
then to Service then to Controller-B then the function from Controller-B gets called by Page-B.
My guess is that my error is in Page-B since I've successfully passed the data of Page-A up to Controller-B but I'm not 100% sure.
In my Page-A, I've made a button calling the function of Controller-A using ng-Click
<button class="viewDetails" ng-click="passID([1,03,07])">test button</button>
Controller-A only gets data from Page-A
angular.module('handsetExplorerModule')
.controller("compareHandsetController", ['$scope','compareHandsetService','sharedData', function($scope, compareHandsetService, sharedData) {
$scope.passID = function(id){
var arrayID = [];
arrayID = id;
sharedData.set(arrayID);
};
}]);
Service gets my JSON and is my getter and setter
angular.module('handsetExplorerModule')
.factory('compareDetailsService', ['$http','$q', function($http, $q) {
return {
getHandsetList: function(){
return $http.get("./data/compareJSON.json");
}
};
}]);
angular.module('handsetExplorerModule')
.factory('sharedData', function() {
var savedData = {}
function set(data) {
savedData = data;
}
function get() {
return savedData;
}
return {
set: set,
get: get
}
});
Controller-B filters the JSON file to only get what I need (i used ID from Page-A to filter)
angular.module('handsetExplorerModule')
.controller("compareDetailsController", ['$scope','compareDetailsService','sharedData', function($scope, compareDetailsService, sharedData) {
$scope.data = {phones: []};
compareDetailsService.getHandsetList()
.then(
function(data){
$scope.data.phones = data.data;
},
function(error){
//todo: handle error
}
);
var getData = sharedData.get();
$scope.passID = function passID(){
var newData = [];
for(var i=0; i<$scope.data.phones.length; i++){
if($scope.data.phones[i].id == getData[0] || $scope.data.phones[i].id == getData[01] || $scope.data.phones[i].id == getData[02]){
newData.push($scope.data.phones[i]);
}
}
$scope.phoneContent = newData;
}
$scope.viewDetails = function(id){
alert(id);
}
}]);
Lastly, In my Page-B, I've called Controller-B function: <div ng-init="passID()">
to be used by ng-repeat of my Page-B:
<table id="Content" ng-repeat="x in phoneContent track by x.id">
<tr>
<td class="one">
<table>
<tr>
<td><img class="contImage" ng-src="{{x.image}}" ng-alt="{{x.name}}" /></td>
<td class="textAlign">{{x.name}} <button class="viewDetails" ng-click="viewDetails(x.id)">VIEW DETAILS</button></td>
</table>
</td>
<td class="two">{{x.size}}</td>
<td class="one">{{x.storage}}</td>
<td class="two">{{x.camera}}</td>
<td class="one">{{x.battery}}</td>
<td class="two">{{x.network}}</td>
<td class="one">{{x.sim}}</td>
</tr>
</table>
I don't know why you define arrayID.
To solve your problem try with sharedData.set = arrayID; instead of sharedData.set(arrayID);.
Hope it helps!

Issue with filtering an Angular Table td

I have a table created in angularJS.
HTML:
<div class="widget-content" ng-controller="getAllBenchersController">
<table ng-table="talentPoolList" show-filter="true"
class="table table-striped table-bordered">
<tr ng-repeat="employee in $data" | filter: testFilter">
<td data-title="'#'">{{$index + 1}}</td>
<td data-title="'Employee ID'" sortable="'employee.employeeNo'"
filter="{ 'employee.employeeNo': 'text' }">
{{employee.employee.employeeNo}}
</td>
<td data-title="'Current State'" sortable="'state.state'" filter="{ 'state.state': 'text' }"
ng-class="{ red: employee.state.state == 'Available', blue: employee.state.state == 'Blocked'}">
{{employee.state.state}}
</td>
</tr>
</table>
</div>
In the <td data-title="'Current State'">I want to apply a filter. I want to display only states returning values 'Available' and 'Blocked'.
My controller is :
myApp.controller('getAllBenchersController', ['$scope', 'employeeTalentPoolServices', 'dataTable', '$window', '$timeout', function ($scope, employeeTalentPoolServices, dataTable, $window, $timeout) {
employeeTalentPoolServices.getAllBenchers().then(function (result) {
$scope.data = result.data;
$scope.testFilter = function (item) {
return (item.state.state.toLowerCase() === 'available' || item.state.state.toLowerCase() === 'blocked');
}
});
The states generally return values -'Available', 'Blocked', 'Billed' and 'Rejected'. I want the table to only display states - 'Available' and 'Blocked'.
Please have a check and point out what I'm doing wrong.
If you want to display only the items with the state 'available' and 'blocked' i think the best choice is to apply an angular filter in the ng-repeat. By this way, the ng-repeat only computes the items needed for the table.
You can add a new filter, for example:
myApp.filter('filterState',
[], function() {
return function(items) {
return items.map(function(obj) {
if (obj.state === 'available' || obj.state === 'blocked')
return obj;
});
});
After, your div element should be:
<tr ng-repeat="employee in $data" | filter: filterState">
return (item.state.state.toLowerCase() === 'available' || item.state.state.toLowerCase() === 'blocked');
Above code returns a boolean value, also if you have array list of values , here only one value is considered.
You should write a for loop , then check the values.
Refer below code:
var filteredOutput=[];
for(var i=0;i<item.length; i++){
if(item[i].state.state.toLowerCase() === 'available' || item[i].state.state.toLowerCase() === 'blocked')
{
filteredOutput.push(item[i]);
}
}
return filteredOutput;

Use filter to filter result in angularJS

Hi I have a table with data in it,what I what is to filter the result so that if a table row have a datetime that is not current like today's date that specific row must not be shown or just change the background-color of it. Here is what I have tried but it doesn't work. Even if it's not filter what-else can I use? Basically the first row must appear
<table class="table table-striped table-bordered table-hover table-fixedheader">
<thead>
<tr>
<th>KomaxShortname</th>
<th>OriginalFileName</th>
<th>OriginalPath</th>
<th>OriginalModifiedDateTime</th>
<th>UpLoadedDateTime</th>
<th>AgeInMinutes</th>
<th>FileLength</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="latestwpcsfiles in Model.WpcsFiles | filter:{OriginalModifiedDateTime:'!CurrentDateTime'}">
<td>{{latestwpcsfiles.KomaxShortname}}</td>
<td>{{latestwpcsfiles.OriginalFileName}}</td>
<td>{{latestwpcsfiles.OriginalPath}}</td>
<td>{{latestwpcsfiles.OriginalModifiedDateTime}}</td>
<td>{{latestwpcsfiles.UpoadedDateTime}}</td>
<td>{{latestwpcsfiles.AgeInMinutes}}</td>
<td>{{latestwpcsfiles.FileLength}}</td>
</tr>
</tbody>
</table>
JS
function Model($http) {
var self = this;
self.$http = $http;
self.WpcsFiles = [];
self.GetLatestWpcsFiles = function () {
return ngHesto.Ajax.Get(self.$http
, {
url: 'http://10.19.13.68/GetLatestWpcsFiles/Default.aspx'
, success: function (data) {
self.WpcsFiles = data.data;
console.log(self.WpcsFiles);
}
});
}
self.GetLatestWpcsFiles();
}
ngAppModule.controller('LatestWpcsFilesController', ['$scope', '$http', function ($scope, $http) {
$scope.Model = new Model($http);
}]);
The easiest way imo would be to create a custom filter like this:
function(items, date) {
var result = [];
if (items != null) {
for (var i = 0; i < items.length; i++;){
var item = items[i];
if (item.OriginalModifiedDateTime.getDate() == date.getDate())
result.push(item);
}
}
return result;
}

Setting table with object in angular

I have an object I want to put in a table.
the object seems like: {"text":"111","order":["1","2","3","4","5"]}
there may be array as well as simple strings.
So how can I put this object in a table if I want the table to look like this:
property value
text 111
order 1,2,3,4,5
My table shows in the value column ["1","2","3","4","5"] instead of 1,2,3,4,5.
Here is what I wrote:
<tr data-ng-repeat="(key,val) in object">
<td>
{{ key }}
</td>
<td>
{{val}}
</td>
</tr>
I also tried with ng-swtich but it didn't work.
Here is a sample which checks if the value is an Array and joins them as a string.
Html:
<tr data-ng-repeat="(key,val) in object">
<td>
{{ key }}
</td>
<td>
{{val | isArray}}
</td>
</tr>
Controller:
app.controller('MainCtrl', function($scope) {
$scope.object = {"text":"111","order":["1","2","3","4","5"]};
});
app.filter("isArray", function() {
return function(input) {
var isArray = angular.isArray(input);
if(isArray)
return input.join();
return input;
};
});
Working code here
Is this what you were after?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="app" ng-controller="MyTableController">
<tr data-ng-repeat="(key,val) in data">
<td>
{{ key }}
</td>
<td >
{{ val | join: ', ' }}
</td>
</tr>
</table>
<script>
angular.module('app', [])
// Filter that joins the input with the supplied separator
.filter('join', function () {
return function (value, separator) {
if (typeof value.join === 'function') {
return value.join(separator);
} else {
return value;
}
}
})
.controller('MyTableController', function ($scope) {
$scope.data = {"text":"111","order":["1","2","3","4","5"] };
});
</script>

AngularJs : how to do a $watch on a function to evoid the error: $digest() iterations reached

I have a list with items. Each item of a list can be selected. If I select the item, it will be pushed in the cookies.
In my home.html (here I have the list with the items that I can add to cookies)
<table class="table" >
<tr data-ng-repeat="item in items">
<td><span >{{item.title}}</span></td>
<td> <button data-ng-click="addToCookies(item)" data-ng-disabled="item.added" class="btn">
<span data-ng-show="!item[$index].added" class="text-center">Add To cookies</span>
<span data-ng-show="item[$index].added" class="text-center">Added To cookies</span>
</button>
</td>
</tr>
<tr></tr>
</table>
In page cookies.html I call the getCookiesItem() and the directive :
<div class="navbar navbar-right" data-ng-controller="ctrlItemsList">
<div data-item-list data-items="getCookiesItem()" ></div>
</div>
In my controller I did :
//TO ADD ELEMENT SELECTED IN THE COOKIE
$scope.addToCookies = function (item){
item.added=true;
angular.extend($scope.criteria, item);
cookiesItems.addItem($scope.criteria);
}
//TO GET ELEMENTS COOKIE (MAYBE I HAVE TO DO A $WATCH OF THIS FUNCTION)
$scope.getCookiesItem = function (){
return cookiesItems.getItems();
}
In my service I have :
Cservices.factory('cookiesItems', ['$cookieStore', function($cookieStore) {
var items = [];
return {
addItem: function( itemSelected){
var array = [];
if ($cookieStore.get('key') === undefined) {
$cookieStore.put('key', []);
}else{
array = $cookieStore.get('key');
}
array.push(itemSelected);
$cookieStore.put('key', array);
},
removeItem: function(itemSelected){
var array = $cookieStore.get('key');
if(array != undefined){
for (var i = 0; i < array.length; ) {
if (array[i].id=== itemSelected.id) {
array.splice(array[i], 1);
} else {
++i;
}
}
}
$cookieStore.put('key', array);
},
getItems: function(){
return $cookieStore.get('key');
}
The elements cookies are print in the following directive:
template :
<table class="table" >
<tr data-ng-repeat="item in items">
<td>{{item.title}}</td>
</tr>
<tr></tr>
</table>
in the js :
iDirective.directive('itemList', function() {
return {
restrict: 'A',
transclude: true,
scope: {
items: '=items'
}
templateUrl: ''
};
});
I have the following error:
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: parentValueWatch; newVal: [{
and when i try to add the 10' element in the cookies I have this error (only 9 element I am able to store): Cookie '' possibly not set or overflowed because it was too large (4263 > 4096 bytes)! -
I am not able to resolve it..someone can help me?
Thanks
It would be helpful if you could put together a jsfiddle example.
From your code I can see the following issue.
In the ng-repeat section either should use 'items[$index]' or just 'item'.
<table class="table" >
<tr data-ng-repeat="item in items">
<td><span >{{item.title}}</span></td>
<td> <button data-ng-click="addToCookies(item)" data-ng-disabled="item.added" class="btn">
<span data-ng-show="!item.added" class="text-center">Add To cookies</span>
<span data-ng-show="item.added" class="text-center">Added To cookies</span>
</button>
</td>
</tr>
<tr></tr>
</table>
What is the method addToCookies exactly doing? What is $scope.criteria object? It looks like you always modify and add the same object to the cookieItems.
$scope.addToCookies = function (item){
item.added=true;
angular.extend($scope.criteria, item); // what is $scope.criteria?
cookiesItems.addItem($scope.criteria); // will always the same object added to the cookieItems?
$scope.selectedItems.push(item); // why do you have a second list and why you add 'item' and not 'criteria'?
}

Categories

Resources