I am trying to use the ng-repeat directive to create table rows with a list of campaign names.
However, I am not able to get any results, though I am still able to see one of the children of the array displaying correctly.
Here is my view code:
<div class="modal-body">
<p>{{$ctrl.contact.Campaigns[0].CampaignName}}</p>
<tr ng-repeat="campaign in $ctrl.contact.Campaigns">
<label>
{{campaign.CampaignName}}
</label>
</tr>
</div>
I can successfully see the paragraph element above and it shows the expected data, but not the table row elements.
I don't see any errors in the browser console.
How can I make the ng-repeat directive work in the code above?
The problem was that the <tr> / table row element didn't have a parent <table> element containing it.
This is solved by simply adding in table tags around the orphaned <tr> element:
<div class="modal-body">
<table>
<tr ng-repeat="campaign in $ctrl.contact.Campaigns">
<label>
{{campaign.CampaignName}}
</label>
</tr>
</table>
</div>
Related
I'm trying to make an accessible calendar plugin where you can write the date in the input by hand or select it from a table. I'm using WAI-ARIA and I think I'm following the instructions correctly but the Chrome Developer Tools Accessibility audit gives me an error seen below
Instructions:
https://www.w3.org/TR/wai-aria-1.1/#combobox
https://www.w3.org/TR/wai-aria-1.1/#grid
Example:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/grid-combo.html
Error:
https://i.stack.imgur.com/OIX1f.png
My code:
<div class="container">
<label for="comboboxtextbox">the label</label>
<div role="combobox" aria-expanded="true" aria-owns="comboboxgrid" aria-haspopup="grid">
<input role="textbox" aria-multiline="false" id="comboboxtextbox" type="text" aria-controls="comboboxgrid">
</div>
<table role="grid" id="comboboxgrid">
<tbody>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tr>
<td role="gridcell">1</td>
<td role="gridcell">2</td>
<td role="gridcell">3</td>
</tr>
</tbody>
</table>
</div>
The error message is saying that anything with a role of combobox has required child elements but it can’t find them in your markup. There’s been some changes to the combobox role so if you’re working from an older example it’ll be out of date. Try removing the role attributes from both the div and the table, and see if that helps.
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 am trying to achieve the following in angualrjs:
I have multiple information lines, that each can be clicked regardless of the others.
When I click on a line, a div is opened and a table is shown in regarding that line.
My html now looks like this:
<div ng-app="TModule" ng-cloak>
<div class="myDiv" ng-controller="tController as tCtrl">
<h1>Title</h1>
<ul>
<li ng-repeat="option in tCtrl.availableOptions" ng-click="tCtrl.toggleOpen(option.id)">
<div>
<h2>{{option.name}}</h2>
<div ng-show="isOpen(option.id)">
//Table should go here
</div>
</div>
</li>
</ul>
My table template is the same for all lines and should look like this:
<table>
<thead>
<tr>
<th>Header I</th>
...
</tr>
</thead>
<tbody>
<tr ng-repeat...>...</tr>
....
</tbody>
</table>
What I want to happen with clicking on any li item, that it will call a function on the controller which will make an ajax call, and fill the table using a template, with the results receive.
My problem is that I don't know how to fill each table with the same template and to have different information (without using array that will store each information)
Not sure if it is possible in angular and what will be the best way to achieve this?
Each line can be opened together and each line has a different set of information.
I'm trying to add custom column filter (autocomplete, select ...) but can't find how. I tried to override default filter template with a tr-ng-grid-column-filter attribute on a th, but it does not works. Header is changed somehow (title is not bold anymore) and the new template is not used at all.
Is the tr-ng-grid-column-filter right way to do it at all or there is something else?
Data is sorted, paginated and filtered on the server so it does not have any relation to angular or trnggrid client side filtering & formating. So I just want to display some other input on some columns (e.g. select) instead of default input text rendered by a grid.
I'm using angular 1.2.22 with TrNgGrid 3.0.3
There are some samples floating around the net. Here's one:
http://plnkr.co/edit/I6JJQD?p=preview
<table tr-ng-grid='' items='myItems'>
<thead>
<tr>
<th field-name="name"></th>
<th field-name="computedTagsField" display-format="computedTags:gridItem">
<div>
<div class="tr-ng-title">Tags</div>
<div class="tr-ng-column-filter">
<select class="form-control input-sm" ng-options="tag for tag in [null, 'tennis', 'basketball', 'volley']" ng-model="columnOptions.filter"></select>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td field-name="computedTagsField"></td>
</tr>
</tbody>
</table>
I created a directive to implement a custom drop down filter. It, in itself, can be reused on any project, but it will also give you a good working example of how to implement your own custom filter by simply extending TRNG grid.
Tutorial:
http://www.davidcline.info/2015/08/trnggrid-dropdown-column-filter.html
Demo:
http://embed.plnkr.co/w39Xt74pippDajyqUIOD/preview
In my cshtml view I have the following table:
<table>
<thead>
<tr><th>Test</th></tr>
</thead>
<tbody>
<tr ng-repeat="label in labels">
<td>{{label.id}}</td>
</tr>
</tbody>
And when I view the page and inspect the table element in my browser only the table headings are displayed and no rows. Applying ng-repeat seems to comment out the rows automatically as below:
<table class="ng-scope">
<thead>
<tr><th>Test</th></tr>
</thead>
<tbody>
<!-- ngRepeat: label in labels -->
</tbody>
</table>
when I remove ng-repeat="label in labels" and apply a static value in the row cell the row is not commented and displays just fine.
Does anyone knows what could be causing this behaviour?
Upon compilation angular automatically adds the ngRepeat comment to the HTML, in order to indicate that below this comment, the repeated elements will be displayed.
The reason why your tbody doesn't contain any rows, is because your $scope.labels object is empty.