According to the documentation and other SO questions, I should be able to output a set of key/value pairs with ng-repeat
$scope.getFilters = function(){
return {
film : true,
game : true,
music : true,
sport : true,
tv : true
}
}
$scope.filters = $scope.getFilters();
Then this is my HTML
{{filters}}
<div
ng-repeat="(name,set) in filters"
>
{{name}} : {{set}}
</div>
But this is all I get from that:
{"film":true,"game":true,"music":true,"sport":true,"tv":true}
<!-- ngRepeat: (name,set) in filters -->
I've tried JS fiddles, it works. This is only a snippet of my code, there is more on the page but I can't paste it all here.
UPDATE: Just noticed this error:
Error: Duplicates in a repeater are not allowed. Repeater: (name,set) in filters key: boolean:true
This should work:
<div ng-repeat="row in [1,1,1] track by $index">
Check out this question for more details...Angular ng-repeat Error "Duplicates in a repeater are not allowed."
Hope this helps!
Related
I want to use ng-repeat directive in AngularJS with customized filter to print a table.
Assume that I have data as following
[
{
"Key":{
"Name":"Paul",
"Age":"18"
},
"Info":{
"Gender":"M"
}
},
{
"Key":{
"Name":"John",
"Age":"19"
},
"Info":{
"Gender":"M"
}
},
{
"Key":{
"Name":"Jane",
"Age":"17"
},
"Info":{
"Gender":"F"
}
}
]
By using ng-repeat and filter, I hope that I could filtred by Name or other options.
So I tried:
<div>
<tr ng-repeat="x in data | myFilter: filterText">
<td>{{x.Key.Name}}</td>
<td>{{x.Key.Age}}</td>
</tr>
</div>
My script for customizing filter here:
myApp.filter("myFilter",function(){
return function(input, filterText){
if(input.Key.Name == filterText){
return input;
}
}
})
I keep receiving error from console that Name is undefined. I same have problem that accessing Javascript of Array of Object. I have set about JSON file input $scope.data.
filterText would be filter keywords for Name.
First of all, table tags are missing in your template. You can filter with nested property 'Name' without using custom filter like this:
<table>
<tr ng-repeat="x in data | filter: { Key: {Name: filterText} }">
<td>{{x.Key.Name}}</td>
<td>{{x.Key.Age}}</td>
</tr>
</table>
Check the working example : jsfiddle
I am trying to filter an array (list) of repeated objects, based on the value of one of the property. However I keep getting [filter: not array] error. Screenshot of the error:
angular error message
I have also tried adding this angular toArrayFIlter injector https://github.com/petebacondarwin/angular-toArrayFilter however, the error still pops out.
Any help is much appreciated!
My array:
var orders = [
{
"assignedBy": "system",
"serviceDate":"2017-11-13",
"serviceStartTime":"04:00 PM"
},
{
"assignedBy": "system",
"serviceDate":"2017-11-13",
"serviceStartTime":"07:00 AM"
}];
html
<ul ng-repeat="task in orders track by $index | filter: { serviceStartTime: '04:00 PM' }">
<li >
<p>{{task.serviceDate}}</p>
<p>{{task.serviceStartTime}}</p>
</li>
</ul>
You'll need to filter the array before iterating it, like this:
<ul ng-repeat="task in (orders | filter: { serviceStartTime: '04:00 PM' }) track by $index ">
Trying to filter a table using a select and ng-options but not successful. I've got a plunker showing the problem. Anyone who can see what is going on?
http://plnkr.co/edit/WlojiFw26gqUoEDXOeQd?p=preview
My Select:
<select class="form-control"
st-search="code"
st-input-event="change"
st-delay="0"
ng-model="selectedStatusFilter"
ng-options="f.code as f.text for f in codeOptions">
</select>
My options:
$scope.codeOptions = [{
'text': 'On',
'code': 'On'
}, {
'text': 'Off',
'code': 'Off'
}, {
'text': 'Cat',
'code': 'Cat'
}, {
'text': 'All',
'code': ''
}]
Typical item in collection:
code : "On"
firstName : "Laurent"
id : 9
lastName : "Renard"
So what I'm hoping to happens is that the value of the Select gets interperated as a filter on the code property of the items in collection. So when "On" is selected only items with code : 'On' are shown, and with All selected because the value there is "" we should see all items.
Using Angular version 1.6.4
Using Smart-Table 2.1.8
As alternative way you can use <option> and ng-repeat without any ng-model
<select class="form-control" st-search="code">
<option ng-repeat="f in codeOptions"
ng-selected="codeOptions.indexOf(f) == 3"
value="{{f.code}}">{{f.text}}</option>
</select>
Demo Plunker
In the smart filter documentation there is a way defined on how to do this, Refer the link Smart Table Filtering, So in this link its tells us to use the attribute st-set-filter on the smart table declarartion element. Another thing is, in select using ng-options we will get the datatype included in the ng-model of the select element, to remove this, you can use track by f.code, So the HTML changes are:
<section st-table="displayedCollection" st-safe-src="rowCollection" st-set-filter="myCustomFilter">
<select class="form-control"
st-search="code"
st-input-event="change"
st-delay="0"
ng-model="selectedStatusFilter"
ng-options="f.code as f.text for f in codeOptions track by f.code"></select>
{{displayedCollection}}
<table class="table table-striped">
<thead>
<tr>
The JS contains a filter declaration taken from the docs.
app.filter('myCustomFilter', function($filter){
return function(input, predicate){
console.log(input, predicate);
return $filter('filter')(input, predicate, true);
}
});
Finally below is a demo for the same.
Plunkr Demo
Please let me know if you face any issues!
I have a list of countries
countryList = ["India", "Australia", "USA", "Germany"]
I do I ng-repeat across above list.....it is not a dictionary.
I tried using ng-repeat="item in countryList track by $index" but it gave me back error. Some body can tell me why it is happening ?
Please find console log
Error: [$parse:syntax] http://errors.angularjs.org/1.3.15/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bipv4Pub%7D%7D&p4=%7Bipv4Pub%7D%7D
at Error (native)
at https://jiodns.jio.com/js/angular.min.js:6:417
at ib.throwError (https://jiodns.jio.com/js/angular.min.js:191:165)
at ib.object (https://jiodns.jio.com/js/angular.min.js:200:324)
at ib.primary (https://jiodns.jio.com/js/angular.min.js:190:207)
at ib.unary (https://jiodns.jio.com/js/angular.min.js:197:478)
at ib.multiplicative (https://jiodns.jio.com/js/angular.min.js:197:205)
at ib.additive (https://jiodns.jio.com/js/angular.min.js:197:63)
at ib.relational (https://jiodns.jio.com/js/angular.min.js:196:435)
at ib.equality (https://jiodns.jio.com/js/angular.min.js:196:291)
Is countryList available on the scope ? If yes, there shouldn't be any problem. See this fiddle: http://jsfiddle.net/HB7LU/14183/
$scope.countryList = ["India", "Australia", "USA", "Germany"]
<div ng-repeat="country in countryList">
<p>{{country}}</p>
</div>
I am new to angular js so please forgive me for this basic question.
I have an array of object literals and I want to add filter in angular js according to particular field type.
Array of object literals:
var todos= [{text: 'To-DO1', done: false,group:'Group1' }, {text: 'To-do2', done: false, group:'Group2' } ];
I am using this code:
<select data-ng-model="selectOption" data-ng-options="item as item.gtype for item in items"> </select>
<li data-ng-repeat="todo in todos track by $index | filter: selectOption.gtype ">
Above filter is not working
For populating the select I am using :
$scope.items = [
{gtype:'Group1'},
{gtype:'Group2'},`enter code here`
{gtype:'Group3'},
{gtype:'Group4'},
{gtype:'Group5'}
];
Could someone please help me through ?
The problem is with the track by $index. The correct place for it is at the end of the expression, after the filter (see ngRepeat documentation)...
<li data-ng-repeat="todo in todos | filter: selectOption.gtype track by $index">
Live Demo
Edit: As requested, here's an updated fiddle to show an alternate message if filter produces nothing...
Live Demo