I have a Simple form like Below
<form novalidate name="f1" ng-submit="SaveData(User)">
<b>Fname</b><input type="text" ng-model="User.fname" /><br />
<b>Lnamew</b><input type="text" ng-model="User.lname" /><br />
<input type="submit" />
</form>
And my controller is
app.controller('HomeCtrls', function ($scope) {
$scope.msg = "Ok...."
$scope.Getdata = [];
$scope.SaveData = function (data) {
$scope.Getdata.push(data)
}
})
Here i wana to bind Getdata in table Like
<tr ng-repeat="formdata in Getdata">
<td>{{formdata.User.fname}}</td>
<td>{{formdata.User.lname}}</td>
this is your answer with a little changes
var app = angular.module('formApp',[]);
app.controller('formController',function($scope){
$scope.Getdata = [];
$scope.SaveData = function (data) {
$scope.Getdata.push({
fname:$scope.fname,
lname:$scope.lname
})
console.log($scope.Getdata)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="formApp" ng-controller="formController">
<form novalidate name="f1" ">
<b>Fname</b><input type="text" ng-model="fname" /><br />
<b>Lnamew</b><input type="text" ng-model="lname" /><br />
<button type="button" ng-click="SaveData()">Save</button>
</form>
</div>
Related
I can't understand how to push object into an array I tried few different ways and still can't figured it out.
var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
$scope.userInfo = [];
$scope.pushInArray = function() {
$scope.userInfo.push($scope.users)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">
<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray()">Add</button>
<pre>{{userInfo}}</pre>
</div>
at click of add button I push the users information in userInfo properities. I works on first time but If I modified the the value already stored value also modified(after push value is modifying).
try angular.copy, this will copy the exist object with a new instance.
var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
$scope.userInfo = [];
$scope.pushInArray = function() {
var user = angular.copy($scope.users);
$scope.userInfo.push(user);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">
<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray()">Add</button>
<pre>{{userInfo}}</pre>
</div>
You need to empty yours users before setting it to new values:
$scope.userInfo = [];
$scope.pushInArray = function(data) {
$scope.userInfo.push(data)
$scope.users = null;
}
HTML:
<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray(users)">Add</button>
<pre>{{userInfo}}</pre>
Here is the working Plnkr
You need to pass the object to the scope function to persist it.
var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
$scope.userInfo = [];
$scope.pushInArray = function(data) {
var entry = (JSON.parse(JSON.stringify(data)));
$scope.userInfo.push(entry);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">
<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray(users)">Add</button>
<pre>{{userInfo}}</pre>
</div>
I am trying to find a way to create a simple login form with Angularjs and Firebase. I currently have a simple signup form, which adds a userName into my firebase database. All I need to know is how to get a login page that accepts a user once the userName is identified in the firebase system, and to possibly make a callback error if there is no such userName within the database. This is my signup form:
<html ng-app="myApp">
<body ng-controller="userCtrl">
<div class="centerForm">
<form>
<div class="form-group">
<label for="exampleInputUser">Username</label>
<input type="username" ng-model="userName" class="form-control" id="exampleInputUser" placeholder="username">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" ng-model="userPassword" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<table class="nav" align="center">
<tr>
<td>
<p><button type="submit" class="btn btn-primary" ng-click="saveUser()">Submit</button>
Sign Up</p>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
and this is my sign up code:
<script>
angular.module('myApp', [])
.controller('userCtrl', function($scope) {
$scope.userName ="";
$scope.userPassword="";
$scope.myData = new Firebase( "https://myfirebaseapp.firebaseio.com/")
$scope.saveUser = function() {
$scope.myData.push({userName: $scope.userName});
};
});
</script>
My login form would then look something like:
<html ng-app="myApp">
<body ng-controller="userCtrl">
<div class="centerForm">
<form>
<div class="form-group">
<label for="exampleInputUser1">Username</label>
<input type="username" ng-model="userName" class="form-control" id="exampleInputUser1" placeholder="username">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" ng-model="userPassword" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<table class="nav" align="center">
<tr>
<td>
<p><button type="submit" class="btn btn-primary" ng-click="loginUser()">Submit</button>
Sign Up</p>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
AngularFire exists for this reason- to bind Angular with Firebase.
Here's a working example. This is the login controller:
var app = angular.module('appName');
app.factory("Auth", ["$firebaseAuth",
function($firebaseAuth) {
var ref = new Firebase("https://yourtester.firebaseio.com");
return $firebaseAuth(ref);
}
]);
app.controller('loginCtrl', ['$scope', '$state', '$http', 'Auth',
function($scope, $state, $http, Auth) {
$scope.auth = Auth;
$scope.auth.$onAuth(function(authData) {
$scope.authData = authData;
});
$scope.login = function() {
Auth.$authWithPassword({
email: $scope.email,
password: $scope.password
})
.then(function(authData) {
console.log('Logged in as:', authData.uid);
//$state.go('profile');
})
.catch(function(err) {
console.log('error:',err);
//$state.go('login');
});
};
}
]);
And this is the login.html file:
<body ng-app='appName' ng-controller="loginCtrl">
<h1>Login!</h1>
<form ng-submit='login()'>
<div class="form-group">
<label for="email">Email address</label>
<input id="email" ng-model='email' type="email" placeholder="Email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" ng-model='password' type="password" placeholder="Password" required>
</div>
<button class="btn btn-success">Login</button>
</form>
I'm using angular JS and my login function for Firebase looks like this in the controller:
app.factory("Auth", ["$firebaseAuth",function($firebaseAuth) {
var ref = new Firebase("https://myfirebaseapp.firebaseio.com");
return $firebaseAuth(ref);
}]);
$scope.login = function() {
$scope.authObj.$authWithPassword({
name: $scope.data.name,
email: $scope.data.email,
password: $scope.data.password
}).then(function(authData) {
authenticated = true;
console.log("Logged in as:", authData.uid, authenticated);
$location.path("profile");
check();
}).catch(function(error) {
authenticated = false;
console.error("Authentication failed:", error);
check();
});
}
we have controller which has ng-include to load an external html. now i want to access a control value in parent.
my template is MainMenuCreate
#{
Layout = null;
}
<div >
<h2>{{Headtitle}}</h2>
<p>
<div style="width:200px;">MainMenuId :</div>
<input type="text" name="MainMenuId" id="MainMenuId" data-ng-model="MainMenuId" />
</p>
<p>
<div style="width:200px;">MainMenu :</div>
<input type="text" name="MainMenu" id="MainMenu" data-ng-model="MainMenu" />
</p>
<p>
<div style="width:200px;">PageTitle :</div>
<input type="text" name="PageTitle" id="PageTitle" data-ng-model="PageTitle" />
</p>
<input type="button" name="btnSave" id="btnSave" value="Save" ng-click="Save()" />
and my main page is
<div data-ng-app="MainMenuModule">
<div data-ng-controller="MainMenuController">
<div data-ng-include="'MainMenuCreate'" >
</div>
{{MainMenuId}}
</div>
</div>
and controller is
app.controller('MainMenuController', function ($scope, MainMenuService) {
$scope.Save = function () {
var MainMenuRecord =
{
MainMenuId: $scope.MainMenuId,
MainMenu: $scope.MainMenu,
PageTitle: $scope.PageTitle
};
var promisePost = MainMenuService.post(MainMenuRecord);
promisePost.then(function (pl) {
$scope.MainMenu = pl.data.MainMenu;
loadRecords();
}, function (err) {
console.log("Err" + err);
});
}
});
when i call this save method then $scope.MainMenuId shows undefined
<div style="width:200px;">MainMenuId :</div>
<input type="text" name="MainMenuId" id="MainMenuId" data-ng-model="obj.MainMenuId" />
<div style="width:200px;">MainMenu :</div>
<input type="text" name="MainMenu" id="MainMenu" data-ng-model="obj.MainMenu" />
<div style="width:200px;">PageTitle :</div>
<input type="text" name="PageTitle" id="PageTitle" data-ng-model="obj.PageTitle" />
</div>
<input type="button" name="btnSave" id="btnSave" value="Save" ng-click="Save(obj)" />
app.controller('MainMenuController', function ($scope, MainMenuService) {
$scope.obj = {};
$scope.Save = function (obj) {
var MainMenuRecord =
{
MainMenuId: obj.MainMenuId,
MainMenu: obj.MainMenu,
PageTitle: obj.PageTitle
};
var promisePost = MainMenuService.post(MainMenuRecord);
promisePost.then(function (pl) {
$scope.MainMenu = pl.data.MainMenu;
loadRecords();
}, function (err) {
console.log("Err" + err);
});
}
});
Template for form submission. This page will display the form template. Initially it shows the TItle,Full Name. On clicking the 'Add Tags' link new input fields is been generated for entering tags.
On submit, the field input(story.tag) is not been included on RequestPayload
<form novalidate ng-submit="save()">
<div>
<label for="title">Title</label>
<input type="text" ng-model="story.title" id="title" required/>
</div>
<div>
<label for="firstName">Full Name</label>
<input type="text" ng-model="story.fullname" id="fullname" required/>
</div>
<div ng-controller="Note" >
<div ng-repeat="story in items ">
<label>Tag {{$index+1}}:</label>
<input type="text" ng-model="story.tag" id="tag" required/>
</div>
<a ng-click="add()">Add Tags</a>
</div>
<button id="save" class="btn btn-primary">Submit Story</button>
</form>
script :- app.js
angular.module("getbookmarks", ["ngResource"])
.factory('Story', function ($resource) {
var Story = $resource('/api/v1/stories/:storyId', {storyId: '#id'});
Story.prototype.isNew = function(){
return (typeof(this.id) === 'undefined');
}
return Story;
})
.controller("StoryCreateController", StoryCreateController);
function StoryCreateController($scope, Story) {
$scope.story = new Story();
$scope.save = function () {
$scope.story.$save(function (story, headers) {
toastr.success("Submitted New Story");
});
};
}
//add dynamic forms
var Note = function($scope){
$scope.items = [];
$scope.add = function () {
$scope.items.push({
inlineChecked: false,
tag: "",
questionPlaceholder: "foo",
text: ""
});
};
}
The story object inside ng-repeat is in another scope. This JSFiddle should do what you are looking for.
<div ng-app>
<div ng-controller="NoteCtrl">
<form novalidate ng-submit="save()">
<div>
<label for="title">Title</label>
<input type="text" ng-model="story.title" id="title" required/>
</div>
<div>
<label for="firstName">Full Name</label>
<input type="text" ng-model="story.fullname" id="fullname" required/>
</div>
<div ng-repeat="story in items">
<label>Tag {{$index+1}}:</label>
<input type="text" ng-model="story.tag" required/>
</div> <a ng-click="add()">Add Tags</a>
<button id="save" class="btn btn-primary">Submit Story</button>
</form>
<div ng-repeat="test in items">
<label>Tag {{$index+1}}: {{test.tag}}</label>
</div>
</div>
</div>
The NoteController:
function NoteCtrl($scope) {
$scope.story = {};
$scope.items = [];
$scope.story.tag = $scope.items;
$scope.add = function () {
$scope.items.push({
inlineChecked: false,
tag: "",
questionPlaceholder: "foo",
text: ""
});
console.log($scope.story);
};
}
How do I post data from a form in AngularJS?
<form data-ng-submit="doSomething()">
<input type="text" data-ng-input="do_obj.text"/>
<input type="email" data-ng-input="do_obj.email"/>
<input type="submit" value="Do something"/>
</form>
$scope.doSomething = function () {
$http({url: '/api/oauth2/register', method: 'POST', data: $scope.do_obj}
).then(function (data, status, headers, config) {
$log.info("data = ", data, "status = ", status,
"headers = ", headers, "config = ", config);
}
);
};
Plnkr (bootstrap styled)
See plunker code here
Changed data-ng-input into data-ng-model and updated data-ng-submit to pass in the model into the scope controller for processing.
HTML:
<body data-ng-app>
<div data-ng-controller="DoCtrl" class="container" style="margin: 15px">
<form data-ng-submit="doSomething(do_obj)" role="form" class="form-inline">
<div class="form-group">
<input type="text" data-ng-model="do_obj.bar"
placeholder="Enter text"
/>
</div>
<div class="form-group">
<input class="form-group" type="email"
data-ng-model="do_obj.email"
placeholder="Enter email"
/>
</div>
<div class="form-group">
<input class="btn btn-lg" type="submit"
data-ng-class="{'btn-info': hover}"
data-ng-mouseenter="hover = true"
data-ng-mouseleave="hover = false"
value="Do something"
/>
</div>
</form>
</div>
</body>
The syntax for posting is $http.post({url}, {payload});. I have updated your controller function to take in a parameter to pass to the post.
Controller code:
function DoCtrl($scope, $http, $log) {
$log.info("In DoCtrl");
$scope.do_obj = {};
$scope.doSomething = function (data) {
$http.post('/api/oauth2/register', data)
.success(function(successData){
console.log(successData);
});
}
}