I am trying to display an icon in a table according to data from a database. I have a function that calls a query and returns a boolean if that data exists, if it does exist I would like to display an icon on a table. The problem I'm running into is that when I call that function, the function is executed infinite times and I'm not really sure why this is happening. Any help would be highly appreciated!
This is the table that will be displaying the icon:
<table class="table table striped">
<thead>
<tr>
<th> ... </th>
<th> Exists? </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in myList">
<td> ... </td>
<td>
<i ng-show="callFunctionThatReturnsBoolean(item)" class="glyphicon glyphicon-thumbs-up" aria-hidden="true">
</i>
</td>
</tr>
</tbody>
</table>
You can use ng-show. When the ng-show condition satisfies based on the data then show the icon else don't.
I have written small piece of code based on your requirement.
In view,
<td>
<span ng-show='item.flag'><i class="glyphicon glyphicon-user"></i></span>
{{item.flag}}
</td>
Update:
Updated plunker to use method for ng-show.
Working Plunker
The problem is that ng-show should not be bound to a function call as it calls your function in every digest cycle: https://stackoverflow.com/a/20915253/2419215.
But I guess the best approach would be to send back the model from the backend in its final version and don't make queries like this for certain list elements.
Related
I have a web app with a view that renders a list of items, where the user is intended to select multiple rows, by means of a checkbox at the start of each row, and then subsequently invokes an action on those rows. My question is: what is the best practice for making this accessible? My first-draft Html looks something like this (it uses Angular.js directives, but that is not of concern here).
<table>
<tbody>
<tr ng-repeat="item in collection.items">
<td class="checkbox">
<input type="checkbox">
</td>
<td tabindex="0">
{{item.title}}
</td>
</tr>
</tbody>
</table>
(My decision to use table, despite there being just one column other than the checkboxes, is because I also need a multi-column 'table' view of the same information. That is not my main concern here).
When I ran an accessibility-checker tool over this, it complained that the checkboxes had no label. But it doesn't strike me as sensible to add an artificial label (e.g. a row number) to it. Should I be using row-scope, perhaps, to make the check-box into a for the row?
You could add an unique id to each input and create a label for that input. $index is a ng-repeat iterator offset of the repeated element (0..length-1).
<table>
<tbody>
<tr ng-repeat="item in collection.items">
<td class="checkbox">
<input type="checkbox" id="{{'item-' + $index }}">
</td>
<td>
<label for="{{'item-' + $index}}">
{{item.title}}
</label>
</td>
</tr>
</tbody>
</table>
Can someone help me on this? Below is my code and the problem explanation.
<table>
<thead>
<tr>
<th>Icon</th>
<th>Name</th>
<th>Details</th>
</tr>
</thead>
<tbody ng-repeat="category in editor.categories">
<tr>
<th>{{category.categoryName}}</th>
</tr>
<tr ng-repeat="feature in category.features"> // Question?
<td>{{feature.iconImg}}</td>
<td>{{feature.featureName}}</td>
<td>{{feature.details}}</td>
</tr>
<tr ng-if="feature.id==1"> // condition 1
</tr>
<tr ng-if="feature.id==2"> // condition 2
</tr>
</tbody>
</table>
Now, let me explain the problem. I have a group of Categories. Each and every category as a group of features.
Now my question is, how can these feature for every category can be displayed based on the ng-if condition. i.e., the <tr> at condition 1 should be displayed only if feature.id==1 and same goes for condition 2 as well only if feature.id==2.
Q. How do I include my ng-if condition based on the different conditions?
Your help is very much appreciated.
Use both ng-if and ng-repeat within one tag:
<tr ng-repeat="feature in features"
ng-if="feature.id === 1" >
</tr>
Or, if you want to conditionally display some templates you may use ng-switch for example:
<tr
ng-repeat="feature in features"
ng-switch="feature.id" >
<span ng-switch-when="1"></span>
<span ng-switch-when="2"></span>
</tr>
check ng-switch and ng-switch-when
https://docs.angularjs.org/api/ng/directive/ngSwitch
Regards
I am trying to add search box in my angular template where user can type any character and system will filter data from different tables based on user input. If no student found than i want to show message 'No matching student found'
Here what i am trying to do.
Problem i am facing is
It always show 'No matching student found message' regardless of search outcome.
<div>
<input type="text" ng-model="searchStudent">
<div>
<div ng-repeat="studentPermissions in studentPermissions">
<div ng-repeat="student in studentPermissions.entities">
<table>
<thead>
<tr>
<td >Student</td>
<td>{{student.StudentName}}</td>
</tr>
<tr>
<th></th>
<th ng-repeat="permission in student.entityStudents[0].userPermissions"><div><span>{{permission.Name}}</span></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in student.entityStudents | filter:searchStudent">
<td>{{student.FirstName}} {{student.LastName}}</td>
<td ng-repeat="permission in student.userPermissions">
<input ng-model="permission.Checked" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div ng-show="!(student.entityStudents | filter:searchStudent).length">
No match student found
</div>
Pls give me plunkr that will help me to answer your question
I think the problem is you directly wrote no matching found you haven't wrote {{student.entityStudents}} or whatever your variable name is
Here is the problem a typo <div ng-repeat="studentPermissions in studentPermissions"> you having same name for both of the varibles
I have resolved this issue by global scope variable in controller based on search outcome and than showing / not showing message on UI.
I am getting the data for customers and displaying in on table (ng-repeat) on the main page. The main page also has search option which filter the data by a particular customer ID.
<table id="searchResults" class="table table-bordered">
<tr>
<th>Klantnummer</th>
<th>Voorletters</th>
<th>Tussenvoegsel</th>
<th>Achternaam</th>
<th>Geboortdatum</th>
<th> Actief Sinds</th>
</tr>
<tr ng-repeat="data in allData | filter:kvk">
<td>{{data.kvk}}</td> //this is the customer ID
<td>{{data.voorletters}}</td>
<td>{{data.tussenvoegsel}}</td>
<td>{{data.achternaam}}</td>
<td>{{data.geboortedatum}}</td>
<td>{{data.actief}}</td>
</tr>
</table>
The result I want to reach is that when a user clicks on the customer ID (which is one of the rows on the table displayed), a new view should open, where more details about that particular customer can be seen. I know basics of routing, but I can not get the best way to solve this problem, as there are many customers!
How can I give each customer ID, a different view that shows detail of that customer? What tools does Angular have for that? Just need a rough idea how to approach this problem using AngularJS!
Well you could either redirect user to a 'show' page like so:
<table id="searchResults" class="table table-bordered">
<tr>
<th>Klantnummer</th>
<th>Voorletters</th>
<th>Tussenvoegsel</th>
<th>Achternaam</th>
<th>Geboortdatum</th>
<th> Actief Sinds</th>
<th></th>
</tr>
<tr ng-repeat="data in allData | filter:kvk">
<td>{{data.kvk}}</td> //this is the customer ID
<td>{{data.voorletters}}</td>
<td>{{data.tussenvoegsel}}</td>
<td>{{data.achternaam}}</td>
<td>{{data.geboortedatum}}</td>
<td>{{data.actief}}</td>
<td><a ng-click="viewCustomer(data.kvk)" class="btn btn-xs btn-success"><span class="glyphicon glyphicon-search"></span></a></td>
</tr>
</table>
then in your controller:
$scope.viewClient = function(id) {
//path to your view using id
};
or else create a hidden table in the same view and show upon button click. I am using bootstrap accordion for sample purposes.
<table id="searchResults" class="table table-bordered">
<tr>
<th>Klantnummer</th>
<th>Voorletters</th>
<th>Tussenvoegsel</th>
<th>Achternaam</th>
<th>Geboortdatum</th>
<th> Actief Sinds</th>
<th></th>
</tr>
<tr ng-repeat="data in allData | filter:kvk">
<td>{{data.kvk}}</td> //this is the customer ID
<td>{{data.voorletters}}</td>
<td>{{data.tussenvoegsel}}</td>
<td>{{data.achternaam}}</td>
<td>{{data.geboortedatum}}</td>
<td>{{data.actief}}</td>
<td><a data-toggle="collapse" data-target="#{{data.kvk}}"></a> </td>
</tr>
<tr>
<td>
<div class="accordion-body collapse" id="{{data.kvk}}">
<!-- your content here -->
</div>
</td>
</table>
hope it helps.
I have a couple of arrays and am looping through them to build a table. The first header row is an array of column names and the second a row of select boxes that the user will use to select to map to the above column names
<h2>CSV Parser</h2>
<div class="alert alert-info" ng-if="helpText">
{{helpText}}
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th ng-repeat="col in data.cols track by $index">{{col}}</th>
</tr>
<tr>
<th ng-repeat="col in data.cols track by $index">
<select class="form-control"
ng-options="colToMap as colToMatch for colToMatch in colsToMatch"
ng-change="setColMap($index,colToMap)"
ng-model="lastFieldSet[$index]">
<option value="">Select Field</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data.rows track by $index">
<td ng-repeat="text in row track by $index">{{text}}</td>
</tr>
</tbody>
</table>
When I change any of the selects the change function does not fire at all but if I change it to a click, it fires. At no time does the lastFieldSet[] model get updated.
Any ideas as to what is going on here?
To expand on the answer by #worldask:
An ng-change expression is only fired when there is a input value change that results in a new value for the model. It is for this reason why ng-change only works on input. Basically, in your code angular does not know when ngChange should be fired because there is not a value change to the model.
according to offcial api document, ng-change only works on input
Evaluate the given expression when the user changes the input.