Can someone help me pull the unique object name from contents ($Id). I'm able to loop over $scope.data in my template with ng-repeat but I can't get the name of that array. Need this to build a URL reference.
In short, how do I get "2015-02-27T20:24:11-06:00"? I can pull out item.count, item.handle, item.img_url, but {{item.$id}} doesn't work.
obj.$asArray();
obj.$asObject();
If you fetch the data $asArray() and save it on $scope.data you should simply be able to get the $id as you describe.
<div ng-repeat="item in data">
<p>id: {{item.$id}}</p>
</div>
However, I can't help but notice that your casing in $Id is wrong.
Related
I am calling my WCF webservice which basically Serializing my Class and returing JSON using Newtonsoft.
Following is my JSON response which i am trying to use in AngularJS.
[{"OptionListId":{"Options":[{"OptionId":1,"OptionName":"Yes","IsActive":true},{"OptionId":2,"OptionName":"No","IsActive":true}],"OptionListId":1,"OptionListName":"YesNo","IsActive":true},"QuestionId":2,"QuestionName":"What is your name?","QuestionType":"text","ShortText":"Short Data","IsActive":true,"GroupsList":null}]
I have assigned it to $scope.data.
$http.get("http://localhost:52626/Service1.svc/GetQuestions").then(function (response) {
$scope.data = angular.fromJson(response.data);
console.log($scope.data);
});
Now when i am trying to use it inside ng-repeat it is not working.
<div class="form-group" ng-repeat="d in data">
<label>{{d}}</label>
</div>
Error which is showing in browser is as per following.
Error: angular.js:9778 Error: [ngRepeat:dupes]
Use ng-repeat="d in data track by $index". If you didn't use track by $index, It will throw the error because of duplicates. Even you can't push in to the data if you didn't mention track by $index.
The only mistake i was doing was, i need to do angular.fromJson first to serialize it. and then i needed it to parse using JSON.parse for making it Json Object.
Rest of the things are ok.
I get from firebase an object with the following code:
var ref = firebase.database().ref().child("categories");
ref.orderByChild("status")
.equalTo('featured')
.on('value', function(snap) {
console.log('Categories in range', snap.val());
$scope.categories = snap.val();
})
The object I get contains a couple of objects with the data which look like my example here:
Example Object from firebase
The results i use in my template view with ng-repeat.
<ul class="list">
<li ng-repeat="(category_id, category) in categories | toArray | orderBy:'position'">
<div style="background-image: url({{category.images[0].src}});" ng-click="category_action(category_id)">{{category.name}}
</div>
</li>
My problem is now that I want to give the original object name back with ng-click. I tried to use the (key, value) solution from angular for ng-repeat but I dont get the original object name back and only a index number like 0,1,2,3 etc.
What I need is the original name like in this example KU8JfAZRCsPJy9uOMqm.
If i only get the index number (0,1,2) back how can I know in my controller which object name this was originaly? Like for example $scope.categories.???
Thank you for your help in advance, I did research but found only people with the same problem but no working solution.
PS: I use firebase 3.x and angular 1.x
Lets assume I am binding one big nested object to the $scope of the view shown in the code. Now, the value of an "e" object is updated. This would cause angular the check all bindings and update the DOM. If I used "track by" instead, in each ng-repeat directive, would that mean that only the binding for the "e" object would react and the dom for the "e" object be updated?
<div ng-repeat="a in b">
<div ng-repeat="c in a">
<div ng-repeat="d in c">
<div ng-repeat="e in d">
{{e.value}}<br>
</div>
</div>
</div>
</div>
The bindings will be checked no matter what, and updated only if different, per the digest cycle. As for re-building the DOM elements, Angular uses unique identifiers to determine whether each item in an ng-repeat already has a matching DOM element, or if it needs to render a new one.
By default, Angular creates and manages these unique identifiers under the hood, using the $id of each object (or $$hashKey).
track by was added later, as a way to tell Angular to use a unique identifier of your choice, rather than managing it under the hood.
This is useful when updating the data removes/changes the $id or $$hashKey, triggering unnecessary re-builds of each DOM element, even when the data didn't change at all.
Consider this example:
You have an ngRepeat which displays data records:
<li ng-repeat="item in data">{{item.value}}</li>
You use a service DataService to update your data, which has a fetch() method which retrieves data from an SQL database, and returns the records.
Updating the data in your $scope involves calling that service, and re-assigning your data variable to the result:
$scope.data = DataService.fetch();
That means, even if only one item was different, all the $id or $$hashKey properties are gone or different, and Angular will assume all items are new. It will re-build all the DOM elements from scratch.
However, since your data is from an SQL database, you already have a unique identifier (primary key), the id column. You could then change your ngRepeat to be:
<li ng-repeat="item in data track by item.id">{{item.value}}</li>
Now, instead of looking for $$hashKey, which gets lost every time you re-assign the data, Angular will use the property you told it to (item.id). Since that property does persist across re-assigning the variable, the list is once again optimized, because Angular will only re-build DOM elements for new items.
I have a tree like structure, received as JSON from some PHP code which I wrote for my server.
The code is far to complex to post, so let's use an example:
A company has
multiple departments, each of which has 0..n
jobs, each of which has 0..n
people
So, I can find myself with something like
$scope.departments[1].jobs[1].people[1]
$scope.departments[1].jobs[1].people[2]
etc
I have $scope variable for the current user-selected department, job and person.
My problem is where I want to use an ng-repeat of the jobs in the HTML view for the jobs.
The statement
<div ng-repeat="job in departments[{{departmentId}}].jobs>
gives Error: [$parse:syntax], as does
<div ng-repeat="job in departments[$scope.departmentId].jobs>
(which I tried in desperation).
What is the correct syntax?
I am wondering if I will need to try
<div ng-repeat="job in GetJobsForCurrentDepartment()>
since $scope.departmentId would be in scope in my controller, but is not in the HTML view for the departments.
Since a view has a controller associated with it, and controller has a $scope associated with it. It is not required to use $scope the html element for referencing the variables defined in the controller. Any variable used with a element in a view is looked up in the scope associated with that element. $scope is required only in the script.
Thus you can write
<div ng-repeat="job in departments[departmentId].jobs>
This will fetch the value of departmentId & jobs inside it will be processed by the ng-repeat directive.
You don't have to mention $scope attached with a varable in view
try like this
<div ng-repeat="job in departments[departmentId].jobs>
JS
$scope.departmentId=1;
I have an array of 3 items and want them to be "ng-repeated"
<li ng-repeat="item in obj.items id="testobj{{testobj.number}}">
</li>
When I look at the page, it appears that the id of the "li" is just "testobj" for all 3 items and not testobj1 testobj2 testobj3 like I was expecting. What is the issue?
Your ng-repeat attribute is missing a final ".
The {{ }} binding is probably coming back with no data and so being treated as if it was an empty string. I see no reference to testobj (the scope variable) anywhere outside of your binding. Is this defined, or should your id read id="testobj{{item.number}}" or something similar?