I have a navbar on my page that has an input on it that I want to search a view, that should load in index.html after the user types in their search items. I can only figure out how to search with an input if it's in the same page that the table of ng-repeat items is in. Is there a way to search the table outside of the view? I've created a plnkr. It doesn't work. I'm not sure how to make it work. http://plnkr.co/edit/nqChzn5OATNMeSZL7ItJ?p=preview
Here is some of my code:
navbar
<input type="text" class="form-control" placeholder="Search" ng-model="vm.query">
Here is my table where the data displays.
<table ng-if="query" class="table table-hover table-responsive" >
<thead>
<tr>
<th>
({{filteredResults.length}}) Results Found
</th>
</tr>
<tr>
<td>Acc. ID</td>
<td>Acc. Name</td>
<td>Acc Address</td>
<td>City</td>
<td>Zip</td>
<td>Phone</td>
<td>Parent Name</td>
<td>Account Type</td>
<td>Account Status</td>
<td>Credit Term</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="result in vm.results | filter:query as filteredResults">
<td>{{ result.accountId }}</td>
<td>{{ result.accountName }}</td>
<td>{{ result.address }}</td>
<td>{{ result.city }}</td>
<td>{{ result.state }}</td>
<td>{{ reuslt.zip }}</td>
<td>{{ result.phone }}</td>
<td>{{ result.parentName }}</td>
<td>{{ result.accountType }}</td>
<td>{{ result.accountStatus }}</td>
<td>{{ result.accountStatus }}</td>
</tr>
</tbody>
</table>
Is it possible to do what I want to do?
I've looked at your plunker and I don't believe that your code hasn't initialized angular. I can't see an ng-app tag anywhere in your code.
That a side, you will be able to use any input to filter/search (via. various implementations) so long as the input and table are contained with your ng-app and controller parts of the DOM. Otherwise you won't be able to access it the controller.
Can I suggest that you distill your question down? give the smallest amount of code that demonstrates your problem.
here's a rough outline:
<body ng-app="app" ng-controller="cntrl">
<!-- nav bar -->
<div>
<input ng-model="filterVal"/>
</div>
<!-- table -->
<div>
<table>
<tr ng-repeat="r in data.rows | filter:filterVal">....</tr>
</table>
</div>
</body>
Here's a plunker where the default filter functionality is working: http://plnkr.co/edit/GDJs5xTCpqq48SDFTk67
If you need to have your nav bar outside of your app/controller or in an different controller (etc.) then there are solutions to this.
Assuming you are using ui-route, this is how to use a service to communicate between controllers:
functioning example:
http://plnkr.co/edit/fZZLUvlHO9zUFwQYd1an?p=preview
Eggheads video:
https://egghead.io/lessons/angularjs-sharing-data-between-controllers
Related
i am new in AngularJS and working on a small module in a project. I want to show two div based on condition. The condition is if {{ merchandiser.popCode }} means popcode value exist in database then show div1 else show div2. Here is my code snippet
<tr ng-repeat="merchandiser in data.merchandisers | filter: filter()">
<td title = "({{ merchandiser.id }})">{{ $index + 1 }}</td>
<td>{{ merchandiser.createdOnDate }}</td>
<!--<td>{{ merchandiser.createdOnTime }}</td>-->
<td>{{ merchandiser.pjpCode }} </td>
<td>{{ merchandiser.sectionCode}}</td>
<td>{{ merchandiser.popCode }}</td>
<td>{{ merchandiser.popName }}</td>
<td>{{ merchandiser.popStatus }} </td>
<td>{{ merchandiser.channel }} </td>
</table>
<div class="row">
<div id = "div1" class = "col-sm-4" >
<table class = "table">
<tr class="colour">
<th>POP Classification</th>
<td>{{ popData.popClassification }}</td>
</tr>
<tr>
<th class="colour">Owner's Name</th>
<td>{{ popData.ownerName }}</td>
</tr>
</div>
<div id = "div2" class = "col-sm-4" >
<table class = "table">
<tr>enter code here
<th class="colour">Owner's Name</th>
<td>{{ popData.ownerName }}</td>
</tr>
</div>
Try this :
<div id="div1" ng-if="merchandiser.popCode">
<!-- Condition true show Div1 block content -->
</div>
<div id="div2" ng-if="!merchandiser.popCode">
<!-- Condition false show Div2 block content -->
</div>
You can use ng-if for if(){..} else{..} logic in Angular template.
For your current situation,
<div id="div1" ng-if="merchandiser.popCode">
<!-- If block i.e div1 -->
</div>
<div id="div2" ng-if="!merchandiser.popCode">
<!-- Your Else Block i.e div2 -->
</div>
I'm developping web appliccation using AngularJS.
Applicattion show a list of items in a table.
This is the code which prints the table:
<table>
<tr ng-repeat="x in content.listaOperaciones>
<td>{{ x.idOperacion }} </td>
<td>{{ x.idGan }}</td>
<td>{{ x.idEm}}</td>
<td>{{ x.idGate}}</td>
<td>{{ x.idRf }}</td>
<td>{{ x.peso }}</td>
<td>{{ x.duracion }}</td>
<td>{{ x.timestampInicioOperacion | date:'dd-MM-yy HH:mm'}}</td>
</tr>
</table>
This is how the table looks like once is printed in html.
I would like to implement multiple filters in each element in table by using some variables that can be accessed by user.
My idea is to filter each elements inside "ng-repeat" statement by using "ng-show" or "ng-if" statement.
This is the html code where user can modify variables:
<input ng-model="tiempoMinimo">
<input ng-model="$ctrl.PesoMinimo">
<input ng-model="$ctrl.PesoMaximo">
And this is how I'm modifying the table constructor:
<tr ng-repeat="x in content.listaOperaciones | orderBy : $ctrl.orderProp | filter:$ctrl.Busc" ng-if="x.peso > $ctrl.PesoMinimo && x.peso < $ctrl.PesoMaximo">
<div ng-show="x.duracion < $parent.tiempoMinimo">
<td>{{ x.idOperacion }} </td>
<td>{{ x.idGan }}</td>
<td>{{ x.idEm}}</td>
<td>{{ x.idGate}}</td>
<td>{{ x.idRf }}</td>
<td>{{ x.peso }}</td>
<td>{{ x.duracion }}</td>
<td>{{ x.timestampInicioOperacion | date:'dd-MM-yy HH:mm'}}</td>
</tr>
Filtering by using "ng-if" inside "ng-repeat" clausule is working.
Filtering by using "ng show" nested in "ng-repeat" loop is not working...
Since I want to use multiple filters (maybe 10 or 20) I would prefer using "ng-show" directive nested inside "ng-repeat" loop, so code would like easier to understand...
Here you have fiddle with source code working:
https://jsfiddle.net/DSG00/f94sjtty/
Thank you in advance.
Didac
Your fiddle isn't working because you can't use div inside tr. Move your ng-show to the tr element where your ng-repeat is. Also change the condition like that !$parent.tiempoMinimo || x.peso > $parent.tiempoMinimo so when your input is empty it won't hide the whole table.
I'm trying to mix a table with angular-ui's accordion but I can't figure out a way to do it.
I'm not a pro, writing directives. I wonder if such a bridge exist. To achieve something like this :
<table class="table table-hover table-condensed" thead>
<thead>
<tr>
<th>{{ data.profile.firstname }}</th>
<th>{{ data.profile.lastname }}</th>
<th>{{ data.profile.email }}</th>
<th>{{ data.profile.company_name }}</th>
<th>{{ data.profile.city }}</th>
</tr>
</thead>
<tbody accordion close-others="true">
<!-- <tr ng-repeat="client in clients" ng-click="goTo('profile/' + client.username);"> -->
<tr ng-repeat="client in clients" accordion-group is-open="client.isOpen">
<accordion-heading>
<td>{{ client.firstname }}</td>
<td>{{ client.lastname }}</td>
<td>{{ client.email }}</td>
<td>{{ client.company_name }}</td>
<td>{{ client.city }}</td>
</accordion-heading>
Accordion Content
</tr>
</tbody>
</table>
Though it's not working :( Is there anyone who succeded to achieve something like this ?
The result I'm looking for is for when I click on a line in the table, it does the same behavior of an accordion.
In my case I made it a bit primitive but maybe that would be a good solution for you as well. Look:
<tbody ng-repeat="person in people | orderBy:predicate:reverse" >
<tr ng-click="isOpen=!isOpen">
<td>{{person.name}}</td>
<td>{{person.job}}</td>
<td>{{person.age}}</td>
<td>{{person.grade}}</td>
</tr>
<tr ng-if="isOpen">
<td>Just an empty line</td>
</tr>
</tbody>
1) You can try div instead of table for main accordion. It works for me.
2) And here is the accordion table example done in JSFiddle below, i hope it will help you. http://jsfiddle.net/Pixic/VGgbq/
I'm tring to figure out how I could us the ngSwitch with ngRepeatStart and End on two table rows, where second row is only shown when you click on the top one.
Here's what I've got and want to make work (doesn't work):
<tr
data-ng-repeat-start="user in users | filter : { name: search, active: searchActive }"
data-ng-click="selectUser(user)"
data-ng-switch on="isSelected(user)">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.active }}</td>
<td>{{ user.dob | date: 'EEEE, dd MMMM yyyy' }}</td>
</tr>
<tr data-ng-repeat-end data-ng-switch-when="true">
<td colspan="4">
{{ user.description }}
</td>
</tr>
and here's what works:
<tbody
data-ng-repeat="user in users | filter : { name: search, active: searchActive }"
data-ng-click="selectUser(user)"
data-ng-switch on="isSelected(user)">
<tr>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.active }}</td>
<td>{{ user.dob | date: 'EEEE, dd MMMM yyyy' }}</td>
</tr>
<tr data-ng-switch-when="true">
<td colspan="4">
{{ user.description }}
</td>
</tr>
</tbody>
I would like to avoid the wrapping tbody tag and instead use ngRepeatStart / End.
Is there a way of modifying my first example to make it work?
Don't use ng-switch, just use ng-show or ng-if. Here's a plunker
Edit
Okay, I guess if you really want you can use ng-switch, though I would suggest not doing it if all you're doing is checking true/false. Here's the updated plunker. The trick is that the switch needs to be on the second <tr>, and the ng-switch-when needed to be on the <td>.
Now if you need each switch to be a table row, then you're just going to have to use ng-if. The ng-switch attribute needs to be on the parent of all the ng-switch-when's. That's why the switch only works when you put it on <tbody>, or when you switch over <td>'s.
I've got tabular data loaded in AngularJS app. I want to display them in a table. But I also want to have detail view for some rows. Something like:
<table>
<tr ng-repeat="datum in data">
<!-- if datum.showDetail => detail view -->
<td colspan="N">
<h1>{{ datum.field1 }} <small>{{ datum.field2 }}</small></h1>
...
<p>{{ datum.fieldN }}</p>
</td>
<!-- else => row view -->
<td>{{ datum.field1 }}</td>
<td>{{ datum.field2 }}</td>
...
<td>{{ datum.fieldN }}</td>
</tr>
</table>
What's the Angular way of doing this?
Why not just adding ng-show and ng-hide directives to the td's?
<table>
<tr ng-repeat="datum in data" >
<!-- if datum.showDetail => detail view -->
<td colspan="N" ng-show="datum.showDetail">
<h1>{{ datum.field1 }} <small>{{ datum.field2 }}</small></h1>
...
<p>{{ datum.fieldN }}</p>
</td>
<!-- else => row view -->
<td ng-hide="datum.showDetail">{{ datum.field1 }}</td>
<td ng-hide="datum.showDetail">{{ datum.field2 }}</td>
...
<td ng-hide="datum.showDetail">{{ datum.fieldN }}</td>
</tr>
</table>
Also note that, in case you're using the Angular UI extensions, the ui-if directive would probably be a better fit, since it would actually remove the unused td's from the table, instead of just hiding them, like ng-hide.