So, in my object index I'm working inside a ng-repeat.
Now, when I click on an object, it should go to its matching id.
How would I do this with Angular?
I got something like this now:
<tr ng-repeat="dossier in dossiers">
<td>
#{{dossier.license_plate}}
</td>
</tr>
Why don't you try ngHref directive
<tr ng-repeat="dossier in dossiers">
<td>
<a ng-href="/dossiers/{{dossier.id}}">#{{dossier.license_plate}}</a>
</td>
<a ng-href="http://www.gravatar.com/avatar/{{hash}}">link1</a>
https://docs.angularjs.org/api/ng/directive/ngHref
Related
I have a table row being populated with the array of Json objects.
I actually want to click one of the row item and move to the next page by also taking the clicked item's id.
My Code:
AngularJS function
$scope.findAllCompanies = function() {
$http.get('http://blahblablah/company/all').
then(function(response) {
$scope.companyList = response.data;
});
}
HTML: traversing the companyList
<tr data-ng-repeat="company in companyList">
<td> {{company.companyId}} </td>
<td> {{company.legalName}} </td>
<td> {{company.dbaName}} </td>
<td> {{company.formation}} </td>
</tr>
So now, If I click on companyId in any row, the page should be redirected to company.html?companyId=anyNum
I am thinking to merge them here, something like this:
Thanks, and looking forward to hear from you.
Using ng-href
<a ng-href="/pages/company?companyId={{company.companyId}}"> {{company.companyId}} </a>
Simple question but i unable to find why in this template, the format-property directive can not access to device?
<table>
<tr ng-repeat="device in devices">
<format-property ng-repeat="property in properties"></format-property>
</tr>
</table>
althought with this template it works:
<table>
<tr ng-repeat="device in devices">
<td ng-repeat="property in properties">
<format-property></format-property>
</td>
</tr>
</table>
I tried scope.device and scope.$parent.device without success.
Here my demo
Edit
I can access to property but not to device. Unlike this question, i have a nested ng-repeat
Here a new demo with an isolated scope
see plunker
I think you must add td inside tr or you can use div.
Also you can check this link for more details.
I have searched a lot for this and couldn't get an appropriate answer. I am sorry if i am asking this question again. I am new to Angular.js
my code:
<table>
<tr>
<th ng-repeat="x in setno" ng-init="parentset=$index">SET {{ x.alpha }}</th>
</tr>
<tr ng-repeat="(parentset,ques) in selected">
<td ng-repeat="x in setno">
<select ng-model="ques" ng-options="y.name for y in topics"></select>{{ques.qid}}
</td>
<td>{{$parent.ques.qid}}hi</td>
</tr>
<tr>
<td ng-repeat="x in setno">
<button ng-click="addques($index,ques.qid)" ng-model="ques.quid">add{{$parent.ques.qid}}</button>
</td>
</tr>
</table>
The ques ng-model is working fine just after the select tag but inside td tag only. How can i use it outside that particular tag.
ie, here:
<td>{{$parent.ques.qid}}hi</td>
and here:
<button ng-click="addques($index,ques.qid)" ng-model="ques.quid">add{{$parent.ques.qid}}</button>?
I have tried $parent and without it, but its not working.
Where am i going wrong?
The select tag has his own scope so you have to extend an object in the parent scope if you want to use "ques" out of the select tag.
To do so, create an object (a $scope variable) in the parent :
$scope.test;
And extends it in the select (the child scope) :
ng.model = "test.ques";
Then you can access "ques" out of the select tag.
I have used ng-repeat numerous times already in the past, but for some reason I cannot yet understand why it is not on the following situation:
I have an array of objects called registers which I am referencing on the ng-repeat but nothing happens.
I know the array is populated because I have seen it on numerous console.log and because it works if I move the ng-repeat over to the <tbody>
<div ng-repeat = "r in registers">
<!-- START HEADER -->
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Denise Watson</td>
</tr>
</tbody> <!-- END HEADER -->
<tbody>
<tr>
<td class="text-center"></td>
<td>
<!-- Summernote Container -->
<div class="js-summernote-air">
<p>End of air-mode area!</p>
</div>
</td>
</tr>
</tbody>
<!-- END TABLE -->
</div>
I was hoping someone could tell me if there is something I may be ignoring.
Thanks in advance.
I think I just ran into this same problem. It stems from <div> not being a valid elment within a <table>.
I'm guessing that since you have <tbody> there, that there is a <table> tag that was left out of your snippet. <div>s aren't allowed in a table, so the browser moves it before the table. In my situation, doing this, causes the angular scope to change so that there was nothing to iterate over. You can verify this by using the developer tools of your browser.
So, my guess is that you probably want to move the ng-repeat onto the <tbody> or <table> tag.
If you want to use ng-repeat in "div" tag means use "span"
inside div tag. instead of using "table" and its sub attributes..
else use your ng-repeat inside "table" or "thead" or "tr" also
it will iterate rows ...
than only ng-repeat will works.
I have a list of mails which I want to show in a grid (<table>). Some of these mails have attachments. For their corresponding rows, I would like to show an attachment icon in the attachment column. For rest, it should be empty.
JsFiddle: http://jsfiddle.net/6s4Z5/
My template is as follows:
<table id="resultTable">
<thead>
<tr>
<th ng-repeat="columnId in schema.columnOrder">
<img src="icon_attach.png" ng-if="columnId == 'hasAttachments'">
{{schema.columns[columnId].displayText}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in results.mails">
<td ng-repeat="columnId in schema.columnOrder">
<img src="icon_attach.png" ng-if="columnId == 'hasAttachments' && row.hasAttachments">
<span ng-if="columnId != 'hasAttachments'" >{{ row[columnId] }}</span>
</td>
</tr>
</tbody>
</table>
where schema.columnOrder is an array of columnIds to be shown in the table.
This template is working but is this the best way to implement this? Moreover, I have to add an extra <span> for ng-if statement. Can that also be removed?
You pretty much can change it to something like:
<span ng-if='your check'><img src=''/>{{row[columnId}}</span>
You could set (in the controller) the value of the column hasAttachments to be the image you want to display there.