I'm trying to learn Angular with Firebase by running through a typical to-do tutorial, but I'm sort of modifying the app as I go. Instead of list of to-dos, I'm actually creating 'Users'.
Firebase is set up correctly, pulling object data down from Firebase works as well and I can see everything populating as expected via ng-repeat.
But I'm trying to 'add a new member' using the .push() method, and I'm receiving an error. Please take a look:
Here's an example of the JSON data that I uploaded to Firebase (just one user)
{
"members": {
"-JWT5y43YFy1mGirVVS2": {
"date": 1410328158691,
"firstname": "Michael",
"lastname": "Jordan",
"project": "sample project description",
"image": "http://telehealth.org/wp-content/images/user-placeholder.jpg",
"upcoming": "PTO on Thursday",
"status": {
"color": "red",
"contact": {
"email": "test#email.com",
"yahoo": "yahooIM"
},
"projects": {
"projectone": "project one",
"projecttwo": "project two",
"projectthree": "project three"
}
}
}
}
}
Here's my .html code
<h1 id="teamTitle">Team Members</h1>
<div class="addMember">
<p>add member</p>
<form class="formmember"
name="memberform"
ng-submit="addMember()"
novalidate>
<div class="inputwrapper">
<input type="text" name="firstname" placeholder"First Name" ng-required="true">
<button type="submit" class="btn"
ng-disabled="memberform.$invalid">Add</button>
</div>
</form>
</div>
<ul class="cbp-rfgrid" ng-repeat="member in members">
<li class="{{member.status.color}}">
<img src="{{member.image}}">
<div>
<h3>{{member.firstname}}</h3>
<button>View</button>
</div>
</li>
</ul>
And here's my Controller.js
myApp.controller('MembersController', function($scope, $firebase){
var ref = new Firebase('https://scrumcheck.firebaseio.com/members');
var members = $firebase(ref);
$scope.members = members.$asObject();
$scope.addMember = function(){
members.$push({
firstname: $scope.firstname,
date: Firebase.ServerValue.TIMESTAMP
});
}
});
The console log shows this error:
Error: Firebase.set failed: First argument contains undefined in property 'firstname'
I was hoping that by pushing to Members, an object with just the firstname key, it would allow me to do so. Am I only allowed push() an entire object, with all key-values in it?
Thanks!
Checkout your $scope.firstname model, that's where the issue is. make sure it's not a null value and properly defined.
Related
I am trying to display one item from a nested array:
{
"results":[
{
"info": {
"first_name": "JOHN",
"last_name": "DOE"
}
}
]}
I have tried multiple things but cannot get it to work to only display "first_name".
What I've tried is:
<div ng-repeat="s in display.results">
<p>
{{s.info}}
</p>
</div>
But that just goes horribly wrong.
Any help would be appreciated.
You forgot to access the 'first_name' property
<div ng-repeat="s in display.results">
<p>
{{s.info.first_name}}
</p>
</div>
I have a project where I am trying to use Typeahead (ui.bootstrap.typeahead) from http://angular-ui.github.io/bootstrap/
I have a select loading data options from a remote server(data1.json).
When the user type into select, I´d like to show on dropdown something with the format "Acrelandia - AC"(the format is cityname+' - ' +id), and the ng-model needs contain the next data:{city:'Acrelandia',state:'AC'}
Of course, The seleted text needs to be something as: "Acrelandia - AC"
I have tried the next but, I don´t know how format the result from promise to my requirements. It shows all cities in wrong format.
js:
data1:json:
{
"state": [
{
"id": "AC",
"name": "Acre",
"city": [
"Acrelandia",
"Assis Brasil",
"Brasileia",
]
},
{
"id": "AL",
"name": "Alagoas",
"city": [
"Agua Branca",
"Anadia",
"Vicosa"
]
}
]
}
js:
app.controller('infoController',['$scope','$http',function($scope,$http){
$scope.getLocation = function(val) {
return $http.get('/data1.json', {
params: {
address: val,
sensor: false
}
}).then(function(response){
return response.data.estados.map(function(item){
return item.cidades.toString();
});
});
};
Markup:
<div class="input-group ">
<input type="text" ng-model="customerCity" placeholder="Type something" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> No Results found
</div>
</div>
I have several divs on my page which use an ng-if to show. My issue is that certain elements are duplicates.
What I would like to do is use another expression in the ng-if for this example i added below (hideMultiplePost) to hide these duplicate elements and my idea is to identify them by adding a class which uses the post id since the duplicate elements share the same id.
<div ng-repeat="post in postList">
<div class="{{post.id}}" ng-if="post.cat.length > 0 && hideMultiplePost(post.id)">
</div>
<div ng-repeat="post in postListV2">
<div class="{{post.id}}" ng-if="post.cat.length > 0 && hideMultiplePost(post.id)">
</div>
Can someone put me in the right direction in using an expression (hideMultiplePost) where I check for duplicate classes and exclude them from the frontend but leave one them as I don't want to exclude them all.
You could use the existing 'unique' filter supplied by angular UI.
The unique filter allows you to supply a field in your model that should be unique. I assume that all of your posts have a id and that this id is unique. You can filter out multiple posts based on this field.
After the applied filter, you can still use your ng-if statement to check if the post contains any categories.
Check the snippet for more info on how to use it.
angular
.module('app', ['ui.filters']);
angular
.module('app')
.controller('PostListController', PostListController);
function PostListController() {
var vm = this;
vm.posts = getPosts();
}
function getPosts() {
return [{
"id": 1,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 2,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 3,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 4,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 5,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 3,
"title": "Post Title",
"content": "Post content here"
}, {
"id": 4,
"title": "Post Title",
"content": "Post content here"
}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<div ng-app="app">
<div ng-controller="PostListController as vm">
<ul>
<li ng-repeat="post in vm.posts | unique:'id'">
<b>#{{ post.id }} {{ post.title }} </b><br />
<p>{{ post.content }}</p>
</li>
</ul>
</div>
</div>
If you cannot control the data in, then you can remove dupes using a filter. I have assumed it's an ng-repeat, but you can edit for your own use. More detail in fiddle.
<div ng-repeat="item in data | dedupe:'id'">
{{item.id}}: {{item.name}}
</div>
Edit:
Concat the two sources (postList and postListV2) in your controller, and then use the filter to dedupe:
function MyCtrl($scope) {
$scope.postList = postList;
$scope.data = $scope.postList.concat(postListV2)
}
More info in the fiddle:
http://jsfiddle.net/Lvc0u55v/7736/
I'm working with a nested form group structure with Angular 2 beta "FormBuilder" and for the life of me I can't get values into the nested form group. It's weird because binding works just fine. I can send a "user" object to the form and it fills in all the values for the user and their address. But when sending the form value out (say, to an HttpPost), it looks just like the object below...
FWIW I'm following Mosh Hamedani's excellent Angluar 2 course on Udemy and have checked and double checked that the relevant code matches his here: https://github.com/mosh-hamedani/angular2-course
Perhaps what I need is to be told where else to look in my code?
Here's my form group as shown by placing {{ form.value | json }} at the end of my form:
{
"name": "Leanne Graham",
"email": "Sincere#april.biz",
"phone": "1-770-736-8031 x56442",
"address": {
"street": null,
"suite": null,
"city": null,
"zipcode": null
}
}
this is the constructor in my component:
constructor(
fb: FormBuilder,
private router: Router,
private usersService: UsersService,
private params: RouteParams
){
this.form = fb.group({
name: ['', Validators.required],
email: ['', EmailValidators.mustBeEmail], // I hadn't considered the obvious: if it doesn't exist it also doesn't qualify as email.
phone: [],
address: fb.group({
street: [],
suite: [],
city: [],
zipcode: []
})
});
}
This is the form in my template (truncated for brevity):
<div class="col-md-6 well">
<!--the "fieldset" element is needed for this kind of grouped layout.-->
<form [ngFormModel]="form" (ngSubmit)="save()">
<fieldset>
<legend>User</legend>
<div class="form-group">
<label>Name</label>
<input type="text" [(ngModel)]="user.name" ngControl="name" #name="ngForm" class="form-control">
<div class="alert alert-danger" *ngIf="name.errors && name.touched">
The user name is required.
</div>
</div>
*** Email and Phone similar ***
</fieldset>
<fieldset ngControlGroup="address">
<legend>Address</legend>
<div class="form-group">
<label>Street</label>
<input type="text" [(ngModel)]="user.address.street" ng-control="street" class="form-control">
</div>
*** suite, city, and zip similar ***
</fieldset>
{{ form.value | json }}
<button [disabled]="!form.valid" class="btn btn-primary" type="submit">Save</button>
</form>
</div>
ng-control="street"
should be
ngControl="street"
like you did with name
I am trying to create an Angular filter on a radio button via ng-click that compares two seperate JSON objects and returns the object if the value is the same within a ng-repeat list.
Right now I am pulling in an event Api that returns an object that looks something like this -
Event API-
[{
"instructor_id": 502,
"datetime": "2014-12-07T00:30:00.000Z",
"end_time": "2014-12-07T01:00:00.000Z"
}, {
"instructor_url": 510,
"datetime": "2015-01-20T16:00:00.000Z",
"end_time": "2015-01-20T16:45:00.000Z"
}]
And I also have a separate Api that pulls in a list of the user's favorite instructor's and returns that favorited instructor's id, like this
Favorite Instructor API
[{
"user_id": 510
}, {
"user_id": 506
}]
I can get the filter to work if I just hard code in the instructor_id to a filter like so -
<input type="radio" ng-click="instructor_url = {instructor_url: '510}"/>
and then running the filter on my ng-repeat list
<li ng-repeat="event in events | filter:instructor_url">
But obviously this isn't what I'm looking for. I want to be able to call a function that matches them and returns only the events where the instuctor_id from the Event API match the user_is from the Favorite Instructor API.
Any help would be appreciated.
Please see demo below
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope) {
$scope.events = [{
"instructor_url": 506,
"datetime": "2014-12-07T00:30:00.000Z",
"end_time": "2014-12-07T01:00:00.000Z"
}, {
"instructor_url": 510,
"datetime": "2015-01-20T16:00:00.000Z",
"end_time": "2015-01-20T16:45:00.000Z"
}];
$scope.FavoriteInstructor = [{
"user_id": 510
}, {
"user_id": 506
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
<label ng-repeat="user in FavoriteInstructor" ng-init="i= $parent">{{user.user_id}}
<input type="radio" name="instructor" ng-model="i.instructor_url" ng-value="user.user_id" />
</label>
<label>all <input type="radio" name="instructor" ng-model="instructor_url" ng-value="" /></label>
<hr/>
<p>Events</p>
<hr/>
<li ng-repeat="event in events | filter:instructor_url">
<h3>Instructor Url:{{event.instructor_url}}</h3>
<p>{{event.datetime | date:short}}-{{event.end_time | date :short}}</p>
</li>
</div>
</body>