I have a list of objects from Firebase using the angularFire implicit data sync, and I'd like to render their unique ids (for use in urls) along with the other data properties using ng-repeat. Can I make angularFire return in such a way that I have access to the object ids within ng-repeat, the same way that members of an angularFireCollection have an $id property? If not, what is the right way to accomplish this? Hypothetical code (that doesn't work):
Controller:
myApp.controller('ItemListCtrl', ['$scope', 'angularFire',
function ItemListCtrl($scope, angularFire) {
var ref = new Firebase(firebaseUrl);
angularFire(ref, $scope, 'items');
}
]);
View:
<div ng-repeat="item in items" >
{{item.text}}
</div>
I think all you need is:
<div ng-repeat="(name, item) in items">
{{item.text}}
</div>
The anglularFire object behaves just like a normal javascript object.
To get the unique ID that is created via the angularfire $add method, you can use the $id property:
<div ng-repeat="item in items" >
{{item.text}}
</div>
Related
JS:
function ctrlr($scope, $http) {
$http.post(urlhere).success(function(data) {
$scope.Items = data;
});
}
HTML:
<body ng-app="">
<div ng-controller="ctrlr">
<div ng-repeat="item in Items">
{{ item.Name }}
</div>
</div>
</body>
Data returned from post request is a list of a class object (that contains Name property)
Checked, data is not empty.
It returns an xml formatted response.
Why won't my ng-repeat work? Tried using jquery ajax, which returned json but still no go
If you're running ng-repeat on a js object instead of array you should do something like this
<div ng-repeat="(key, val) in Items">
<span>{{key}}</span>
<span>{{val}}</span>
Well it may sound silly but the problem was that $scope.Items is being initialized in the success, an async method so it was undefined when it arrived to ng-repeat.
I solved it by switching to jquery ajax and adding async: false
I am having some difficulty getting routeParams to work for my site. I am attempting to have a list of groups displayed with the ability to select one and be routed to a page with that groups specific details. I asked a similar question yesterday but don't think I knew exactly what to ask for. The way I have it set up now I only see
'/#/viewgroup/:id'
in the browser instead of the actual id number and the page is blank. Thank you for the help!
ROUTES:
.whenAuthenticated('/viewgroup/:id', {
templateUrl: 'views/groups/groupDetail.html',
controller: 'GroupCtrl'
})
INDEX.HTML:
<div class="col-md-4" ng-repeat="group in data.groups | filter: filterObject | filter: search">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">{{group.name}}</h5>
</div>
GROUPDETAIL.HTML:
<div ng-show="group in data.groups">
<ol class="breadcrumb">
<li>Home</li>
<li>Groups</li>
<li class="active">{{group.name}}</li>
</ol>
GROUPCTRL:
I am only using the 'groups/data.json' for the data because I am not sure how to pull in this data from the firebase server. Pulling from the server is really what I need.
creativeBillingApp.controller('GroupCtrl', ['$scope', 'groupsService', '$routeParams', function( $scope, groupsService, $firebase, $routeParams, $http) {
$http.get('groups/data.json').success(function(data){
angular.forEach(data, function(item) {
if (item.id == $routeParams.groupId)
$scope.group = item;
});
});
The :id syntax is only used in the routeProvider to indicate where it should look for the id value in the URL. In the view you use the normal {{}} or ng-bind notation to inject that id value into the generated HTML.
Assuming that your groups is the result of a $firebase(ref).$asArray() somewhere, you can access the id value of each item using $id.
So where you now have <a href="#viewgroup/:id"> in your index.html, simply put <a href="#viewgroup/{{group.$id}}">. Angular will substitute that for the group id when it renders the template.
I am new to angularjs and just started learning it. I am trying to build a dropdown equivalent from angularjs without using select.
Html
<div ng-app="App" ng-controller="OrderExportCtrl" >
<li class="box-ddl" >
<div ng-model="fruit" ng-options="f for f in fruits" class="ddlListSmall">
</div>
</li>
JavaScript
var app = angular.module('App', []);
app.controller('OrderExportCtrl', function ($scope) {
$scope.fruit = ['apple', 'orange', 'mango', 'grapefruit', 'banana', 'melon'];
});
Please find the JsFiddle here. I am not getting what mistake I am doing, but my dropdown is not binding.
Please guide me to fix my issue.
ngOptions is only for select elements (it is used by the select directive). You can use ngRepeat to achieve the same result. You can use ngClick to set your model directly.
<div class="list">
<div class="option" ng-repeat="f in fruits" ng-bind="f"
ng-click="fruit.selected = f"></div>
</div>
Make sure the value you're setting is inside an object that is defined in the controller, otherwise you'll just set it inside the row's scope rather than the controller's. Alternatively use ng-click="$parent.fruit = f" to reference the parent scope, which in this case is the controller's (but may not always be).
i don't no how do i explain my question,
ok let me try,
How to pass value from another div with same controller name?
<div ng-controller="myCtrl">
<select ng-model="filterBy" ng-options="filtration.title for filtration in filter_preferences"></select>
</div>
---------------------------------------------------
<div ng-controller="myCtrl">
<select ng-model="filterBy" ng-options="filtration.title for filtration in filter_preferences"></select>
<ul>
<li ng-repeat="vals in datas | filter: vals.completed = filterBy.value">{{vals.title}}</li>
</ul>
</div>
From the second div when i filter i works fine, but the same filter i've applied on the top with same controller but it doesn't work.
DEMO PLUNKER
The problem is that under each ng-controller it's creating a new $scope. This means they don't share $scope at all, and there are two different controller instances as well.
So, to communicate between two controllers, the common practice is to use a service.
I've updated your plunk with a very basic example.
The idea is that you create a service like:
app.value('sharedData', { filteredBy: true});
Then inject it into your controller and put it on your scope like so:
app.controller('MyCtrl', function($scope, sharedData) {
$scope.sharedData = sharedData;
});
Then after that you'd use it as your ng-model value and your filter:
<select ng-model="sharedData.filteredBy" ng-options="x.value as x.title for x in filter_preferences"></select>
<ul>
<li ng-repeat="vals in datas | filter: { completed: sharedData.filteredBy }">{{vals.title}}</li>
</ul>
From there it will work because both controllers (and $scopes) now have an instance of the same object... your sharedData service.
You need to specify
ng-controller="myCtrl"
where the ng-app is and remove all the other ng-controller statements. This is because whenever you are trying to do ng-controller in individual div it is creating a local scope for that particular div and then any change in the dropdown is refreshing that local scope.
Code:
<body ng-app="myApp" ng-controller="myCtrl">
<div >
<select ng-model="$parent.filterBy" ng-options="filtration.title for filtration in filter_preferences"></select>
</div>
---------------------------------------------------
<div>
<select ng-model="$parent.filterBy" ng-options="filtration.title for filtration in filter_preferences"></select>
<ul>
<li ng-repeat="vals in datas | filter: vals.completed = $parent.filterBy.value">{{vals.title}}</li>
</ul>
</div>
</body>
Controller Code change donw:
$rootScope.filterBy = $scope.filter_preferences[1];
Earlier it was:
$scope.filterBy = $scope.filter_preferences[1];
UPDATE:
You can have the filterBy variable on the rootScope rather than the local scope. So that any changes to the local scope will be done at the root level and changes will reflect everywhere
Tried this in your plunker and it is working.
You could not mention controller twice under ng-app
I am having an array in controller as follows
function FooController($scope) {
$scope.items = ["a","b","c"];
}
I used ng-repeat to show the data in items,
<div ng-app>
<div ng-controller="FooController">
<ul ng-repeat="item in items">
<li>{{item}}</li>
</ul>
</div>
</div>
I got the result as a,b,c order. I want to show it in reverse order. that means c,b,a without changing its order in the controller or without creating a filter. How to do that?
Check this link
I faced the same problem, but with an array of objects. This quick solution worked for me, but using the filter is still the best practice.
<li data-ng-repeat="item in data.slice().reverse()">
...
</li>
http://bootply.com/SgVBZvZ708
In order to avoid the writting of a custom filter, I suggest you to use this syntax :
<ul ng-repeat="item in items | orderBy:'-toString()'">
The documentation assume you sort an array of Objects but in your case there are just plain strings.
Wrap the strings in objects and use orderBy or create a new filter:
angular.module("app",[])
.filter("reverse", function(){
return function(items){
return items.slice().reverse(); // Create a copy of the array and reverse the order of the items
};
});
And use it like this:
<ul ng-repeat="item in items|reverse">
Updated fiddle (I've also updated the ng-app directive so it's passed the "app" module.)