Set ng-checked value from two expressions - javascript

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

Related

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

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">

Html datatables data to be accessed in typescript component

I want to access the chosen mfRowsOnPage. For example now it is 10.
Later the user might choose 5 or 15. I need this data in component. I
even want to get which page data is shown to the user. Example 1st
page or 2nd page , so on.
this is my table.
<table class="table" [mfData]="stacklist_table| selectedcolumn | search : searchQuery | filter: addFilter : selected" #stacklist="mfDataTable" [mfRowsOnPage]="10">
<thead>
<tr>
<th *ngFor="let colValues of stacklist.data | column: '' : ''">
<mfDefaultSorter by="{{colValues}}">{{colValues|translate}}</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr draggable *ngFor="let stack of stacklist.data" [dragOverClass]="'drag-over-border'" [dragData]="stack" [class.active]="checkIfStackElementIsSelected(stack)" (click)="setStacklistRow(stack, $event)">
<td *ngFor="let rowValues of stack | row">{{ rowValues }}</td>
</tr>
</tbody>
<tfoot>
<tr style="height: 50px;">
<td colspan="6">
<mfBootstrapPaginator [rowsOnPageSet]="[50,100,150]" style="position:fixed; margin-top: -15px"></mfBootstrapPaginator>
<!-- <mfBootstrapPaginator [hidden]='!hideElement' (dblclick)="eventEmitDoubleClick($event)" [rowsOnPageSet]="totalVisibleCount"></mfBootstrapPaginator> -->
<!-- <input [hidden]='hideElement' [(ngModel)]="newCount" (click)="doneEditing(newCount)" autofocus /> -->
</td>
</tr>
<tr (click)="loadMoreStackElements()">Load more</tr>
</tfoot>
</table>
How do I go about it?
I am new to it and not understanding the way to access this data.
https://www.npmjs.com/package/angular2-datatable
Can you try [attr.mfRowsOnPage]='10' and check if that works.

Unwanted <span class="ng-scope"> s</span>

I keep on getting an unwanted span tag with and "s" in it when viewing in Chrome. I've searched online but I am still stumped. Help please?
Stop AngularJS inserting <span class="ng-scope"></span> using ng-include
Looked at that post. Similar problem but I think my issue is caused by something else. I am not using ng-include.
Let me know if I can provide more details!
Here is the code https://github.com/benhbaik/crm
Here is public/views/users/all.html and a screenshot of the issue below it.
<div class="page-header">
<h1>
Users
<a href="/users/create" class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
New User
</a>
</h1>
</div>
<div class="jumbotron text-center" ng-show="user.processing">
<span class="glyphicon glyphicon-repeat spinner"></span>
<p>Loading Users...</p>
</div>
<!-- GETTING RANDOM SPAN TAG HERE w/ "s" -->
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>_id</th>
<th>Name</th>s
<th>Username</th>
<th class="col-sm-2"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in user.users">
<td>{{ person._id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.username }}</td>
<td class="col-sm-2">
Edit
Delete
</td>
</tr>
</tbody>
</table>
Here is a picture in dev tools.
There's a typo in your code:
<th>Name</th>s

dynamic variable in ng-repeat Angular

My aim is to have a flexible number of tables and the tables being themselves dynamic.
This is my html code so far.
<div ng-repeat="deviceType in vm.devicesType">
<h2 ng-click="collapse=!collapse">My {{deviceType}}s <Strong ng-show="collapse">-</Strong><Strong ng-show="!collapse">+</Strong></h2>
<div ng-show="collapse">
<table ng-table-dynamic="user.controller.js.TableParams(deviceType) with user.controller.js.Columns(deviceType)">
<tr ng-repeat="device in (deviceType)" ng-if="$index==0">
<th ng-repeat="(key,value) in device" >
{{key}}
</th>
</tr>
<tr ng-repeat="device in (deviceType)")>
<td ng-repeat="(key,value) in device">
{{value}}
</td>
<td>
<a ng-click="vm.GetDeviceDetails(relay.id)">Details</a>
</td>
</tr>
</table>
</div>
</div>
The javascript is not the issue as the variables are well evaluated, however for now my output is an array with R e l a y ( in seperate rows ), Relay being a device type.
I would like to have the variable (deviceType) evaluated, when I replace with Relay, I have no issues.
Thank you for your help.

How to speed up rendering table of checkboxes in Angular.js

I'm making a series charting tool. For each series, I have 4 categories. I want the user to be able to choose any combination of series and category to plot.
To accomplish this, I created a bootstrap modal with a table of checkboxes for each series/category combination using Angular.js. It works, but I find the rendering of the modal too slow when there are too many series:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Series Name</th>
<th ng-repeat="col in cols">
{{ col }}
</th>
<th>select all</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(name, insts) in items"
ng-show="([name] | filter:query).length > 0">
<td>{{ name }}</td>
<td ng-repeat="inst in insts">
<input type="checkbox" ng-model="inst.isSelected">
</td>
<td><ui-select-all items="insts" prop="isSelected"></ui-select-all></td>
</tr>
</table>
Plunker demo of what I have: http://plnkr.co/edit/1zmZMpDsGwaKdyL7dFty?p=preview
I'm just learning Angular, so I'm not too sure how to speed this up, or if there is a smarter approach than using a big table of checkboxes.
the best way to speed up any ng-repeat is to use track by $index
<tr ng-repeat="(name, insts) in items track by $index"
ng-show="([name] | filter:query).length > 0">
<td>{{ name }}</td>
<td ng-repeat="inst in insts track by $index">
<input type="checkbox" ng-model="inst.isSelected">
</td>
<td><ui-select-all items="insts" prop="isSelected"></ui-select-all></td>
</tr>

Categories