We Keep Coding

how to send object from html ng-repeat to js function

I am getting data from db and put it in a scope, then iterate on these data by ng-repeat in html.
what i am trying to do is to send the selected object when the user check on a checkbox to get another data based on an id for example . i tried to use ng-model and ng-change on the checkbox but it sends only true or false .
HTML
<div id="frame" class="widget-content" style="height:50vh; overflow:auto;">
<table style="font-size: 12px;display: inline-block;">
<thead>
<tr>
<th>Check</th>
<th>Group Code</th>
<th>Group Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="g in Groups | unique : 'Group_code'"
ng-click="showInEdit(g)"
ng-class="{selected:g === selectedRow}">
<td><input type="checkbox" ng-model="g"
ng-true-value="g" ng-change="Getrequest2(g)"/>
<td>{{g.Group_code}}</td>
<td>{{g.group_name_latin}}</td>**
</tr>
</tbody>
</table>
<table style="font-size: 12px; float: left;">
<thead>
<tr>
<th>Check</th>
<th>Item Code</th>
<th>Item Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in items | unique : 'Item_code'"
ng-click="showInEdit(i)"
ng-class="{selected:i === selectedRow}">
<td><input type="checkbox" />
<td>{{i.Item_code}}</td>
<td>{{i.ITEM_NAME_LATIN}}</td>
</tr>
</tbody>
</table>
</div>
angularjs
$scope.Getrequest1 = function (g) {
//console.log(g);
$scope.typecd = g.TypeCode;
$scope.ShowLoading('slow');
LOASrv.GetGroup("LOAApprovalSetup/GetGroup" +
"?typ=" + g.TypeCode +
'&hospid=' + $scope.hospitalid +
'&userky=' + $scope.userkey
).then(function (response) {
$scope.Groups = (response.data);
$scope.HideLoading('slow');
})
}
$scope.Getrequest2 = function (i) {
console.log(i);
$scope.ShowLoading('slow');
LOASrv.GetItem("LOAApprovalSetup/GetItem" +
"?typ=" + $scope.typecd +
'&hospid=' + $scope.hospitalid +
'&userky=' + $scope.userkey +
'&groupcd=' + i
).then(function (response) {
$scope.items = (response.data);
$scope.HideLoading('slow');
})
}

You’re assigning ‘g’ object to checkbox ng-model.
This changes the value of ‘g’ from object to boolean on checkbox select.
That’s why you’re getting true/false
Change ng-model=“g.someBooleanName” and try

AngularJs - Populate the tables by checking header names

I have two objects one contains selected records and another contains selected fields. Now I need to populate the table dynamically by checking the column header name or value.
I referred Populate table with ng-repeat and check matching header data
Completed:
I able to add the headers dynamically to the table/columns.
Working code is in Plunker
HTML
<table class="dataTable no-footer leadTable">
<thead>
<tr role="row">
<th>
<input type="checkbox" ng-model="selectedSObject[key]" class="select_tertiary_selectAll" />
</th>
<th ng-repeat="k in sFields[key]" ng-value="{{k.name}}" style="font-weight: 400; border-right: none; background-color: #0070d2; padding: 10px 18px;">
<div> {{k.label}} </div>
</th>
</tr>
</thead>
<tbody>
<tr role="row" ng-class="odd" ng-repeat="record in value.filtered">
<td>
<input type="checkbox" ng-model="record.checked" />
</td>
<td ng-repeat="(key_1, value_1) in record" style="padding: 10px 18px;">
<div> {{value_1}} </div>
</td>
</tr>
</tbody>
</table>
JS
$scope.sFields = getSFields($scope.sObjectCSVData);
$scope.iterableRecords = getiterableRecords($scope.sObjectCSVData, allRecords)
function getiterableRecords(sCSVData, allRecords) {
var sObjectRecords = {};
if (allRecords) {
Object.entries(sCSVData).forEach(function(key) {
if (sCSVData[key[0]].filtered.length != 0) {
if (sObjectRecords[key[0]]) {
sObjectRecords[key[0]].push(sCSVData[key[0]].filtered)
} else {
sObjectRecords[key[0]] = []
sObjectRecords[key[0]].push(sCSVData[key[0]].filtered)
}
}
});
}
return sObjectRecords
}
function getSFields(sCSVData) {
var fields = {};
Object.entries(sCSVData).forEach(function(key) {
if (sCSVData[key[0]].filtered.length != 0) {
for (var i = 0; i < sCSVData[key[0]].sObjectFields.length; i++) {
if (fields[key[0]]) {
fields[key[0]].push(sCSVData[key[0]].sObjectFields[i])
} else {
fields[key[0]] = []
fields[key[0]].push(sCSVData[key[0]].sObjectFields[i])
}
}
}
});
return fields
}
Need to do:
Now I have to populate the table with the respective values by checking the column name.
I'm working in AngularJS 1.6.9

By adding small changes, Now I can able to populate the table,
The code I followed is as below,
<tbody>
<tr role="row" ng-class="odd" ng-repeat="record in value[0]">
<td>
<input type="checkbox" ng-model="record.checked" />
</td>
<td ng-repeat="k in sFields[key]" style="padding: 10px 18px;">
{{record [k.name]}} </div>
</td>
</tr>
The working code is in the below mentioned plunker,
Populate the table by checking the header name
For ref.

show and hide columns in the table by clicking checkbox using Angularjs

I've got a table with large number of columns, I need to be able to show and hide some columns by clickin checkbox. I've tried a lot of variations of ng-click--ng-show, $scope$watch and now I've trying to do this by addEventListener, but It doesn't work, nothing happend.
$scope.showTheItem = false;
function newFunction() {
document.getElementById("showTheItemEvent").addEventListener('checked', function () {
$scope.showTheItem = true;
$scope.digest();
});
}
and this is html:
<form ng-show="showTheForm"> // this is the form with checkboxes
<table onload="newFunction();">
<tr><td style="vertical-align:top" ng-repeat="item in superKeys" ng-if="$even"><input type="checkbox" id="showTheItemEvent" ng-true-value="checked" style="margin-left:3px; margin-right:15px"><label>{{localization.setLicTabs[locale][item]}}</label></td></tr>
<tr style="height:10px"></tr>
<tr><td style="vertical-align:top" ng-repeat="item in superKeys" ng-if="$odd"><input type="checkbox" id="showTheItemEvent" ng-true-value="checked" style="margin-left:3px; margin-right:15px"><label>{{localization.setLicTabs[locale][item]}}</label></td></tr>
</table>
</form>
<table>
<thead>
<tr>
<th ng-show="showTheItem">{{localization.setLicTabs[locale].VirtualType}}</th>
<th ng-show="showTheItem">{{localization.setLicTabs[locale].FarmName}}</th>
</tr>
</thead>
<tbody dir-paginate="item in dataObjHosts | filter:searchFilter | orderBy:orderListType:true | itemsPerPage: pageSize" pagination-id="POPaginatorServersSoft" current-page="currentPage" ng-click="setActiveState($event)">
<tr >
<td ng-show="showTheItem"><span ng-bind="dataObj[item][0].VirtualType"></span></td>
<td ng-show="showTheItem"><span ng-bind="dataObj[item][0].FarmName"></span></td>
</tr>

Angular checkbox filter leaves no data

My checkbox filter is totally removing all data records instead of filtering.
I used this post as guidance: http://jsfiddle.net/65Pyj/
I can get and console the selected category. I am having problems filtering the list.
My data is like so:
{"product_title":"COPD Track Package","product_code":"COPDPKG2014","id":"a1u40000000C182AAC","Id":"a1u40000000C182AAC","sort_order":"6","sort_code":"COPDPKG2014","category":["Postgraduate Course, Continuing Education"]}
Here is the angular:
<div class="container">
<div class="ng-scope" ng-app="products">
<div class="ng-scope" ng-controller="ShoppingCartCtrl">
<div class="row">
<div class="col-sm-7"><h3 class="colored-title">Search Filter</h3>
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td>By Product Title:</td>
<td><input ng-model="search.product_title" type="text"/></td>
</tr>
<tr>
<td>By Product Code:</td>
<td><input ng-model="search.product_code" type="text"/></td>
</tr>
<tr>
<td>By Presentation Title:</td>
<td><input ng-model="search.presentations" type="text"/></td>
</tr>
<tr>
<td>By Speaker Name:</td>
<td><input ng-model="search.speakers" type="text"/></td>
</tr>
<tr>
<td><input type="checkbox" ng-click="includeProduct('Postgraduate Course')"/>Postgraduate Course</td>
<td><input type="checkbox" ng-click="includeProduct('Continuing Education')"/>Continuing Education</td>
</tr>
<tr><td>Filter dump: {{productIncludes}}</td></tr>
</tbody>
</table></div>
</div>
<div>Sort by:<select ng-model="sortExpression">
<option value="sort_code">Product Code</option>
<option value="product_title">Product Title</option>
</select></div>
<table class="table table-bordered table-striped">
<thead>
<tr class="warning"><th>Product Code</th><th>Product Title</th></tr>
</thead>
<tbody>
<tr ng-repeat="item in items | orderBy:mySortFunction | filter:search |filter:productFilter">
<td valign="top">
{{item.id}}<div ng-repeat="c in item.cat" >{{c}}</div>
</td>
<td>
{{item.product_title}}
</tr>
</tbody>
</table>
</div>
$scope.productIncludes = [];
$scope.includeProduct = function(category){
var i = $.inArray(category, $scope.productIncludes);
if(i > -1){
$scope.productIncludes.splice(i,1);
}else{
$scope.productIncludes.push(category);
}
console.log($scope.items.length);
}
$scope.productFilter = function (items) {
if ($scope.productIncludes.length > 0) {
if ($.inArray(items.cat, $scope.productIncludes) < 0) return;
}
return items;
}

Basically it is problem with your data representations.
You have categories stored as "category":["Postgraduate Course, Continuing Education"] and you want to search in those categories as if it was an array like "category":["Postgraduate Course", "Continuing Education"].
I recommend you to represent your data like the second case and then you can iterate over it like this:
$scope.productFilter = function (items) {
if ($scope.productIncludes.length > 0) {
var result = $scope.productIncludes.filter(function(n) {
return items.category.indexOf(n) != -1
});
if(result.length < 1) {
return;
}
}
return items;
}
And here is your fiddle: http://jsfiddle.net/65Pyj/133/
Short explanation:
filter function in combination with the indexOf function will return an intersection of the two arrays.

Change cell color via ng-click

I have change color of my cell when I click in my button but when I click second time my color cell is not keep.
I wish that when I click a second time on another button my first cell keeps color
First click:
Second click:
HTML:
<table class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr class="warning">
<th>Key</th>
<th>Valeur version {{application.version}}</th>
<th></th>
<th>Valeur version {{applicationcible.version}}</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr>
<td class="danger" colspan="4" ng-click="hideGroup = !hideGroup">
<a href="" ng-click="group.$hideRows = !group.$hideRows">
<span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
<strong>{{group.name}}</strong>
</a>
</td>
</tr>
<tr ng-repeat-start="member in group.members" ng-hide="hideGroup">
<td rowspan="2">
{{ member.name }}
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowLeft}">{{ member.valueRef }}</td>
<td class="cube" >
<div ng-if="group.id != 1">
<button type="button" ng-click="moveLeft($index, group)" ><span class="glyphicon glyphicon-chevron-left"></span></button>
</div>
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowRight}">{{ member.valueCible }}</td>
</tr>
<tr ng-repeat-end ng-hide="hideGroup" >
<td class="cube" >
<div ng-if="group.id != 2">
<button type="button" ng-click="moveRight($index, group)"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</td>
</tr>
</tbody>
</table>
CSS:
.selected { background-color: #ffff05; }
JS:
scope.moveLeft = function (index, group) {
move(scope.properties, group.id, index, 'left');
};
scope.moveRight = function (index, group) {
move(scope.propertiescible, group.id, index, 'right');
};
var move = function (properties, groupId, origin, destination) {
unregister();
var value;
if (destination === 'right') {
scope.selectedRowRight = origin;
} else {
scope.selectedRowLeft = origin;
}
...

You might need to create an array to keep the cells that are selected thus background color is changed.
Also you will need to change the ng-click function to check the array, and implement the following logic "if there is a record for the clicked row as selected change it's bg-color to yellow"

You will need to do something like this
<td ng-repeat="group in groups" ng-class="{'selected': check == group.title}" ng-click="select(group)">{{group.title}}</li>
in css make sure you have this selected class defined
.selected {
background: 'red';
}
in controller
$scope.check = '';
$scope.select = function (group) {
$scope.check = group.title
};
See this plunker http://plnkr.co/edit/pLbLMWsJ7A6Zr1Z9uAmz?p=preview