Angular.js interpolation in filter parameter - angularjs

I have a filter on a ng-repeat, which accepts a parameter. It currently works with a string.
<div ng-repeat="(key, value) in searchData | aboutFilter:'abo'">
Is is possible to use an interpolated value in place of the string?
<div ng-repeat="(key, value) in searchData | aboutFilter:'{{list.api}}'">
Here is my filter:
app.filter('aboutFilter', function() {
return function(items, input) {
var filtered = [];
angular.forEach(items, function (value,key) {
if(key===input){
filtered.push(value);
}
});
return filtered;
}
});
Here is the complete template logic:
<ul ng-repeat="list in englishList">
<a ng-class="{{list.title}}Hide" mobile-search-slide href="/about"><li><p>{{list.title}}</p><i class="fa fa-chevron-right"></i></li></a>
<ul id="hideMe" ng-class="'hide{{list.title}}'">
<div ng-cloak ng-repeat="(key, value) in searchData | aboutFilter:'{{list.api}}'">
<div ng-repeat="result in value" ng-class-odd="'odd'" ng-class-even="'even'">
<a ng-href="{{value.title}}/{{result.shortname}}">
<li>
<p>{{result.title}}</p><i class="fa fa-chevron-right"></i>
</li>
</a>
</div>
</div>
</li>
</ul>
</ul>

If you want to use some ng-modelfor filter, then you can just use the model name. No need to use {{}} expression.
In your case, it will be :
<div ng-cloak ng-repeat="(key, value) in searchData | aboutFilter:list.api">
DEMO
Remember in your filter, you are using string comparison. So the filter will check for exact matches.
And also, IN your filter:
You are comparing key with the input list.api. Here key will always be 0,1, etc index. You must be using value there instead of key

Related

AngularJS - Custom filter not working

I want to find the names, starting with the given letter i.e 'm' using angular's custom filter. Here I should get 2 entries in solutions but my view part shows only two bullets of an unordered list and not showing the names that starts with 'm'.
This is my filter:
arg.filter("startwith",function()
{
return function(input,option)
{
var op = [];//var s="";
for(var i=0;i<input.length;i++)
{
if(input[i].sname.charAt(0) == option)
op.push(input[i].sname);
}
// $scope.op;
// s=op.toString();
return op;
}
});
This is controller:
$scope.stud = [
{sid:1,sname:'john',gender:1,type:"fulltime"},
{sid:2,sname:'ashish',gender:1,type:"fulltime"},
{sid:3,sname:'naina',gender:2,type:"parttime"},
{sid:4,sname:'mitesh',gender:3,type:"fulltime"},
{sid:5,sname:'mithila',gender:2,type:"parttime"}
]
This is the view:
<h3> Names Start with M</h3>
<ul>
<li ng-repeat="s in stud | startwith : 'm'">
{{stud.sname}}
</li>
</ul>
It is because in your custom filter you are not returning objects but returning strings therefore the following would return empty as your strings would not have property of sname
<ul>
<li ng-repeat="s in stud | startwith : 'm'">
{{s.sname}}
</li>
</ul>
changing {{s.sname}} line to {{s}} would give you results.
<ul>
<li ng-repeat="s in stud | startwith : 'm'">
{{s}}
</li>
</ul>
Demo

Grabbing value from nested json array with Angular

I'm having trouble accessing the artists array within the items array here to be able to render the name field:
I'm currently able to grab other values at the same level as the artists that are simple objects. How can I loop through the array of the nested array?
Controller
$scope.search = "";
$scope.listLimit = "10";
$scope.selectedSongs = [];
$scope.addItem = function(song){
$scope.selectedSongs.push(song);
}
function fetch() {
$http.get("https://api.spotify.com/v1/search?q=" + $scope.search + "&type=track&limit=50")
.then(function(response) {
console.log(response.data.tracks.items);
$scope.isTheDataLoaded = true;
$scope.details = response.data.tracks.items;
});
}
Template
<div class="col-md-4">
<div class="playlist">
<h3>Top 10 Playlist</h3>
<ul class="songs" ng-repeat="song in selectedSongs track by $index | limitTo: listLimit">
<li><b>{{song.name}}</b></li>
<li>{{song.artists.name}}</li>
<li contenteditable='true'>Click to add note</li>
<li contenteditable='true'>Click to add url for image</li>
</ul>
<div id="result"></div>
</div>
</div>
You should do another ng-repeat to access the artists,
<div class="songs" ng-repeat="song in selectedSongs track by $index | limitTo: listLimit">
<ul ng-repeat="artist in song.artists">
<li><b>{{song.name}}</b></li>
<li>{{artist.name}}</li>
<li contenteditable='true'>Click to add note</li>
<li contenteditable='true'>Click to add url for image</li>
</ul>
</div>

How to solve the error: [$rootScope:infdig]?

When I am using ng-repeats in ul's and li's I am getting the errors.
Here is my html code:
<ul>
<li ng-repeat="(key, value) in (myData | groupBy: 'id')">
{{key}}
<ul>
<li ng-repeat="details in value">
{{details.name}}
</li>
</ul>
</li>
</ul>
JS code:
.filter('groupBy', function () {
return function (data, key) {
var result = {};
for (var i = 0; i < data.length; i++) {
if (!result[data[i][key]])
result[data[i][key]] = [];
result[data[i][key]].push(data[i])
}
alert(JSON.stringify(result));
return result;
};
});
These are the errors I am getting
Try to put track by $index in the ng-repeat like this:
<ul>
<li ng-repeat="(key, value) in myData track by id">
{{key}}
<ul>
<li ng-repeat="details in value">
{{details.name}}
</li>
</ul>
</li>
</ul>
You can also track by $index if you have duplicates in array
<li ng-repeat="(key, value) in myData track by $index">
The infinite digest is caused by the filter that returns a new result every time it runs through the function. You'll have to rewrite the function so that it directly modifies the original data argument and you return the data argument again.

Angular expression in ng-repeat and ng-click

I am trying to call a function using ng-click which is dynamically generated by ng-repeat the problem is that i am not able to get the parameter value passed in ng-click function. My html code is
<div class="col-md-4 col-xs-12 col-lg-4" ng-repeat="(key, value) in uploadedFiles">
<b>value.filename is {{value.filename}}</b>
<img ng-if="value.filetype=='jpg'" ng-src="http://localhost:3000/uploads/{{value.filename}}" class="img img-responsive thumbnail uploadedfile-thumb"/>
<img ng-if="value.filetype=='PDF'" ng-src="images/pdf-thumb.jpg" class="img img-responsive thumbnail uploadedfile-thumb"/>
<a ng-href="http://localhost:3000/uploads/{{value.filename}}" target="_blank" class="uploaded-file-links">View</a>
<a ng-href="#" ng-click="deleteFile(value.filename);" class="uploaded-file-links">Delete</a>
</div>
i am not getting the filename which is passed in deleteFile(), bit it is working in <b> tag in 2nd line so finally this is a problem with my angular expression so how should i write it?
I will try to make some guessing here.
I suppose that your uploadedFiles is an array of objecs, and not an object itself. In that case, you should use ng-repeat="file in uploadedFiles" which is meant to iterate over array elements. This will iterate over your array and assignf the corresponding object for that iteration to file variable.
The ng-repeat="(key, value) in uploadedFiles" is meant for iterating over object properties instead of iterating over array elements. For example, if uploadedFiles is:
var uploadedFiles = {
prop1: 'value1',
prop2: 'value2',
prop3: 'value3'
};
and you iterate over it like this:
<ul>
<li ng-repeat="(key, value) in uploadedFiles">
{{value}}
</li>
</ul>
you would get the following output:
value1
value2
value3
But if uploadedFiles is an array like this one:
var uploadedFiles = [
{
prop1: 'value11',
prop2: 'value12',
},
{
prop1: 'value21',
prop2: 'value22',
},
{
prop1: 'value31',
prop2: 'value32',
}
];
And you iterate over it like this:
<ul>
<li ng-repeat="file in uploadedFiles">
{{file.prop1}}
</li>
</ul>
you would get:
value11
value21
value31
So in your case, I would try the following:
<div class="col-md-4 col-xs-12 col-lg-4" ng-repeat="file in uploadedFiles">
<b>file.filename is {{file.filename}}</b>
<img ng-if="file.filetype=='jpg'" ng-src="http://localhost:3000/uploads/{{file.filename}}" class="img img-responsive thumbnail uploadedfile-thumb"/>
<img ng-if="file.filetype=='PDF'" ng-src="images/pdf-thumb.jpg" class="img img-responsive thumbnail uploadedfile-thumb"/>
<a ng-href="http://localhost:3000/uploads/{{file.filename}}" target="_blank" class="uploaded-file-links">View</a>
<a ng-href="#" ng-click="deleteFile(file.filename);" class="uploaded-file-links">Delete</a>
</div>

Angular ng-repeat output groupBy value

I have this AngularJS repeater where i group my items by a property.
Data:
items = {
Load: 0,
Unit: 0,
object: {
Property: "prop"
}
}
Repeater
<div class="horizontalList">
<ul ng-repeat="(index, item) in vm.items | groupBy: 'object.Property' | toArray: true">
<div>GET OBJECT PROPERTY HERE</div>
<li ng-repeat="item in item | orderBy:'index'">
<div ng-bind="item.Load"></div>
<div ng-bind="item.unit"></div>
</li>
</ul>
</div>
It works fine, except i cannot output the value of object.Name, I've tried various things like:
<div ng-model="Item.object"></div>
<div ng-model="item.object.Name"></div>
<div ng-model="vm.items[index].object.property"></div>

Resources