Problem 1:
I came across this issue where in I need to create objects on the fly based on a loop.
Example:
angular.forEach([0,1,2], function (index) {
$scope.cc + index = buildMeProto();
});
Am I approaching this the wrong way? Can I create $scope.element based on an index?
Problem 2:
I also notice that in the HTML if you do something like:
<div ng-repeat="black in blacks">
<lightbox name="black+$index" />
</div>
you can't append an index to an object, in this case 'black' is an object and index is 0, 1,2 etc.
Is there a each way to piggy ride the index to create or invoke elements?
Thanks
Problem 1
If you want to create a $scope property on the fly you need to use the [] notation.
angular.forEach([0,1,2], function (index) {
$scope["cc" + index] = buildMeProto();
});
Problem 2
You could call a function on the scope that would augment the object by adding a property.
$scope.addIndex = function(person, index){
person.id = index;
};
Example jsfiddle.
Related
I'm a beginner of ReactJS and I'm stuck trying to figure out why map only returns a single prop at a time.
In file1.jsx, I have an array that contains 3 objects:
var MainPanelOneData = [{"id":1,"shotviews":15080},{"id":2,"likes":12000},{"id":3,"comments":5100}];
File1.jsx also has a render function to extrapolate the data inside the array:
render: function() {
var ListMainPanelOne = MainPanelOneData.map(function(data) {
return <MainPanelOne key={data.key} shotviews={data.shotviews} likes={data.likes} comments={data.comments} />
});
In file2.jsx, I have this code to render the data object from file1.jsx:
render: function() {
return (
<div>
<span>{this.props.shotviews} shot views</span>
<span>{this.props.likes} likes</span>
<span>{this.props.comments} comments</span>
</div>
)
}
The result shows this:
15080 shot views likes comments
shot views12000 likes comments
shot views likes5100 comments
I'm guessing it repeats like this because it searches through one key at a time? If that's the case, how do I display all keys at the same time? Use indexing?
well your array of data doesnt have all the keys. each one of your objects in PanelOneData has ONE key and is missing the other two; additionally none of them have key called key. so youre making three MainPanelOne components, each with a single prop. the result of that map is this
[
<MainPanelOne key={null} shotviews={15080} likes={null} comments={null} />,
<MainPanelOne key={null} shotviews={null} likes={12000} comments={null} />,
<MainPanelOne key={null} shotviews={null} likes={null} comments={5100} />
]
which is an accurate display of what youre seeing
To get one line you might do something like this.
render: function() {
var ListMainPanelOne = MainPanelOneData.map(function(data) {
return <span key={data.id}> {data.shotviews} {data.likes} {data.comments} </span>
});
I am passing in 2 arrays to my view. I would like my nested loop to only display where it's parent_id value matches the parent.id. Eg.
arr1 = {"0":{"id":326,"parent_id":0,"title":"Mellow Mushroom voucher","full_name":"Patrick","message":"The voucher says $10 Voucher; some wording on the printout says, \"This voucher is valid for $20 Pizza\" but my purchase price or amount paid also says $20. Shouldn't that be $10","type":"Deals"}};
arr2 = {"0":{"id":327,"parent_id":326,"title":"Re: Mellow Mushroom voucher","full_name":"Patrick Williams","message":"Some message here","type":null};
...
<div data-ng-repeat = "parent in arr1">
<span>{{parent.title}}<span>
<div data-ng-repeat="child in arr2 | only-show-where-child.parent_id == parent.id">
<li>{{child.body}}</li>
</div>
</div>
Is this possible/best practice in angular of should I be filtering the object in node before passing it into angular? Thank you!
There are a couple of ways you could do it... You could create a function to return just the children:
$scope.getChildren = function(parent) {
var children = [];
for (var i = 0; i < arr2.length; i++) {
if (arr2[i].parent_id == parent.id) {
children.push(arr2[i]);
}
}
return children;
};
html:
<div ng-repeat="child in getChildren(parent)">
You could define a filter to do the same thing:
myApp.filter('children', function() {
return function(input, parent) {
var children = [];
for (var i = 0; i < input.length; i++) {
if (input[i].parent_id == parent.id) {
children.push(input[i]);
}
}
return children;
};
});
html:
<div ng-repeat="child in arr2|children:parent">
Both of those methods will execute every digest cycle though. If you have a large list of elements you would definitely want to improve performance. I think the best way would be to pre-process those results when you get them, adding a children array to each object in arr1 with only its children (here using array.filter instead of for loop and array.forEach):
arr1.forEach(function(parent) {
parent.children = arr2.filter(function(value) {
return value.parent_id === parent.id;
};
});
Then in the html you are already working with the parent so you can repeat over its children property:
<div ng-repeat="child in parent.children">
Instead of using filters, data-ng-if can achieve the same result.
<div data-ng-repeat="parent in arr1">
<span>{{parent.title}}<span>
<div data-ng-repeat="child in arr2" data-ng-if="child.parent_id == parent.id">
<li>{{child.body}}</li>
</div>
</div>
The solution depends on how often arrays are changed and how big arrays are.
The fist solution is to use filter. But in this case it would be called at least twice (to make sure that result is "stabilized" - selected same elements).
Other solution is to $watch by yourself original array and prepare "view" version of it injecting children there. Personally I would prefer the second as more explicit.
However if you can reuse "find-the0child" filter in other parts of your application you can go with first one - AngularJS will re-run filter only after original array modified.
If needed I can provide here an example of implementation of one of these options - add the comment to answer.
Say I have
<div ng-repeat="item in scope.allItems">
<div ng-click="doSomething(...)"></div>
</div>
If I want to do something with item upon click, which one is a better option?
Option 1
Use ng-click="doSomething($index) and have:
$scope.doSomething = function($index) {
var myItem = $scope.allItems[$index];
}
Option 2
Use ng-click="doSomething(item) and have:
$scope.doSomething = function(myItem) {
// Do whatever
}
If you are just doing something to the item, pass that in. This way the function doesn't need to know which array the item belongs to:
$scope.addColor = function(car) {
car.color = 'red';
};
If, on the other hand, you need to modify the array I prefer to pass in $index and save having to loop through the array looking for a match:
$scope.deleteCar = function(index, cars) {
cars.splice(index, 1);
};
If you want use filter for scope.allItems, use Option 2 - because using filters change element $index.
If you don't use filter,you can use Option 1.
IMHO Option 2 more easy and useful than Option 1, so i already use Option 2.
I want to know how to loop through the children of everyone. I'm using Firebase and AngularJS.
My firebase object looks like:
To me it looks like a dictionary, so from Getting a list of associative array keys I have tried
syncData('everyone').$bind($scope, 'everyone').then(function() {
var keys = $scope.everyone.$getIndex();
for (var key in $scope.everyone) {
console.log("key : " + key + " value : " + $scope.everyone[key]);
}
});
The log does contain the child objects, but it also includes all the methods. Like so
... Before this line is all the other methods.
key : $on value : function (a,c){if("loaded"==a&&b._loaded)return b._timeout(function(){c()}),void 0;if(!b._on.hasOwnProperty(a))throw new Error("Invalid event type "+a+" specified");b._on[a].push(c)} controllers.js:58
key : $off value : function (a,c){if(b._on.hasOwnProperty(a))if(c){var d=b._on[a].indexOf(c);-1!==d&&b._on[a].splice(d,1)}else b._on[a]=[];else b._fRef.off()} controllers.js:58
key : $auth value : function (a){var c=b._q.defer();return b._fRef.auth(a,function(a,b){null!==a?c.reject(a):c.resolve(b)},function(a){c.reject(a)}),c.promise} controllers.js:58
key : $getIndex value : function (){return angular.copy(b._index)} controllers.js:58
key : -JH45WOOAtnZfUZkrJb1 value : [object Object] controllers.js:58
key : -JH45YdfwptGv3y6UqyV value : [object Object] controllers.js:58
key : -JH45_zxptV_dmibyGzL value : [object Object]
Is there a way I can get just the children?
I'm doing this because my code was designed to use an array, but Firebase discourage using arrays (for values that multiple people could change). So I'm trying to loop through the firebase dictionary and copy the objects into an array on the client side. So I don't have to change too much of my code.
UPDATE: As of AngularFire 0.8.x, one can use $asArray() to obtain a sorted array of the records and this answer is no longer necessary
The correct way to iterate values in an angularFire object is by using $getIndex(). You have this in your code above, but did not utilize it in the for loop.
Since you are already using the angularFire lib (syncData is the angularFire-seed service that uses angularFire), there is no need to worry about calling $apply() or any of the other complexities of coaxing data into Angular detailed in the previous answer (which is a good response for a raw Firebase/Angular implementation).
Instead, just change your for loop to iterate the keys instead of the angularFire instance:
syncData('everyone').$bind($scope, 'everyone').then(function() {
var keys = $scope.everyone.$getIndex();
// utilizing Angular's helpers
angular.forEach(keys, function(key) {
console.log(key, $scope.everyone[key]);
});
// or as a for loop
for(var i=0, len = keys.length; i < len; i++) {
console.log(keys[i], $scope.everyone[keys[i]]);
}
});
To utilize the object in the DOM, use ng-repeat:
<ul>
<li ng-repeat="(key,user) in everyone">{{key}}, {{user|json}}</li>
</ul>
The way I do it is pretty simple, you just push all the children into an array when they arrive like this.
Everyone.on('child_added', function(snap) {
implementLogic(snap.val());
$scope.$apply();
});
function implementLogic(person) {
$scope.everyone.push(person);
if (something) {
$scope.todaysPeople.push(person);
}
if (something else) {
$scope.peopleToTest.push(person);
}
...
}
That leaves you with an array of the child objects you want.
Use ng-fire-alarm with collection: true like this:
angular.module('demo', ['ng-fire-alarm']).controller('IndexCtrl', IndexCtrl);
function IndexCtrl ($scope) {
var everyone = new Firebase(URL).child('everyone');
everyone
.$toAlarm({collection: true}) // will transform object into native array
.$thenNotify(function(everyones){ // notify you on ANY changes
$scope.everyones = everyones;
});
}
I have an ng-repeat like:
<div ng-repeat="(k, v) in query_p[$index].tags">
I would like it so that if the key (k) is a certain string, say "foo", that string always appears first in the list. It seems the getter option or orderBy only works with arrays. Anyone have an example of how they might achieve this?
Basically you have an unordered object, and you want it to have some kind of order.
To do that you need to create a function that returns some ordered object.
myApp.filter('promote_foo', function() {
return function(object, comp) {
console.log(object);
console.log(comp);
var ordered = [];
for (var key in object) {
var obj = {
key: key,
value: object[key]
};
if (key === comp)
ordered.splice(0,0,obj);
else
ordered.push(obj);
}
console.log(ordered);
return ordered;
};
});
the function takes a parameter which will promote and object if the key matches it. Now I only call it in the controller directly, but you could use it just like any angular filter.
$scope.order = $filter('promote_foo')($scope.data, 'foo');
Also, you can play with the fiddle here.
Hope this helped!