Passing variable in ng-repeat - angularjs

I have a ng-repeat loop and I want to pass a variable inside it...
<tr bindonce ng-repeat="row in elasticsearch.savedSearches | orderBy:['_id']">
<td><a ng-click="changeServices('row._id')" bo-text="row._id"></a></td>
</tr>
but it only passes the string "row._id".
changeServices('{{row._id}}')
doest work either.

Loose the '':
<a ng-click="changeServices(row._id)" bo-text="row._id"></a>
this should work:
hope it helps
You can also pick the row._id value in your controller without the need to passing it as above by doing:
id = $scope.row._id

Try this:
<a ng-click="changeServices(row._id)" bo-text="row._id"></a>
ie, remove the quotes from the 'row._id' else it would be treated as a string instead of variable.

Related

angular filter without using angular function

What I want to do is to create 2 angular tables where I display tasks. In the first table I want to show all tasks which are not assigned to user and in the second tab I want to show all tasks which are assigned to user
UsersDTO is array, I may have more users assigned to the same task.
My html code looks like this. This is tab where I got all tasks with assigned user to it. I am not pretty sure why this is working, but I assume it somehow looks into property and check if there is anything.
<tbody>
<tr ng-repeat="task in project.ProjectTasksDTO | filter: {UsersDTO: {}}">
<td>{{task.Id}}</td>
<td>{{task.Title}}</td>
<td>{{task.Text}}</td>
<td>{{task.Description}}</td>
<td><p ng-repeat="user in task.UsersDTO">{{user.UserName}}</p></td>
<td>{{task.Status}}</td>
<td>{{task.CreatedBy}}</td>
<td><button class="btn-info" ng-click="editUser(user);">Profile</button></td>
</tr>
</tbody>
Is there a way how to tell to filter in ng-repeat that UsersDTO is null or empty, something like in code below.
<tbody>
<tr ng-repeat="task in project.ProjectTasksDTO | filter: {UsersDTO: {null}}">
<td>{{task.Id}}</td>
<td>{{task.Title}}</td>
<td>{{task.Text}}</td>
<td>{{task.Description}}</td>
<td><p ng-repeat="user in task.UsersDTO">{{user.UserName}}</p></td>
<td>{{task.Status}}</td>
<td>{{task.CreatedBy}}</td>
<td><button class="btn-info" ng-click="editUser(user);">Profile</button></td>
</tr>
</tbody>
Hi you can do it this way without a the need for a function.
<div ng-repeat="task in project.ProjectTasksDTO | filter:{UsersDTO.length: 0}:true">
<div ng-repeat="task in project.ProjectTasksDTO | filter:{UsersDTO.length: 0}:false">
Altough keep in mind that the :true and :false notation is actually an angular specific shorthand notation and will be replaced with function(actual,expected) in a literal comparison to see if these match yes:true or no:false
Fidle

how to call a value from array in AngularJS controller?

I have an array like this:
$scope.persons = [{name:'Joey', age:'27'}]
I can call the value in HTML in this way
{{person.name}}
But when I try something like this, it fails
$scope.name = $routeParams.person.name
I could read the person only (without .name), it will be displayed as an array.But I want to access to the name key. Thx in advance.
I pass the person to JS in this way (route)
<tr data-ng-repeat="person in persons">
<td headers="more">
Show Details
</td>
</tr>
Try below code, as you are accessing value from array, whenever you access value from array need to mention index.
$scope.name = $routeParams.persons[0].name
Try This
Show Details

Knockout foreach accessing 2D json array

Hope someone can help me out with this:
I'm working with knockout and have the following json array:
[[174302,"BUSINESS - APPLICATION TO CONDUCT A BUSINESS FROM HOME.pdf",".pdf","DK89639"],[120183,"Glovent-Brochure.pdf",".pdf","DK472894"]]
inside my "consumerData" variable.
As you can see there are 2 arrays with 4 elements inside each.
Here is how I am trying to access it:
<div data-bind="foreach: consumerData" style="margin-bottom:100px;">
<table>
<tr>
<td colspan="2">
<p style="font-size:larger; margin-bottom:5px;"><a data-bind="attr: { href: 'http://someaddress/address/'+consumerData[0]+''+consumerData[2]+'?key='+consumerData[3]+'' }"><div data-bind="text: consumerData[1]"></div></a></p>
</td></tr>
</table>
</div>
So this is looping twice which is correct but how do I access my data inside each array?
PLease help!
Thanks!
Regards
Francois
You can access unnamed data within a loop by accessing the $data object (instead of consumerData again), which represents the current context
See this fiddle:
https://jsfiddle.net/5c6y46bo/
Also, you don't need to put a div inside your link to hold the text of the current object, just put the text binding within the <a> element's binding alongside the attr binding.

How to eliminate spaces in URL scope variable

I want to create a URL with parameters with my Angular scope variables like this:
<tr ng-repeat="tag in videocontent | filter:ContentFilter">
<td><a href='/harald/?video={{tag.VideoURL}}&minute={{tag.VMinute}}&sekunde={{tag.VSecond}}' target='_blank' rel='nofollow' >{{tag.VSecond}}: </a></td>
</tr>
Unfortunately, the final URLs contain spaces and do not work. How can I get rid of them?
Thank you,
Benjamin
Thank azium, problem solved with:
tag.whatever = tag.whatever.replace(' ', '')

Show &nbsp if value empty

I need to show a non-breaking space in a table cell if a value is empty. This is my template:
<td class="licnum">{{participant.LicenseNumber}}</td>
I've tried this, but it doesn't work:
<td class="licnum">{{participant.LicenseNumber} || "$nbsp;"}</td>
Here's the problem with it returning null values:
If License Number comes over with null value, the cell is empty and the row coloring looks like this.
Using lucuma's suggestion, it shows this:
After changing the if statement in the filter, still doesn't show non-null values:
What you have should work. You are missing a closing } and have one in the middle of the expression that needs to be removed.
Here is a demo showing your solution working and an ng-if. http://plnkr.co/edit/UR7cLbi6GeqVYZOauAHZ?p=info
A filter is probably the route to go, but you could do it with a simple ng-if or ng-show (either on the td or even on a span):
<td class="licnum" ng-if="participant.LicenseNumber">{{participant.LicenseNumber}}</td>
<td class="licnum" ng-if="!participant.LicenseNumber"> </td>
or
<td class="licnum"><span ng-if="participant.LicenseNumber">{{participant.LicenseNumber}}</span><span ng-if="!participant.LicenseNumber"> </span></td>
I'm offering this up as an alternate solution that doesn't require adding code to a controller/filter.
You can read up a little about this method: if else statement in AngularJS templates
angular.module('myApp',[])
.filter('chkEmpty',function(){
return function(input){
if(angular.isString(input) && !(angular.equals(input,null) || angular.equals(input,'')))
return input;
else
return ' ';
};
});
Just as #Donal said in order for this to work you'll need to use ngSanitize's directive ng-bind-html like this:
<td class="licnum" ng-bind-html="participant.LicenseNumber | chkEmpty"></td>
EDIT:
Here's a simple example: http://jsfiddle.net/mikeeconroy/TpPpB/

Resources