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.
Related
I am new to front end programming so hoping to get some guidance. I am developing an application using HTML AngularJs which uses ng-repeat and ng-model and populates multiple rows based on the data in the database for a user. Each row has static data coming from DB (returned as object via restAPI) and dynamic select option for user selection. Select option is hardcoded in app.js and linked to model on HTML for DB update upon selection using update button. Issue is when I select any value from list in one row, this is reflected in the select option on other row. Each row has its own button and i can see update function is working at row level.
Below is HTML and js files
<body>
<h1 align="center">User Tracker</h1>
<div ng-controller="MainController as main">
<div>
<p>Please Enter ID </p>
<p>
<input type="text" ng-model="main.model.userName"></input>
<button ng-click="main.model.getOrgList()">List Org List</button>
</p>
</div>
<hr ng-show="main.model.formSubmitted"></hr>
<div>
<table class="table table-bordered" border="1" ng-show="main.model.formSubmitted">
<thead>
<tr>
<th>ID</th>
<th>User Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="org in main.model.orgList" id="{{org.id}}">
<td>{{org.id}}</td>
<td align="center">{{org.user}}</td>
<td align="center">
<select ng-model="main.model.selectedRecord.appCurrentStateSelected ">
<option ng-repeat=" option in main.model.appCurrentStateList " value ="{{option.value}}" id="{{option.id}}"> {{option.name}} </option>
</select>
</td>
<td>
<button ng-click="main.model.updateAppDetailsList({id:org.id,userName:org.name,appCrntState:main.model.selectedRecord.appCurrentStateSelected})">Update</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
Full HTML and JS file is here - https://jsfiddle.net/4jbtL0cj/
You are updating the same object which you have set as ng-model for each row (appCurrentStateSelected). This will update the same object and hence affect all rows as the same is set as ng-model for all rows. The ng-model should be an array or array of objects and then it should be set to array[$index], so that the ng-model is seperate for each row ($index is the index of ng-repeat). This is demonstrated in below plunker. You can do the same changes to your code.
http://plnkr.co/edit/FdWJyzNfbISa9NKFsCqt?p=preview
<td><select ng-model="selected[$index]" ><option ng-repeat="d in dropd" value="{{d.value}}" id="{{d.id}}">{{d.name}}</option></select></td>
hi all i am using angularjs Mean Stack . now i bind the data in html table using ng-repeat it's work's nice and i have add one functionality name is called filter option but its not woking because i stored id values into db but when i bind show the values related to that id now in db there is id and show related values now filter working based on that id only not filtered by showing text i need filter by showing values
Thanks Help
code
<table class="table table-striped table-bordered table-list" >
<thead>
<tr>
<th style="width: 25%" align="center">
Name
</th>
<th style="width: 30% " align="center">
IsActive?
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="RoleNameID" ng-model="Manage_Role1.RoleName" placeholder="search" class="searchbox" />
</td>
</tr>
<tr dir-paginate="Manage_Role in Manage_Roleser | itemsPerPage:8 | filter:Manage_Role1 | orderBy:orderByField:reverseSort " ng-class-odd="'odd'">
<td >
<span e-ng-change="applyHighlight($data)" editable-text="Manage_Role.RoleName" ng-attr-title="{{Manage_Role.RoleName}}"e-form="rowform" >
{{ Manage_Role.RoleName || 'empty' }}
</span>
</td>
</span>
</tr>
</tbody>
</div>
</table>
Here i stored the role id into db but i will show name based that id it's wokring fine but filter woking based id i want filter based displayed values
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 new to AngularJS and have a pretty basic problem I guess.
I have a drop-down list and based on the selection I want a table underneath to update with the belonging information.
<div ng-controller="RightCtrl as right">
<select ng-model="right.selectedModule">
<option ng-repeat="module in right.modules" value="{{module.id}}">{{module.name}}
</option>
</select>
<table>
<thead>
<th>Right name</th>
<th>Description</th>
</thead>
<tbody ng-repeat="module in right.modules | filter: right.isCurrent">
<tr ng-repeat="selRight in module.rights">
<td right-id="{{selRight.id}}">{{selRight.name}}</td>
<td>
{{selRight.description}}
</td>
</tr>
</tbody>
</table>
</div>
I have a jsfiddle (http://jsfiddle.net/EN3S9/) and appreciate every help. Probably I am not completely understanding the concept yet.
I think what you are looking for is to filter based on the selected object like:
<tbody ng-repeat="module in right.modules | filter:right.selectedModule">
Here is the full demo:
Online Demo
I'm working on a small 'Shopping Site' college project...I had created everything but stucked at one Problem.
There is a content part aligned center in my page where i have a table for Product name,Price and Add to cart in consecutive rows...
<div id="Content">
<table id="ContentTable">
<tr>
<td id="iphone5"><img class="thumbnail" src="mobile_img/iphone-5.jpg"></td>
<td><img class="thumbnail" src="mobile_img/Lumia-920.jpg"> </td>
<td><img class="thumbnail" src="mobile_img/blackberry-curve-9300.jpg"> </td>
<td><img class="thumbnail" src="mobile_img/header.jpg"> </td>
</tr>
<tr>
<td>$ 5767435</td>
<td> $ 2343456</td>
<td> $ 123123</td>
<td>$ 345345</td>
</tr>
<tr class="productdetails">
<td>Add to my cart</td>
<td>Add to my cart</td>
<td>Add to my cart</td>
<td>Add to my cart</td>
</tr>
</table>
</div>
Problem is that, how could i attach product details to 'Add to cart' link below them and send them to other page, which is to be stored in database when 'Add to Cart' below them is clicked...
well you can make a seperate table in database containing the item id,item name or link to the image (or any other way to store images), and the price.
in the page where you want to display, pull the values from the database and put it in a form. so that it would look like:
<form name="something" action="Add_to_Cart.jsp" method="post">
<tr>
<td><input type="checkbox" name="item" value="<%item_id%>"></td>
<td><%Image link/item name 1%></td>
<td><%price 1%></td>
</tr>
<tr>
<td><input type="checkbox" name="item" value="<%item_id%>"></td>
<td><%Image link/item name 2%></td>
<td><%price 2%></td>
</tr>
.
.
.
and finally at the end a submit button with showing Add to Cart..
<input type="submit" name="Getthis" value="Add to Cart"/>
</form>
and then retrive the values like this
String items[]= request.getParameterValues("item");
look for reference: http://www.devmanuals.com/tutorials/java/jsp/multiplecheckbox.html
so now you will have the id's of the item selected and can easily add to cart..
(ps. the codes are just snippets)