ng-repeat with hashmap doesn't display anything on my html table - javascript

I am trying to display a table with hashmap values.
my js hashmap is following:
self.userList["user1"] = {sms:true,email:false}
self.userList["user2"] = {sms:false,email:false}
self.userList["user3"] = {sms:true,email:true}
self.userList["user4"] = {sms:false,email:false}
and my view is following:
<tr ng-repeat="(user,value) in editRulesCtrl.userList">
<td>
{{user}}
</td>
<td>
<md-checkbox ng-model="{{value.sms}}"></md-checkbox>
</td>
<td >
<md-checkbox ng-model="{{value.email}}"></md-checkbox>
</td>
</tr>
Not sure what I am doing wrong, but table shows up empty.

This should work, only problem I can see is, ng-model needs variable name, it does failed if you try to pass {{}}(interpolation) to it.
<tr ng-repeat="(user,value) in editRulesCtrl.userList">
<td>
{{user}}
</td>
<td>
<md-checkbox ng-model="value.sms"></md-checkbox>
</td>
<td>
<md-checkbox ng-model="value.email"></md-checkbox>
</td>
</tr>
Plunker

<tr ng-repeat="(user,value) in userList">

Related

Angular repeat in tables

I have multiple source of income that I want displayed into a table. I will be importing more than 2 values and I want to be able to put them side by side for easy comparing. However, the code below is definitely not working.
https://plnkr.co/edit/Vkcc9YUnEIc3PuuS8Yv3?p=preview
<table>
<tr>
<td ng-repeat="type in informationNames">{{type}}>
</td>
<td ng-repeat="type in informationValues1">{{type}}>
</td>
<td ng-repeat="type in informationNameValues2">{{type}}>
</td>
</tr>
</table>
I found this but this doesn't really apply since it is only 1 array and I'll be importing 2+.
Angular ng-repeat in table
you could place each repeat into a different row so your code would look like:
<table>
<tr>
<td ng-repeat="type in informationNames">{{type}}
</td>
</tr>
<tr>
<td ng-repeat="type in informationValues1">{{type}}
</td>
</tr>
<tr>
<td ng-repeat="type in informationNameValues2">{{type}}
</td>
</tr>
</table>
this way they are all listed veritally
if you want them horizontally and you know all of the list are the same length you can do it like this:
`
<table>
<tr ng-repeat="name in informationNames">
<td>{{name}}
</td>
<td>
{{informationValues1[$index]}}
</td>
<td>
{{informationNameValues2[$index]}}
</td>
</tr>
</table>

How to $watch if checbox is checked or uncheck in ng-repeat table

I currenty have a watch function but it only watch when I click on the select all checkbox. on any individual row when I click the check box the watch function doesn't activates.
Script side code:
$scope.$watch("checkboxes.checked", function(bool) {
}
HTML code:
<table ng-table="testTable">
<tbody>
<tr ng-repeat="data in $data">
<td data-title="Selection">
<input type="checkbox" ng-model="checkboxes.items[data.id]"/>
</td>
<td data-title="data">
{{data.name}}
< /td>
</tr>
</tbody>
</table>
How do I watch every individual row's checkbox?
Thanks.
you can try to use ngchange as watching a whole collection of data can be heavy lifting.
<table ng-table="testTable">
<tbody>
<tr ng-repeat="data in $data">
<td data-title="Selection">
<input type="checkbox" ng-model="checkboxes.items[data.id]" ng-change="doSomething(data.id)"/>
</td>
<td data-title="data">
{{data.name}}
< /td>
</tr>
</tbody>
</table>
in your controller,
$scope.doSomething = function(dataId) {
console.log('checkbox' + data.id + ' status');
console.log(checkboxes.items[data.id]);
}
you can improvise from there.

angularjs - update table column when model changes

i have a dataTable that i define dynamically, based on my controller's model, as following:
<tbody>
<tr ng-repeat="rec in grid.records">
<td ng-repeat="col in grid.columns"
ng-init="value=rec[col.name]">
<span ng-model="rec[col.name]">{{value}}</span>
</td>
</tr>
</tbody>
why doesn't dataTable column values is updated when model changes?
Try this:
<tbody>
<tr ng-repeat="rec in grid.records">
<td ng-repeat="col in grid.columns">
<span>{{rec[col.name]}}</span>
</td>
</tr>
</tbody>

Get index of row in table using angularJS

I want to get index of each row in this table using angularJS
<table>
<tbody>
<tr ng-repeat = "cust in costomers">
<td> cust.name </td>
<td> cust.phone </td>
<td> cust.address </td>
</tr>
</tbody>
I want to have a variable that contains the index of each row not to just display it
you can use $index
<tr ng-repeat = "cust in costomers">
<td> {{$index}} </td>
</tr>
I think you should be using the <tr> tag to place your ng-repeat directive.
You can use ng-repeat's $index property. See ng-repeat's documentation.
<table>
<tbody>
<tr ng-repeat = "cust in costomers">
<td> {{$index}} </td>
<td> {{cust.name}} </td>
<td> {{cust.phone}} </td>
<td> {{cust.address}} </td>
</tr>
</tbody>
</table>
$index works fine when the ng-repeat is not filtered. If you use a filter, it might be better to use indexOf(). Example:
<input type="text" ng-model="filterCustomers" placeholder="search...">
<table>
<tbody>
<tr ng-repeat = "cust in costomers | filter:filterCustomers">
<td> {{costomers.indexOf(cust) + 1}} </td>
</tr>
</tbody>
</table>
If you want to use your own variable as index you can use this:
<table>
<tbody>
<tr ng-repeat = "(index, cust) in costomers">
<td> {{index}} </td>
<td> cust.name </td>
<td> cust.phone </td>
<td> cust.address </td>
</tr>
</tbody>

Set ng-checked value from two expressions

Here are my controller scopes
$scope.all = [
{'ID':'1','NAME':'BOB','BMW':1,'AUDI':'0'},
{'ID':'2','NAME':'PETE','BMW':'0','AUDI':'1'}
];
$scope.cars = [
{'ID':'1','CAR':'BMW'},
{'ID':'2','CAR':'AUDI'}
];
Here is my view
<table class="table">
<thead>
<tr>
<th>Name</th>
<th ng-repeat="c in cars">{{c.CAR}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in all">
<td>{{ u.NAME }}</td>
<td ng-repeat="c in cars">
<input type="checkbox" ng-checked="{{ u.c.CAR }}">
</td>
</tr>
</tbody>
</table>
Now i want to check the checkboxes based on the value of the cars ng-checked="{{ u.c.CAR }}" but i am not able to set it. And i am not getting any errors in firebug. Does angularjs provide such expressions or not? If now, what is other solution?? I want it to be set in the view itself
Update: I should have done this long back. Here is my JSFIDDLE
If I understand correctly, you want to resolve the 1 or 0 as true and false. You should be able to do something like this:
<tr ng-repeat="u in all">
<td>{{ u.NAME }}</td>
<td ng-repeat="c in cars">
<input type="checkbox" ng-checked="u[c.CAR] == 1">
</td>
</tr>
*Note: you don't need to interpolate { } inside ng-checked.
Here is an updated fiddle.
Yes, your expression is just a bit off:
ng-checked="u[c.car] == 1"
There is a mistake in your expression. Try this:
<tr ng-repeat="u in all">
<td>{{ u.NAME }}</td>
<td ng-repeat="c in cars">
<input type="checkbox" ng-checked="u[c.CAR].toString() == '1'">
</td>
</tr>
I would also suggest ensuring that your data is either all strings or all integers, rather than a mix of both.
Maybe you can solve your problem revisiting your ng-repeat, if you write something like u as object in all, instead of u in all, you can use the u items in the way you're trying to, whatever take a look at this module of angular ui ng-grid it has a lot of option and it can acomplish your needs
#vishwakumar that's a plunker for you, youneed to download the css too to setting in the right way the row height but that's a way to solve you're problem and trust me, ng-grid can solve a lot of problems other than that plunker
EDIT
i have put on it the check too, if you need the comment to understand the code in the plunker write it in the comment of the answer and i'll do it
That is your answer. You have some lame quote in your "all" list! Plus, your ng-repeat template is wrongly written.
Your $scope should be initialized as
function DefaultCtrl($scope) {
$scope.all = [
{'ID':'1','NAME':'BOB','BMW':'1','AUDI':'0'},
{'ID':'2','NAME':'PETE','BMW':'0','AUDI':'1'}
];
$scope.cars = [
{'ID':'1','CAR':'BMW'},
{'ID':'2','CAR':'AUDI'}
];
}
Your $scope's DOM should be
<div ng-app="" ng-controller="DefaultCtrl">
<table class="table">
<thead>
<tr>
<th>NAME</th>
<th ng-repeat="c in cars">{{c.CAR}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in all">
<td>{{ u.NAME }}</td>
<td ng-repeat="c in u.BMW">
<input type="checkbox" ng-checked="{{ c }}">
<td ng-repeat="c in u.AUDI">
<input type="checkbox" ng-checked="{{ c }}">
</td>
</td>
</tr>
</tbody>
</table>
</div>
Your answer should be

Categories