I have built an angular app which searches through a load of objects.
The problem is that the search filters match any part of the string returning irrelevant searches.
for example.
If I search the name Steve
the results will bring up both steve , eve and steven. I want the search results to return steve and steven.
Plunkr:
https://plnkr.co/edit/awN5ZxIpZ3fJJUkD5k6Y
Code
<input id="search-input" ng-model="searchTerm" placeholder="Search">
</div>
<ul class="search-ul">
<li class="search-list" ng-if="searchTerm.length > 2" ng-repeat="item in SearchItems| filter:searchTerm">
<div class="button-wrap">
<img class="icon" src="{{item.image}}" />
</div>
<span class="text">{{item.name}}</span>
</li>
</ul>
Reproducing with an object that only has a name field, I get results as expected ('steve' and 'steven' only). This suggests that it is matching on something other than the name field.
If you want your filter to ONLY use the item.name field then use the following:
<li class="search-list" ng-if="searchTerm.length > 2" ng-repeat="item in SearchItems| filter:{name:searchTerm}">
Please refer Angular material.
https://docs.angularjs.org/api/ng/filter/filter
For strict search you have to tag the object property to search field.
For example to filter name
<input ng-model="searchTerm.name"></label>
<label>Equality <input type="checkbox" ng-model="strict"></label><br>
Also try setting strict
ng-repeat="item in SearchItems| filter:searchTerm:strict"
Related
I have a list of text fields with a button below it. I can add text fields to that list dynamically with AngularJS.
The text field by default has an empty value. But I want to order the position of the list item as soon as I update the value of that text field. But when I do that the orderBy isn't triggered.
How can I make this happen?
Here's a quick demo: http://jsfiddle.net/fqnKt/214/
I just wanted to specifically note why the example was wrong (because I had the same issue even though I was using the orderBy directive).
DO NOT USE
track by $index
In your ng-repeat
I think that this is what you want:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in items | orderBy:'name'">
<input type="text" ng-model="item.name" /> {{item.name}}
</li>
</ul>
<input ng-model="newItem" type="text"></input>
<button ng-click="add(newItem)">Add</button>
</div>
</div>
Working Example
If I provide an input like this
<input type="text" ng-model="entries" placeholder="Type several entries">
When users type in a string like "Book, magazine, newspaper", how can I dynamically split each comma-separated entry into an unordered list item? I guess this works with ng-list but I haven't been able to get it working.
I tried like so:
<div ng-repeat="entry in entries">
<ul ngModel="entries">{{entries}}</ul>
</div>
You were right to consider ng-list. The usage is simply:
<input ng-list ng-model="entries" placeholder="Type several entries">
<ul>
<li ng-repeat="e in entries">
{{e}}
</li>
</ul>
Adapted from the api documentation, here is a demo: http://plnkr.co/edit/LBZgQD5xwOS9fORXjOt5?p=preview
Hi I am trying to display certain values based on option selected in a drop down.
My code is
data is
[{"city":"New York","location":"123"},
{"city":"Chicago","location":"953"}
{"city":"New York","location":"788"}
{"city":"Chicago","location":"853"}]
Code is
<form name="test" class="form-horizontal">
<div class="from-group container">
<label for="abc" class="col-sm-2">City</label>
<div class="col-sm-10">
<select class="form-control" ng-model="cc">
<option ng-repeat="city in cities" value="city.value">{{city.name}}</option>
</select>
</div>
<ul>
<li ng-repeat="att in cities">{{att.locations | filter:cc}} ></li>
</ul>
</div>
</form>
With above code I have two problems.
1. As I select different options in the drop down it wont filter for that city name.
2. When the file is first loaded it will display all the locations
Please let me know how to fix this code so when I select an option it lists all the locations filtering based on the city name.
Thanks
angular has a really cool feature where you can filter directly in your ng-repeat.
I've set up a fiddle where you can see this in action. Basically you set an object (cc) based on the select and then use:
<div ng-repeat="city in data | filter:cc">
Hope this helped.
Can i use filter filterexpression without ng-repeat in angularjs.
<li><input ng-model="query" placeholder="search on players" /> <input ng-model="q" placeholder="search on teams" /></li>
<li ng-repeat="(nomeTeam, squadre) in listaSquadre" >
<div ng-init="sq = squadre|filter:{nome:query,team:q}|orderBy:['pos','nome']" class="1c">
<pre>{{sq}}</pre>
<strong ng-show="sq.length > 0">{{nomeTeam}}</strong>
<ul>
<li ng-repeat="giocatore in sq" >{{giocatore.nome}} - {{giocatore.Role}} -
<span ng-switch="{{giocatore.pos}}">
<span ng-switch-when="1">PF</span>
<span ng-switch-when="2">PA</span>
</span>
</li>
</ul>
</div>
</li>
</ul>
The above code not filtering data. I want to print the Team name, it is external to the ng-repeat, after search.If serach return data, i want to print the team name, else no.How i can i achive this with angularjs.
Can i use filter filterexpression without ng-repeat in angularjs.
From Docs:
Selects a subset of items from array and returns it as a new array.
For sure you can use filter or custom filter (with Filter postfix) into controllers. Filters like ng-repeat directive works with arrays.
In your case I would clone the array, filter it and run with ng-repeat on filtered result
This is a strange problem. The code is simple:
HTML code:
<body ng-controller="MainCtrl">
<ul ng-repeat="name in names">
<input type="text" ng-model="name" />
</ul>
</body>
Angular code:
app.controller('MainCtrl', function($scope) {
$scope.names = ["aaa","bbb","ccc"];
});
The live demo url is: http://plnkr.co/edit/2QFgRooeFUTgJOo223k9?p=preview
I do not understand why the input controls can not be edited, I can't type new characters or delete characters.
This is a common issue due to scope inheritance . Each of your names is a primitive so ng-repeat makes it's own scope item that is not connected to original, however if each names is an object ng-repeat scope item will be a reference to original object
[{name:"aaa"},{name:"bbb"},{name:"ccc"}];
Always use a dot in ng-model is a helpful rule of thumb
<div ng-repeat="item in names">
<input type="text" ng-model="item.name"/>
</div>
Working Plunker
Read this article on angular github wiki for detailed explanaton:
https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance
Angular 'fixed' this in 1.1 with the track by $index. No need to change your model.
<div ng-repeat="item in names track by $index">
<input type="text" ng-model="names[$index]" />
</div>
Plunker here
Late answer, but you should also be careful of typos, that angular will not warn you about:
<div ng-repeat="item in names track by $index" ng=if="names[$index] = 'John'">
<input type="text" ng-model="names[$index]" />
</div>
Note the single equals in the ng-if, that will not cause a warning or error, but the text will also be read only. Quite a hard one to spot if you are reading quickly.
It of course should be:
<div ng-repeat="item in names track by $index" ng-if="names[$index] == 'John'">
<input type="text" ng-model="names[$index]" />
</div>