I'm getting incomplete values when trying to use ng-model + text input as search bar.
As an example : When I write "li" in the text input I get the results back "B Lifting", but when I try to write "lifting" it will show no results. If I write "kl" I can get up "Gulklokken", but if I search for "Gulklokken" it won't show the result.
I can't seem to figure out the reason for it.
Code for search bar :
<div id="searchBar" class="input-group input-group-lg">
<input type="text" ng-model="search.hovedkunde" class="form-control" placeholder="Search here" ng-focus="focused = true" ng-blur="focused = false">
</div>
Code to display results :
<div class="col-md-6">
<div ng-if="search.hovedkunde" ng-controller="paginationCtrl">
<table class="table table-hover">
<tr>
<th>ID</th>
<th> Hovedkunde</th>
<th>Kundenavn</th>
<th></th>
</tr>
<tr ng-repeat="pro in filtered = (projects | filter: search) | sliceArray:bigCurrentPage*pageSize | limitTo : pageSize | unique:pro.projectId | orderBy:predicate:reverse ">
<td ng-click="setInfo(pro.projectId)">{{pro.hovedkundE_ID}}</td>
<td ng-click="setInfo(pro.projectId)">{{pro.hovedkunde}}</td>
<td ng-click="setInfo(pro.projectId)">{{pro.lonG_NAME}}</td>
<td ng-click="setInfo(pro.projectId)"><button type="button" class="btn btn-primary">Retrieve</button></td>
</tr>
</table>
<div class="text-center">
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination" boundary-links="false" rotate="false" num-pages="numPages"></pagination>
</div>
</div>
</div>
The filter expression allows you to specify a comparator.
Comparator which is used in determining if the expected value (from the filter expression) and actual value (from the object in the array) should be considered a match.
Can be one of:
function(actual, expected): The function will be given the object value and the predicate value to compare and should return true if the item should be included in filtered result.
true: A shorthand for function(actual, expected) { return angular.equals(expected, actual)}. this is essentially strict comparison of expected and actual.
false|undefined: A short hand for a function which will look for a substring match in case insensitive way.
In your case, you should define the filter like this
filter:search.hovedkunde:true
Related
I am using ng-repeat in my jsp to loop and display the values.if i have the value more then one time in the list i need to display only once.
Display the value only if the current value in the loop is not same as the previous value in jsp using ng- repeat
please find my code:
<td>
// obj.vm is name. name should be displayed only if it is diferrent then the previous name. otherwise it should be blank
<div obj.vm> </div>
</td>
// obj.dm is value. all the values should be displayed
<td> <div obj.dm> </div>
</td>
</tr>
<tr ng-repeat="obj in selItem.surveyRefData">
<td nowrap> // need to display ob.vm only if the current value is not same as previous value
<div style="float: left;" class="form-actions" obj.vm">
</div>
</td>
<td>
<div style="float: left;" class="form-actions"
ng-bind-html="(!validSeriesIdReqPending ?(obj.dm | seriesText):'')">
</div>
<br/>
<br/>
<tr ng-repeat="obj in selItem.surveyRefData|unique: obj">
<td> // obj.vm is name. name should be displayed only if it is diferrent then the previous name. otherwise it should be blank
<div obj.vm>
</div> </td> // obj.dm is value. all the values should be displayed
<td>
<div obj.dm> </div>
</td>
</tr>
The ideal solution is to preprocess the data and group it by the vm attribute, so you would have some structure like this:
name1
value1
value2
value3
name2
value4
value5
name3
value5
...
Then you would have a nested ng-repeat that loops over the values within each name. If, for some reason, you can't preprocess the data, you can refer to the previous item in your ng-repeat using the $index variable. Here is a simple example:
<tr ng-repeat="obj in selItem.surveyRefData">
<td>{{obj.vm !== selItem.surveyRefData[$index-1].vm ? obj.vm : ''}}</td>
<td>{{obj.dm}}</td>
</tr>
Keep in mind that this will only work if your data is ordered based on the vm attribute... if you had name1 -> name1 -> name2 -> name1, for example, you would see name1 twice in your output table.
Here is a simple example plunker: https://plnkr.co/edit/r5yxYk4Rr7mXaBeqoJNs
I'm trying to implement search method for "chat channels" that for every query it represents the compatible results from SQL table from the database.Each result can be distinguished by a unique ID that is also comes from the SQl table.I don't want to show the ID's so I put them in a hidden input for each result using ng-model.Also, for each, result the user have a possibility to subscribe to the channel (subscribe button) displayed in this result,so in order to save the subscription properly,I need to get the ID saved in the hidden input of the same result.
Here's what I tried:
<table class="table table-condensed">
<tr class="separating_line" ng-repeat="x in result">
<!-- ng-bind-html allows to bind a variable to the innerHTML part of the HTML element -->
<td>
<div class="col-md-8">
<h4><b style="color: gray;">{{ x.Name }}</b></h4>
<br><p> {{ x.Description }}</p>
</div>
<div class="col-md-2">
<small><label style="color: gray;">Subscribers </label>{{ x.Subscribersnum }}</label></small><br>
<input id="hiddenId" hidden="hide" ng-model="idval=x.ChanID" />
<button ng-click="subscribechannel()" class="btn btn-primary">Subscribe</button>
</div>
</td>
</tr>
</table>
In the controller I send it in the following way to convenient Servlet:
$http.get("http://localhost:8080/ExampleServletv3/subscribeservlet",{
params: {
subidval: $scope.idval
}
})
But when debugging the value that I get in the servlet is null.
How can I solve this? Any ideas?
Thanks
You don't need any hidden field to do what you want. All you need is to pass a parameter to your function:
<tr class="separating_line" ng-repeat="x in result">
...
<button ng-click="subscribechannel(x)" class="btn btn-primary">Subscribe</button>
How I can I automatically select the last row in a table
ng-repeat="unit in selectedOrder.products" using something like select by track by $index == desc or alternatively ng-options
<div class="search" ng-show="selectedOrder">
<table class="table table-bordered">
<tr><th>Item</th><th>Name</th><th>ValueToday</th></tr>
<tr ng-repeat="unit in selectedOrder.products">
<td><img ng- src="http:images/thumbnails/{{unit.shortname}}_tn.jpg" width=40 height=40
alt="{{ unit.shortname | limitTo: 18}} Photo"></td>
<td>{{unit.name | limitTo:18 }}</td>
<td>{{unit.valuetoday| currency:"£"}} </td>
</tr>
</table>
<div class="search" ng-show="selectedOrder">
<table class="table table-bordered">
<tr><th>Item</th><th>Name</th><th>ValueToday</th></tr>
<tr ng-repeat="unit in selectedOrder.products" ng-if="$last">
<td><img ng- src="http:images/thumbnails/{{unit.shortname}}_tn.jpg" width=40 height=40
alt="{{ unit.shortname | limitTo: 18}} Photo"></td>
<td>{{unit.name | limitTo:18 }}</td>
<td>{{unit.valuetoday| currency:"£"}} </td>
</tr>
</table>
will give you only the last row selected
In ng-repeat you can use the $last special variable to apply something only if it's the last element. see: https://docs.angularjs.org/api/ng/directive/ngRepeat
you can use it as a condition for anything you want to do in the tag. like
<img class="{{$last ? 'selected'}}" ng-class="{'selected': $last}" ng-if="$last" ....>
or however you like (these are just examples)
Always keep in mind though that using angular means that you have to edit your model to apply changes to your view, so if you want to have an element selected you have to do something to your model so that the element contains a value that makes it selected and then your view should reflect this.
For example in your controller you can check which element is the last in your ng-repeat array and add a selected variable, then in your view do something to make it look like your element is selected (for example: ng-class="{'selected': element.selected}") otherwise, by working on the view only you can make it look like the element is selected using $last but it won't be really selected in your model
In fact In ng-options (so we are talking about a select) you have to change your model in order to reflect your choice. So for example if your select has an attribute like this: ng-model="selected" then in your controller you set the $scope.selected variable to the last element of the array containing the values for your ng-options
You could use something like ng-if="$index == $last"
This is my code:
<table ng-init="liveTotal={}">
<tr ng-repeat="x in sovCtrl.topics" >
<td> {{x}}</td>
<td><input ng-model="sovCtrl.objects[x]" type="number"></td>
<td ng-hide="true">
<input ng-model="liveTotal[$index]" type="number" value="{{sovCtrl.objects[x]}}">
</td>
</tr>
</table>
<div > Current Result:
{{ 0 + liveTotal[0] + liveTotal[1] + liveTotal[2] + liveTotal[3] + liveTotal[4]}}
</div>
What I'm trying to do is have a live result of the sum of all the Inputted topic values(there will never be more than 5) without using $scope or any extra sovCtrl methods/objects or adding a script;
The topics are strings I can't predict.
The 2nd input CHANGES when I type into the first input, but the result in the div does not.
The result in the div changes only when I type or press on the 2nd input(if I make it visible)
Can this be done using angular but modifying only the above HTML?
Edit: sovCtrl.objects gets passed into functions that graph the values. Modifying the the keys would break those functions.
Why don't you directly do something like shown below
wherein you directly use the first input
You just add an index (which is provided in ng-repeat of any variable) and now you can access values by using index 0,1,2,3,4
<table ng-init="liveTotal={}">
<tr ng-repeat="(i,x) in sovCtrl.topics" >
<td> {{x}}</td>
<td><input ng-model="sovCtrl.objects[x]" ng-change="sovCtrl.objects_yo[i]=sovCtrl.objects[x]" type="number"></td>
</tr>
</table>
<div> Current Result:
{{ 0 + sovCtrl.objects_yo[0] + sovCtrl.objects_yo[1] + sovCtrl.objects_yo[2] + sovCtrl.objects_yo[3] + sovCtrl.objects_yo[4]}}
</div>
Got it, this works.
<table ng-init="liveTotal={}">
<tr ng-repeat="x in sovCtrl.topics" >
<td> {{x}}</td>
<td><input ng-model="sovCtrl.objects[x]" type="number"></td>
<td ng-show="false"> {{ liveTotal[$index]= sovCtrl.shareOfVoice[x]}}</td>
</tr>
</table>
<div > Current Result:
{{ 0 + liveTotal[0] + liveTotal[1] + liveTotal[2] + liveTotal[3] + liveTotal[4]}}
</div>
I'm using AngularJS and I have a simple table using ng-repeat and filter. When i insert anything at the search input it filters OK but it keeps paginated as it was before I filter the table. Any ideas why this is happening ?
Here's my code:
//some var initialization
$scope.pagina = {};
$scope.pagina.currentPage = 1,
$scope.pagina.numPerPage = 10,
$scope.pagina.maxSize = 5;
//return from server with data
coresFactory.getCores().then(function(response) {
$scope.tabelaCores = response.data;
$scope.filteredTodos = $scope.tabelaCores.cores.slice(0, 10);
});
//do pagination
$scope.$watch('pagina.currentPage', function() {
var begin = (($scope.pagina.currentPage - 1) * $scope.pagina.numPerPage),
end = begin + $scope.pagina.numPerPage;
$scope.filteredTodos = $scope.tabelaCores.cores.slice(begin, end);
},true);
<input ng-model="pesquisaTabela" type="search" style="width:300px;" class="form-control input-inline" placeholder="" aria-controls="sample_1"></label>
<table class="table" style="margin-bottom:5px;border:1px solid #DDDDDD" id="sample_1">
<thead>
<tr style="background-color:#F9F9F9">
<th style="width:100px; text-align:center;"> Id </th>
<th> Nome </th>
<th> Plural </th>
<th style="width:100px; text-align:center;"> Ativo </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cor in filteredTodos | filter:pesquisaTabela" ng-click="setSelected(cor.id)" ng-class="{linhaSelected: cor.id === idCorSelecionada}">
<td style="text-align:center;"> {{cor.id}} </td>
<td style="text-transform:capitalize"> {{cor.nome}} </td>
<td style="text-transform:capitalize"> {{cor.plural}} </td>
<td style="text-align:center;">
<span ng-if="cor.status=='sim'" class="label label-sm label-success"> Sim </span>
<span ng-if="cor.status=='nao'" class="label label-sm label-danger"> Não </span>
</td>
</tr>
</tbody>
</table>
<pagination first-text="<<" last-text=">>" next-text=">" previous-text="<" ng-model="pagina.currentPage" total-items="tabelaCores.cores.length" max-size="pagina.maxSize" boundary-links="true"></pagination>
You have quite a disconnect between various parts
Pagination is working off of one array, display from another and filter from yet another because when filter kicks in it returns a new filtered array.
The way you have things structured, your filter won't work properly either.
When you slice the main data array the filter is only going to work on that part that is sliced....not the whole main array
In order for pagination to be synchronized with filtering your simplest start point would likely be do your own filtering and share the same filtered array between the pagination and the table.
There are some other built in filters that you could use also like limitTo that takes 2 arguments limit and begin. That would help you get rid of currrent slice
There are lots of available grid/table directives available.
Using one of those would be my best suggestion
There is one other way you could do this all in the view. There is a syntax for ng-repeat that creates a new filtered array on the scope and therefore gives you access to it's length
<tr ng-repeat="row in filteredData = ( data |filter:pesquisaTabela | limitTo:10:start)">
Using this you could pass filteredData array to the total-items of the pagination directive.
It also now lets you do things like:
<div> Filtered length is: {{filteredData.length}}</div>