I built a function that counts how many times the user clicked on his name in the users table, but the ng-click doesn't triggers the function.
HTML code:
<tr ng-repeat="user in Users.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
<td class="col-lg-1" ng-click="tapName(user.userName)">{{user.userName}}</td>
<td class="col-lg-1">{{user.PassWord}}</td>
<td class="col-lg-1">{{user.Name}}</td>
<td class="col-lg-1">{{user.LastName}}</td>
<td class="col-lg-1">{{$index}}</td>
<td class="col-lg-1">{{user.countConnect}}</td>
<td class="col-lg-1">{{user.countPaging}}</td>
<td class="col-lg-1">{{user.countOrder}}</td>
<td class="col-lg-1">{{user.countTapName}}</td>
</tr>
AngularJS function code:
$scope.tapName = function(name){
if($scope.User == name){
$scope.User.countTapName ++;
}
};
There is no User in the scope. The scope contains Users, which is an array of users. You should not pass the user name as argument. You should pass the user itself:
ng-click="tapName(user)"
$scope.tapName = function(user){
user.countTapName++;
};
Related
I want to display something like this inside an ng-repeat: display a span tag saying the total purchase right after the last purchase of each person.( I do not want to display the total after each purchase). I have an array of object like this :
let group=[{name:'Brandon Pack',city:'NY',purchase:25,accepted:true},
{name:'Josh Vilet',city:'Memphis',purchase:30,accepted:true},
{name:'Brandon Pack',city:'NY',purchase:62,accepted:true},
{name:'Patrick Whiteside',city:'NY',purchase:50,accepted:false},
{name:'Josh Vilet',city:'Memphis',purchase:50,accepted:true}]
I can get the total, my problem is with the view that I don't want to display the total only after the last ocurence for that person
First of all, you can create a function in your controller in order to get the total amount:
$scope.getTotal = function () {
var sum = 0;
$scope.group.forEach(function(customer){
sum += customer.purchase;
});
return sum;
}
By the way, you can't declare variables with whitespaces in their name, like "let group", better call it "letGroup".
Then, you just have to create your table in Html:
<table>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Purchase</th>
<th>Accepted</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="o in group">
<td ng-bind="o.name"></td>
<td ng-bind="o.city"></td>
<td ng-bind="o.purchase"></td>
<td ng-bind="o.accepted ? 'Yes': 'No'"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>Total</td>
<td ng-bind="getTotal()"></td>
</tr>
</tbody>
</table>
I am showing list on table using html (table, tr, td) and angularJS. Table also contains filters on columns. Table is populating data properly and filters are working properly using AngularJS.
After doing some filtration, I want to get only visible rows in one of my angularJS's function.
How can I get only the Visible Rows of a Table in angularJS after Few Filters?
Please note that I am not using any checkboxes or radio buttons with data list.
Please see my code below:
var myapp=angular.module("myapp",[]);
myapp.controller('ctrcommodity',['$scope',function($scope) {
$scope.commodity={
allPreferredCommodity: [
{
"commodityId": "2016070011220000141",
"commodityName": "Computer (PC)"
},
{
"commodityId": "2016080011220000004",
"commodityName": "Laptop"
},
{
"commodityId": "2016070011220000032",
"commodityName": "Keyboard"
},
{
"commodityId": "2016080011220000054",
"commodityName": "Mouser"
}
]
};
$scope.getVisibleRows=function()
{
//want to get details of visible rows after filtration
}
}]);
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Commodity Id</th>
<th>Commodity Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="txtcid" id="txtcid" ng-model="s.commodityId"></td>
<td><input type="text" name="txtcname" id="txtcname" ng-model="s.commodityName"></td>
</tr>
<tr ng-repeat="commoditylist in commodity.allPreferredCommodity | filter:s">
<td>{{commoditylist.commodityId}}</td>
<td>{{commoditylist.commodityName}}</td>
</tr>
<tr>
<td align="center" colspan="6" height="50">
<input type="button" value="Show Visible Rows" ng-click="getVisibleRows()">
</td>
</tr>
</tbody>
Do like the follwing . I am changing your function as
$scope.getVisibleRows=function(arrayData,s)
{
console.log(s);
$scope.filerList=$filter('filter')(arrayData,s);
alert( $scope.filerList);
//want to get details of visible rows after filtration
}
and similarly change it is html also like ng-click="getVisibleRows(commodity.allPreferredCommodity,s)"
dont forget to inject filter to controller like myapp.controller('ctrcommodity',['$scope','$filter',function($scope,$filter)
I'm populating my view as follow :
<tbody ng-repeat="user in users">
<tr>
<td class="numeric">{{user.name}}</td>
</tr>
</tbody>
I'm trying to access the data from user.name inside my controller so that I end up with an array of without any action from the user:
$scope.array = [user.name1,user.name2,user.name3,...]
I've been trying to do something like this but it's not working:
<tbody ng-repeat="user in users">
<tr>
<td class="numeric" ng-model={{array[user.index] = user.name}}>{{user.name}}</td>
</tr>
</tbody>
I need to get the data this way because i'm using data from minimongo on the client and can't access it before the page is loaded.
edit controller :
angular.module('App').controller('Users', function ($scope,$stateParams) {
$scope.helpers({
Users: () => {
return Users.find({_id:$stateParams.ID.toString()});
}
});
});
Can't figure out how to dynamically add a new model whenever a new row is added to the page. For example, the input select box ng-model= infos.rigBonusInfo.rigName is used for all select box I've added to the page. I would like to have a different model attached to a each select inputs. I tried using ng-model= infos.rigBonusInfo.rigName[rigBonus] but it doesn't work for the rates as the same model gets attachedto each rate field.
Pretty much what I want to do is to bind a new model whenever a new row gets pushed into the array.
Currently, I have a nested table which is the following:
<div class="col-lg-5">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Rig</th>
<th>Rig Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rig in rigs">
<td>{{ $index + 1 }}</td>
<td>{{ rig.name }}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-2"></div>
<div class="col-lg-5">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Bonus Name</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="bonus in create.rigBonusRates">
<td>{{ bonus.rateName }}</td>
<td>{{ bonus.rate }}</td>
</tr>
</tbody>
</table>
</div>
<table>
<thead>
<tr>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rigDate in rigDateList track by $index">
<td><input ui-date="datepickerOptions" ng-model="date" /></td>
<td>
<table>
<thead>
<tr>
<th>Rig</th>
<th>Rate1</th>
<th></th>
<th>Rate2</th>
<th></th>
<th>Rate3</th>
<th></th>
<th>Rate4</th>
<th></th>
<th>Comments</th>
</tr>
</thead>
<tr ng-repeat="rigBonus in rigBonusList track by $index">
<td><select ng-options="rig as rigs.indexOf(rig) + 1 for rig in rigs" ng-model="infos.rigBonusInfo.rigName[rigBonus]" ></select></td>
#for (var i = 1; i < 5; i++)
{
<td><select ng-options="rigBonus.rateName for rigBonus in create.rigBonusRates" ng-model="infos.rigBonusInfo.rate#(#i)"></select></td>
<td><input type="text" ng-disabled="infos.rigBonusInfo.rate#(#i).rateName != 'Special' " ng-model=infos.rigBonusInfo.rate#(#i).rate /></td>
}
<td><input ng-model="info.rigBonusInfo.comments" /></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<div>
<button type="button" ng-click="add()">Add</button>
<button type="button" ng-click="addDate()">Add Date</button>
</div>
My current controller has the following:
angular.module('RigBonus').controller('rigCreateController', ['$scope', '$http', 'PayPeriodService', 'RigLegendService',
function ($scope, $http, PayPeriodService, RigLegendService, RigBonusRateService) {
$scope.rigs = RigLegendService.getRigLegend();
$scope.datepickerOptions = {
orientation: 'top',
startDate: PayPeriodService.getStartDate(),
endDate: PayPeriodService.getEndDate()
};
$http({ method: 'GET', url: '/Home/CreateData' }).success(function (data) {
$scope.create = data;
$scope.infos = {
rigBonusInfo: {
rigName: $scope.rigs[0],
rate1: $scope.create.rigBonusRates[0],
rate2: $scope.create.rigBonusRates[0],
rate3: $scope.create.rigBonusRates[0],
rate4: $scope.create.rigBonusRates[0],
comment: ""
}
};
$scope.add = function () {
$scope.rigBonusList.push();
};
$scope.addDate = function(){
$scope.rigDateList.push("");
};
});
$scope.rigBonusList = [$scope.rigBonusInfo];
$scope.rigDateList = [];
$scope.submit = function () {
$http.post('/Home/Create', {model: "testing"} );
};
}]);
I figured out my issue. My problem was that I was not sure how to generate a new object when a new row of controls are added. Think I should have put something on fiddleJS to help people visualize it better. As a static model was used ($scope.infos) as ng-model, the same model was used for two different controls which I don't want. I want all my controls to be unique.
The fix was to create the object I had in mind which is the following:
$scope.rigDateList = [{
date: "",
rigBonusList: [{}]
}];
So it is an array of objects where the object contains a date and another array of objects.
When I want to push new objects to the inside array which I didn't know I could just create objects like this at the time. I was trying to figure out a way to dynamically create new models ng-model could by declaring them in the controller. I use the following function:
$scope.rigDateList[$scope.rigListIndex].rigBonusList.push({
rigName: "",
rate1: "",
rate2: "",
rate3: "",
comments: ""
});
I also didn't know that I could use elements inside the array from ng-repeat. In the following case, it is rigBonus that I could have used as a model instead of infos model.
<tr ng-repeat="rigBonus in rigDate.rigBonusList track by $index">
<td><select ng-options="rig as rigs.indexOf(rig) + 1 for rig in rigs" ng-model="rigBonus.rigName"></select></td>
and when I want to push to the outside array I use the following:
$scope.rigDateList.push({
date: "",
rigBonusList: [""]
});
$scope.rigListIndex = $scope.rigListIndex + 1;
I use an index to keep track of which object I'm in.
A more closest question and answer is that:
Ng-repeat with dynamic ng-model on input not working
please, take a look.
I have a series of Checkboxes:
<tr id="tr5" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
<td class="td5"><input name="benefit" value="Bonuses" id="benefit5" type="checkbox" onchange='addition();'</td>
<td class="td5"><label for="benefit5"> <b>Bonuses</b></label></td>
<tr id="tr6" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
<td class="td6"><input name="benefit" value="Final salary pension" id="benefit6" type="checkbox" onchange='addition();'</td>
<td class="td6"><label for="benefit6"> <b>Final salary pension</b></label></td>
Once a user has selected 3 checkboxes, is it possible to disable the rest in one hit (there are 30 checkboxes - I could do it individually but that seems a pain)? Is so, how would one go about doing that? Also, if the user then un-selected one of the check boxes, is it possible to enable them again?
EDIT: If possible - could someone point me in the right direction, code wise please?
Thanks in advance,
H.
DEMO
var chk=0;
function checkCheckboxes() {
var checkboxes = document.getElementsByName("benefit");
for (var i=0;i<checkboxes.length;i++) {
chk += checkboxes[i].checked?1:0; // count in case we reload
checkboxes[i].onclick=function() { // set up event handler for each
chk+=this.checked?1:-1; // add or subtract one
if (chk > 3) {
console.log(chk,"too many")
this.checked=false;
chk--; // we counted too many
}
}
}
}
function changeBackgroundColor(row,on) {
var id = row.id; // if you need that
row.style.backgroundColor=(on)?"red":"white";
}
window.onload=function() {
var trs = document.getElementById("table1").rows;
for (var i=0;i<trs.length;i++) {
trs[i].onmouseover=function() {
changeBackgroundColor(this,1);
}
trs[i].onmouseout=function() {
changeBackgroundColor(this,0);
}
}
checkCheckboxes();
}
using
<table id="table1">
<tr id="tr1">
<td class="td1"><input name="benefit" value="Bonuses" id="benefit1" type="checkbox"</td>
<td class="td1"><label for="benefit1"> <b>Bonuses</b></label></td>
</tr>
<tr id="tr2">
<td class="td2"><input name="benefit" value="Bonuses" id="benefit2" type="checkbox"</td>
<td class="td2"><label for="benefit2"> <b>Bonuses</b></label></td>
</tr>
<tr id="tr3">
<td class="td3"><input name="benefit" value="Bonuses" id="benefit3" type="checkbox"</td>
<td class="td3"><label for="benefit3"> <b>Bonuses</b></label></td>
</tr>
<tr id="tr4">
<td class="td4"><input name="benefit" value="Bonuses" id="benefit4" type="checkbox"</td>
<td class="td4"><label for="benefit4"> <b>Bonuses</b></label></td>
</tr>
</table>