in the documentation says that:
selected-object-data -> A second parameter which will be passed to selected-object. I'm trying to use it but the callback function is not receiving it.
What i'm doing wrong?
<div data-angucomplete-alt=""
id="agent"
data-placeholder="Type to search"
data-pause="400"
data-selected-object="callbackFunction"
data-selected-object-data="row"
data-remote-url="getClients?searchString="
data-remote-url-data-field="Clients"
data-title-field="CompanyName"
data-input-class="form-control"
data-match-class="highlight"
data-minlength="2"
data-initial-value="{{row.agentCompany}}"
data-remote-url-response-formatter="formatAutoCompleteJson">
</div>
$scope.callbackFunction = function (selected) {
console.log(selected); //print only the selected object, no the data (second parameter)
//how to get the second parameter?
}
I think if you added a 2nd parameter to your callback function, then you could access the value of "row"
$scope.callbackFunction = function (selected, row) {
console.log(selected);
console.log(row); // should print the row number
}
I created an initialiser function in the controller, which returns the callback function into the scope of the repeat.
<html>
<div ng-repeat="row in rows">
...
<div ng-init="row.callbackFunction = initialiseCallback(row)"></div>
<angucomplete-alt selected-object = "row.callbackFunction" />
...
</div>
</html>
Controller() {
$scope.initialiseCallback = function (row){
return function function (selected) {
console.log(selected);
console.log(row); // should print the row number
}
}
}
I just find out that I was using an older version of the angucomplete, I updated it to the latest version and the parameter start working.
If you are using a ng-repeat
for example
<ul>
<li ng-repeat="customer in customers track by $index">
<angucomplete-alt pause="500"
selected-object="selectedCustomer"
selected-object-data="$index"
remote-url={{apiURL}}/customers/q?search="
remote-url-data-field="customers"
title-field="surname,name"
description-field="address"
minlength="3"/>
</li>
</ul>
If in selected-object-date you bind the $index of ng-repeat
In this case you can have this situation
$scope.selectedCustomer = function(customer, index) {
console.log(customer, index);
};
Related
I am displaying a contact's information using ng-repeat. Each contact has details. I am trying to grab the first object in the list. Here is my code:
<div ng-repeat="contact in contactList() | filter:{type: 'direct'} | filter:{duration: '1 year'} | orderBy: 'Date'">
<div ng-click="selectedContact(contact)">
<div>{{contact.name}}</div>
<div>{{contact.type}}</div>
</div>
</div>
contactList() is a function calling services:
$scope.contactList = function () {
return ContactService.getContactList();
};
How do I get the first contact object in the ng-repeat? I want to save that object for other windows.
You can set a new scope property to be a result of filtering and ordering. Note, how you group filters with ():
<div ng-repeat="contact in contacts = (contactList() | filter:{type: 'direct'} | filter:{duration:'1 year'} | orderBy: 'Date')">
<div ng-click="selectedContact(contact)">
<div>{{contact.name}}</div>
<div>{{contact.type}}</div>
</div>
</div>
Then to get the first from this list it will be just [0]:
{{ contacts[0] }}
I'm guessing you don't just want to display the one record and you also want the first record from the array after your filters/ordering are applied. If that is the case I would recommend simply adding an alias after your last condition and then you can reference that alias in your controller.
here is a fiddle to help show:
http://jsfiddle.net/nbavesuo/
I would suggest you not call the function in the ng-repeat instead reference an array that has already been called:
<div ng-repeat="contact in contactList|
filter:{type: 'direct'}| filter:{duration:'1 year'}|
orderBy: 'Date' as filteredArray">
....
Then in your controller:
$scope.contactList = ContactService.getContactList();
$scope.selectedContact = function(contact){
console.log(contact);
console.log($scope.filteredArray[0]);
}
You'll see that $scope.filteredArray[0] will have the 1st element in the sorted array.
You could use 'track by $index' and use an 'ng-if' to determine when it's the first object:
<div ng-repeat="contact in contactList()| filter:{type: 'direct'}| filter:{duration:'1 year'| orderBy: 'Date' | track by $index"
ng-if="$index == 0"
ng-init="someMethod()">
<div ng-click="selectedContact(contact)">
<div> {{contact.name}}</div>
<div>{{contact.type}}</div>
</div>
</div>
You could then have a function 'someMethod()' in your controller that saves the object to a window object or to local storage:
function someMethod(key, object) {
window.localStorage.setItem(key, object);
}
I have written an object to use for this exact thing in fact if you want to use it:
var LocalStorageManager = {
setValue: function(key, value) {
window.localStorage.setItem(key, JSON.stringify(value));
},
getValue: function(key) {
try {
return JSON.parse(window.localStorage.getItem(key));
} catch (e) {
}
}
};
So, you would use it with your stuff like this, in your 'someMethod()':
function someMethod(key, object) {
LocalStorageManager.setValue(key, object);
}
Then, to get the object, you would just use the 'getValue' method calling the 'key' that you gave the object.
I'm trying to call a function (from a non event element) from a ng-repeat to feed an array of data to an autocomplete element (using https://github.com/JustGoscha/allmighty-autocomplete).
It's to generate a kind of logic system :
type(listbox) | comparator (eg:>=) (listbox) | value(autocomplete)
And several of those object can be listed on a webpage to get some complex logic
type=value && type2>value3 || ...
Depending on type and comparator, values are different.
The code so far (simplified):
<div class="comparator" ng-repeat="comp in container.comparators">
<select ng-model="comp.type"><option ng-repeat="i in type_options" value="{{i.value}}" ng-selected="{{i.value==comp.type}}">{{i.label}}</option></select>
<select ng-model="comp.comparator"><option ng-repeat="i in comp_options|filter:typeMatch(comp)" value="{{i.value}}" ng-selected="{{i.value==comp.comparator}}">{{i.label}}</option></select>
<autocomplete class="autocomplete" data="" attr-placeholder="Entrez votre valeur" click-activation="true" on-type="**updateValue**" ng-model="comp.value"></autocomplete>
</div>
updateValue is the function to call, but i need to know the current object (comp from the ng-repeat) on which i am to send the right array of value.
I tryed to send an existing array to avoid "digest loop"
$scope.updateValue = function(crit){
for(var i=0;i
I also tryed to do a function that return a function that return the array :DDDDD :
$scope.updateValue = function(crit){
return function(value/*not used*/){
for(var i=0;i<$scope.comp_options.length;i++) {
if($scope.comp_options[i].value===crit.comparator){
$scope.value_elements=$scope.comp_options[i].info;
break;
}
}
return $scope.value_elements;
};
};
Replacing the autocomplete object with :
if I console.log(comp), I see that I can get my object, but I get a digest loop ...
Is there a way to know the object of the "line" I was called from ?
Thx (i'm a total newbie in angular, but so far, i've been unable to find how to retrieve that information ... is that even possible :) ?).
Access it using $index ? Example below. You can then use the index to access it
<tr ng-repeat="user in uc.users track by $index">
<td>{{user.id}}</td>
<td>{{user.first_name}}</td>
<td>{{user.last_name}}</td>
<td>{{user.email}}</td>
<td>{{user.department}}</td>
<button ng-click="uc.open(user.id, $index);">Open</button>
</tr>
I have an ng-repeat that contains items, each of which has an ng-click.
<div ng-repeat="item in items">
<div ng-click="clickMe()">Show Item</div>
<div ng-show="show_item" ng-init="show_item = false>Item 1: {{item.name}}</div>
</div>
$scope.clickMe = function () {
$scope.show_item = !$scope.show_item
};
The problem is that I end up with a list of items that all have the show_item variable. For example, if I end up with a list of 10 items, and I click on the second item in the list, then how can I get angular to know that I want to show the 2nd item, and not one of the other items in the list?
All your items are sharing the scope variable show_item. you have to create this variable for each item
Change your ng-show and ng-init to ng-show="item.show_item" and ng-init="item.show_item = false". Also ng-click="clickMe(item)"
$scope.clickMe = function (item) {
item.show_item = !item.show_item
};
I have an object of social media stats. I'm trying to ng-repeat them into a table. Here's my plunker.
HTML:
<table>
<tr ng-repeat="(metric, metricData) in data">
<td>{{metric}}</td>
<td>{{metricData}}</td>
</tr>
</table>
Controller object:
$scope.data = { buzz:0,
Delicious:121,
Facebook:
{
like_count: "6266",
share_count: "20746"
},
GooglePlusOne:429,
LinkedIn:820,
Twitter:4074
};
I run into a problem when I get to the Facebook results. Within the <td> that entire object gets displayed (as it should be with how I have my code setup). But what I'd rather have happen is to repeat through that object and display the key and value in the cell.
I tried doing something looking to see if metricData is an object and doing some sort of ng-repeat on that. But I wasn't having luck with that. Any idea on how I can display the inner object (keys & value) within the cells?
You can define a scope function returning the type of metricData :
$scope.typeOf = function(input) {
return typeof input;
}
And then you can display it according to its type :
<tr ng-repeat="(metric, metricData) in data">
<td>{{metric}}</td>
<td ng-switch on="typeOf(metricData)">
<div ng-switch-when="object">
<div ng-repeat="(key, value) in metricData">
<span>{{key}}</span>
<span>{{value}}</span>
</div>
</div>
<span ng-switch-default>{{metricData}}</span>
</td>
</tr>
You can see it in this Plunker
Sounds like you'll need a specific directive that wires up children to be recursive, take a look at this example: Recursion in Angular directives
What you'd check on is if what you need to repeat is an object and not a value, then add the new element compile it, and start the process over again.
I'm assuming you want each of those values to have their own line but you don't explain exactly how you want it to work. I think the matter would best be handled by passing a clean version of what you want to the ng-repeat directive. I'm assuming you want two rows for facebook in your sample. You could create a filter to flatten the metrics so there are properties "Facebook_like_count" and "Facebook_share_count" (PLUNKER):
app.filter('flatten', function() {
function flattenTo(source, dest, predicate) {
predicate = predicate || '';
angular.forEach(source, function(value, key) {
if (typeof(value) == 'object') {
flattenTo(value, dest, predicate + key + '_');
} else {
dest[predicate + key] = value;
}
});
}
return function(input) {
var obj = {};
flattenTo(input, obj, '');
return obj;
}
});
Then your repeat can use the filter:
<tr ng-repeat="(metric, metricData) in data|flatten">
I have a set of tiles that display a certain number depending on which option is selected by the user. I would now like to implement a sort by whatever number is shown.
The code below shows how I've implemented it (by gettting/setting a value in the parent cards scope). Now, because the orderBy function takes a string, I tried to set a variable in the card scope called curOptionValue and sort by that, but it doesn't seem to work.
So the question becomes, how to I create a custom sort function?
<div ng-controller="aggViewport" >
<div class="btn-group" >
<button ng-click="setOption(opt.name)" ng-repeat="opt in optList" class="btn active">{{opt.name}}</button>
</div>
<div id="container" iso-grid width="500px" height="500px">
<div ng-repeat="card in cards" class="item {{card.class}}" ng-controller="aggCardController">
<table width="100%">
<tr>
<td align="center">
<h4>{{card.name}}</h4>
</td>
</tr>
<tr>
<td align="center"><h2>{{getOption()}}</h2></td>
</tr>
</table>
</div>
</div>
and controller :
module.controller('aggViewport',['$scope','$location',function($scope,$location) {
$scope.cards = [
{name: card1, values: {opt1: 9, opt2: 10}},
{name: card1, values: {opt1: 9, opt2: 10}}
];
$scope.option = "opt1";
$scope.setOption = function(val){
$scope.option = val;
}
}]);
module.controller('aggCardController',['$scope',function($scope){
$scope.getOption = function(){
return $scope.card.values[$scope.option];
}
}]);
Actually the orderBy filter can take as a parameter not only a string but also a function. From the orderBy documentation: https://docs.angularjs.org/api/ng/filter/orderBy):
function: Getter function. The result of this function will be sorted
using the <, =, > operator.
So, you could write your own function. For example, if you would like to compare cards based on a sum of opt1 and opt2 (I'm making this up, the point is that you can have any arbitrary function) you would write in your controller:
$scope.myValueFunction = function(card) {
return card.values.opt1 + card.values.opt2;
};
and then, in your template:
ng-repeat="card in cards | orderBy:myValueFunction"
Here is the working jsFiddle
The other thing worth noting is that orderBy is just one example of AngularJS filters so if you need a very specific ordering behaviour you could write your own filter (although orderBy should be enough for most uses cases).
The accepted solution only works on arrays, but not objects or associative arrays. Unfortunately, since Angular depends on the JavaScript implementation of array enumeration, the order of object properties cannot be consistently controlled. Some browsers may iterate through object properties lexicographically, but this cannot be guaranteed.
e.g. Given the following assignment:
$scope.cards = {
"card2": {
values: {
opt1: 9,
opt2: 12
}
},
"card1": {
values: {
opt1: 9,
opt2: 11
}
}
};
and the directive <ul ng-repeat="(key, card) in cards | orderBy:myValueFunction">, ng-repeat may iterate over "card1" prior to "card2", regardless of sort order.
To workaround this, we can create a custom filter to convert the object to an array, and then apply a custom sort function before returning the collection.
myApp.filter('orderByValue', function () {
// custom value function for sorting
function myValueFunction(card) {
return card.values.opt1 + card.values.opt2;
}
return function (obj) {
var array = [];
Object.keys(obj).forEach(function (key) {
// inject key into each object so we can refer to it from the template
obj[key].name = key;
array.push(obj[key]);
});
// apply a custom sorting function
array.sort(function (a, b) {
return myValueFunction(b) - myValueFunction(a);
});
return array;
};
});
We cannot iterate over (key, value) pairings in conjunction with custom filters (since the keys for arrays are numerical indexes), so the template should be updated to reference the injected key names.
<ul ng-repeat="card in cards | orderByValue">
<li>{{card.name}} {{value(card)}}</li>
</ul>
Here is a working fiddle utilizing a custom filter on an associative array: http://jsfiddle.net/av1mLpqx/1/
Reference: https://github.com/angular/angular.js/issues/1286#issuecomment-22193332
The following link explains filters in Angular extremely well. It shows how it is possible to define custom sort logic within an ng-repeat.
http://toddmotto.com/everything-about-custom-filters-in-angular-js
For sorting object with properties, this is the code I have used:
(Note that this sort is the standard JavaScript sort method and not specific to angular) Column Name is the name of the property on which sorting is to be performed.
self.myArray.sort(function(itemA, itemB) {
if (self.sortOrder === "ASC") {
return itemA[columnName] > itemB[columnName];
} else {
return itemA[columnName] < itemB[columnName];
}
});
To include the direction along with the orderBy function:
ng-repeat="card in cards | orderBy:myOrderbyFunction():defaultSortDirection"
where
defaultSortDirection = 0; // 0 = Ascending, 1 = Descending