Very simple issue I cant seem to resolve, my markup
<select class="testing" ng-model="Car_name" ng-options="item in categories['Car_name']">
I'm trying to change 'Car_name' to be 'car_name' however the server populated the ng-model & categories[] entries, so I'm not sure how I can watch and convert to lowercase in my controller.
If I could do
{{Car_name|lowercase}}
would be the easiest, but not sure on the format.
Option 1
You can do it by using angular.$filter option
Sample look like
<td ng-model={{ lowercase_expression | lowercase}}><td>
$filter('lowercase')()
More details Please see this angular document
Option 2
Please see this below discussion
AngularJS - ngOptions expressions
Option 3
You need to manually add a loop for your array. And convert to the object values to lower case by using toLowerCase() function , and finally push the object to new array.
This is built into AngularJS and can be access via angular.lowercase(string); and then used in your Controller like:
$scope.makeLowerCase = function(string){
return angular.lowercase(string);
};
Now use in your DOM like:
{{Car_name|makeLowerCase}}
Related
I´m currentrly trying to filter an array of objects with an search term from an input field.
I know there is a way to apply a search term to an ng-repeat directive using this code ng-repeat="item in list| filter:search_term. But I need to process the filtered list in the JavaScript part of the application. Is there a way how to access the filtered list in the JS part of the application or do I have to choose another approach to filter my array by an search term?
Here is my (currently not working) example code.
EDIT:
I´m searching for a way to do the task completely without using a filter on my ng-repeat! At the end it should be possible to display the filtered list by only using a simple ng-repeat="item in filtered_list
you can use filter in your controller also. Here is your updated fiddle. I hope this can help.
`https://jsfiddle.net/ymcfugzp/3/`
You should filter it inside the Component then.
You can have a function that filters and also does your other processing stuff , similar as the one that follows:
myFilter(term) {
const filtered = list.filter(element => element.term === term);
// Do other stuff in here.
return filtered;
}
Then your template could be as simple as that:
ng-repeat="myFilter(term)"
You can do it like this: ng-repeat="item in filteredList = (list| filter:search_term).
And then just get your filteredList via $scope.filteredList.
Or use controller alias like this:
ng-repeat="item in $ctrl.filteredList = ($ctrl.list| filter:search_term)
- in order to not keep data in $scope
Hi I am using AngularJS on a WordPress site and when displaying custom field values using Angular tags in my partials HTML file such as {{post.manualest}}, it displays as ["1,500,000"]
How can I remove [" "] so that it shows only 1,500,000?
Since {{post.manualest}} contains an array you need ng-repeat
<p ng-repeat="tag in post.manualest">{{tag}}</p>
The ngRepeat directive instantiates a template once per item from
a collection. Each template instance gets its own scope, where the
given loop variable is set to the current collection item, and $index
is set to the item index or key.
https://docs.angularjs.org/api/ng/directive/ngRepeat
The data you received (in manualest key) is an Array. So either you can use the ng-repeat as #Vicky suggested or you can simply write in your HTML:
{{post.manualest[0]}}
Edit: Like #FuzzyTree already mentioned in the comment.
I have a collection and im grouping it using lodash.js groupBy before displaying in the UI using ng-repeat
var list = [{id:1,categoryId:1,name:test1},
{id:2,categoryId:2,name:test2},
{id:3,categoryId:12,name:test12}]
vm.myList= _.groupBy(list,function (j) { return j.categoryId; });
console.debug(vm.myList) // this shows the correct ordering!!!
Now when im displaying it using ng-repeat it messes up the ordering
<div ng-repeat="(categoryId, details) in vm.myList| orderBy: 'categoryId'>
{{ categoryId }}
</div>
this displays
1
12
2
how can I make it to display
1
2
12
I'm trying something like this but no luck
<div ng-repeat="(categoryId, details) in vm.myList| orderBy: 'parseInt(categoryId)'>
{{ categoryId }}
</div>
UPDATE! I found out that this is not an issue in Angular 1.4.x . Unfortunately, we are using old version Angular 1.3.x
first, orderBy filter working only with arrays, so if you try pass object to it, would be returned passed object as is.
second, with ngRepeat
You need to be aware that the JavaScript specification does not define the order of keys returned for an object. (To mitigate this in Angular 1.3 the ngRepeat directive used to sort the keys alphabetically.)
Version 1.4 removed the alphabetic sorting.
If this is not desired, the recommended workaround is to convert your object into an array that is sorted into the order that you prefer before providing it to ngRepeat. You could do this with a filter such as toArrayFilter
So for solving your issue just convert your groupped object to array, and sort it as you want.
I'm looking at angular code that uses ui-select. In every case the same syntax is used for th ui-select-choice value, which looks something like this:
<ui-select-choice repeat="value in array | filter:$select.search">
<span ng-bind-html="trustAsHtml(value.name | highlight:$select.search))">
</ui-select-choice>
I understand that the values are being sent to a filter, but I don't know what $select.search is, so I don't know what the filter actually does. I also don't know what the trustAsHtml does, but I haven't researched it too closely so it's not as important to get an explanation.
can anyone give me an explanation of how this logic works?
ui-select lets you do a search. That search value binds to $select.search, so your array is filtered by your search criteria.
trustAsHtml is part of the service $sce which lets angular trust an html string, which can be inseted then to your html with ng-bind-html.
i want to filter data on the fly when data is provided to ng-grid in angular. what i am trying to achieve is that when i filtering 'Nephi' then all the data which contain 'Nephi' with its.
I am providing a plunker link to better understand:
Like if i search 'Nephi' then it should only give me 1 result or exact result(expected result)
1. Nephi
but right now it is giving me:
1. Nephi
2. Nephiss
3. Nephisss
The filter accepts regex, so using this:
var filterText = 'name:^Nephi$';
Will work. The regex matches the start of the string (using ^), the word we want, then the end of the string (using $).
If you're using a newer version of angular just add :true for an exact match.
<div ng-repeat="val in items | filter:{item: '!search'}:true">{{val.item}}</div>