I am trying to add user to database using bootstrap modalI am not getting any error but not able to fetch user data.
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-3 control-label" >First name</label>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="firstname">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Last name</label>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="lastname" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="add()">Add</button>
</div>
</div>
</form>
</div>
my controller is:
$scope.add = function()
{
console.log(firstname); //here i want to display fn&ln and make http request to codeigniter api o/p in console is: firstname(not the username entered)
}
And i also want to update it in database using codeigniter api call, can anyone plz help me through this?
You should use $scope.firstname you need to have $scope for accessing scope variables
Don't forget to add ng-app and ng-controller to your template HTML
Related
I have a form within my angular app (within SharePoint) that uses routing via hashbang, but when I click on a button in my form, it redirects to the root (like it can't resolve the URL so it uses the otherwise setting in my config), instead of executing the function.
Here is the HTML (my controller is defined in the routing):
<form name="newItem" class="form-horizontal" data-ng-submit="createItem()">
<fieldset>
<div class="form-group">
<label class="col-lg-2 control-label" for="itemtype">Type *</label>
<div class="col-lg-10">
<select class="form-control" id="itemtype" data-ng-model="selectedType"
data-ng-options="opt as opt.label for opt in types" required>
<option style="display:none" value="">Select a type</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="title">Title *</label>
<div class="col-lg-10">
<input class="form-control" name="title" id="title" type="text" data-ng-model="itemtitle" placeholder="Add your title (Limited to 70 characters)" data-ng-maxlength="70" required>
({{70 - newItem.title.$viewValue.length}} Characters Remaining)
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="body">Body *</label>
<div class="col-lg-10">
<textarea class="form-control" name="body" id="body" data-ng-model="itembody" rows="4" placeholder="Add your body (Limited to 500 characters)" data-ng-maxlength="500" required> </textarea>
Your summary will be displayed as follows ({{500 - newItem.body.$viewValue.length}} Characters Remaining):<br /> {{itembody}}
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-default" data-ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" data-ng-click="newItem">Submit</button>
</div>
</div>
</fieldset>
</form>
Here is my controller:
appControllers.controller('appItemPostCtrl', ['$scope', '$location', 'appItems', 'appTypes', function ($scope, $location, appItems, appTypes) {
var itemEntry = new appItems;
console.log(itemEntry);
$scope.types = [];
appTypes.query(function (typedata) {
var itemTypes = typedata.value;
// Foreach type, push values into types array
angular.forEach(itemTypes, function (typevalue, typekey) {
$scope.types.push({
label: typevalue.Title,
value: typevalue.Title,
});
})
});
$scope.createItem = function () {
itemEntry.Title = $scope.itemtitle;
itemEntry.$save();
}
$scope.cancel = function () {
}
}]);
UPDATE: It appears that this is related to SharePoint (My Angular Form is in SharePoint), as even setting the button type to submit as follows triggers the refresh instead of running the function. SharePoint is wrapping everything in a form since it inherits from the Master page of the Web, so when I added two "Angular Forms" to the page, the first angular form was closing the tag on the SharePoint form so the second was able to work. Does anyone have a stable workaround (beyond creating a custom masterpage). Image as follows:
I solved it by closing the tag of SharePoint instead of creating a custom masterpage. Ex:
<!-- Close the default form tag put in place by SharePoint instead of creating a custom Masterpage without this element that requires increased permissions and complexity to deploy. Without this tag closed, the form below will not render properly -->
</form>
<div>
<form id="newItemForm" class="form-horizontal" data-ng-submit="createItem()">
<div class="form-group">
<label class="col-lg-2 control-label" for="itemtype">Type *</label>
<div class="col-lg-10">
<select class="form-control" id="itemtype" data-ng-model="selectedType"
data-ng-options="opt as opt.label for opt in types" required>
<option style="display:none" value="">Select a type</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="title">Title *</label>
<div class="col-lg-10">
<input class="form-control" name="title" id="title" type="text" data-ng-model="itemtitle" placeholder="Add your title (Limited to 70 characters)" data-ng-maxlength="70" required>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="body">Body *</label>
<div class="col-lg-10">
<textarea class="form-control" name="body" id="body" data-ng-model="itembody" rows="4" placeholder="Add your body (Limited to 500 characters)" data-ng-maxlength="500" required> </textarea>
</div>
</div>
<div class="col-lg-10 col-lg-offset-2">
<!--<button type="button" class="btn btn-default" data-ng-click="cancel()">Cancel</button>-->
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
Add type='button' to the buttons. I had this same problem before and assumed it was an angular bug of some kind.
Do both buttons exhibit this behavior or just the Submit button?
The submit button calls newItem from ng-click, but the name of the function in the js is actually createItem.
I am using CakePHP 3.x
I am trying to skin a themeforest theme into a CakePHP plugin.
Midway, I am deciding whether to skin a portlet into helper, element, or view cell.
The portlet html code looks something like this:
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box yellow">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> More Form Samples
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<h4>Inline Form</h4>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<hr>
<h4>Inline Form With Icons</h4>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail22">Email address</label>
<div class="input-icon">
<i class="fa fa-envelope"></i>
<input type="email" class="form-control" id="exampleInputEmail22" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword42">Password</label>
<div class="input-icon">
<i class="fa fa-user"></i>
<input type="password" class="form-control" id="exampleInputPassword42" placeholder="Password">
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<hr>
<h4>Horizontal Form</h4>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-md-2 control-label">Email</label>
<div class="col-md-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword12" class="col-md-2 control-label">Password</label>
<div class="col-md-4">
<input type="password" class="form-control" id="inputPassword12" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn blue">Sign in</button>
</div>
</div>
</form>
<hr>
<h4>Horizontal Form With Icons</h4>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail12" class="col-md-2 control-label">Email</label>
<div class="col-md-4">
<div class="input-icon">
<i class="fa fa-envelope"></i>
<input type="email" class="form-control" id="inputEmail12" placeholder="Email">
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-md-2 control-label">Password</label>
<div class="col-md-4">
<div class="input-icon right">
<i class="fa fa-user"></i>
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
<div class="help-block">
with right aligned icon
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn green">Sign in</button>
</div>
</div>
</form>
<hr>
<h4>Column Sizing</h4>
<form role="form">
<div class="row">
<div class="col-md-2">
<input type="text" class="form-control" placeholder=".col-md-2">
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder=".col-md-3">
</div>
<div class="col-md-4">
<input type="text" class="form-control" placeholder=".col-md-4">
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder=".col-md-2">
</div>
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
The look is like this:
My question is how do we know when we should use Element? When we should use Helper? and When should we use View Cells?
And which case should I use for the above? I am leaning towards Helper.
Element
Use it when you need to repeat presentation related stuff, usually HTML, a lot. For example I have a project in which three tables use records of an addresses table. The form part of all of these three that contains the address data is an element.
Helper
Use it to encapsulate view logik, don't put HTML in it if possible or other presentation related things. For example let it do something and depending on the result you can use an element of that result type to render the data: return $this->_view->render('items/' . $type . '_item');
If you look at the core helpers for example the HtmlHelper you'll see a property $_defaultConfig:
protected $_defaultConfig = [
'templates' => [
'meta' => '<meta{{attrs}}/>',
'metalink' => '<link href="{{url}}"{{attrs}}/>',
/*...*/
These are the template strings that are used to generate the HTML output. This separtes the markup pretty nice from the actual code that generates it. Take a look at the FormHelper as well, it's using widgets to render more complex output.
So this works fine with element like pieces of markup. By a rule of thumb I would say if your markup is longer than what you see there make it an element and call it from within the helper or make it a widget.
View Cells
Think of view cells as "Mini MVC" stacks that have a view and can load multiple models. They're IMHO similar to AngularJS directives if you're familiar with them. See this article for an example. I really suggest you to read it, it explains them and their use cases in detail.
I haven't done much with them yet but they can be used to replace requestAction() calls for example. You won't "pollute" your controller with methods that are not intended to be access by a request.
Taken from the linked article above:
One of the most ill-used features of CakePHP is View::requestAction().
Developers frequently use this all over their applications, causing
convoluted cases where you need to figure out if you are within a web
request or an internal action request, cluttering controllers. You
also need to invoke a new CakePHP request, which can add some unneeded
overhead.
Disclaimer
The above reflects my personal view on these things, there is no ultimate and final rule how you have to use these three things. The goal is always clean and re-useable code and proper separation of concerns. How you archive that is up to you, you've got the tools. :)
I am facing a problem with AngularJS. I have made an application where a user can
select a value from a dropdown list. If the user presses the "add" button, then an array is created that holds all his selections. I want to populate a textbox with all these selections. I have tried ng-repeat but it creates multiple textbox with each array value. This is what I've made so far:
Controller
$scope.multiCompare= [];
// Create the function to push the data into the "multiCompare" array
$scope.newCompare = function () {
$scope.multiCompare.push($scope.compareDate);
$scope.multiComparedate = '';
};
HTML
<div class="form-group">
<label for="installation_year" class="col-sm-2 control-label">Period</label>
<div class="col-sm-4">
<select class="form-control" ng-model="compareDate" ng-options="res for res in compareDates " ng-disabled="disableFormInput()" ></select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="newCompare()">Add</button>
</div>
</div>
<div class="form-group">
<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
<div ng-repeat="num in multiCompare" track by $index>
<input class="form-control" type="text" ng-model="$parent.multiCompare[$index]">
<div> {{num}}</div>
</div>
</div>
The first image shows the result I'm getting when adding 2013 and 2014 and the second shows what I would like it to return.
Can someone help me through this?
Thanks in advance..
For rendering your Compare field input, you can take use of ngList directive. That will bind your comma(,) separated output directly to the input element.
Change
<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
<div ng-repeat="num in multiCompare" track by $index>
<input class="form-control" type="text" ng-model="$parent.multiCompare[$index]">
<div> {{num}}</div>
</div>
</div>
TO
<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
<input class="form-control" type="text" ng-model="multiCompare" ng-list/>
</div>
This could help you, Thanks.
I have managed to do what I wanted. I changed my html code to this:
<div class="form-group">
<label for="from_date" class="col-sm-2 control-label">Compare</label>
<div class="col-sm-4">
<div data-ng-repeat="num in multiCompare" track by $index>
<input class="form-control" type="text" ng-model="multiCompare" ng-list {{num}} ng-show="$last" />
</div>
</div>
</div>
And it worked!
Your ng-list suggestion was really helpful! Thank you very much!
I am trying to modify the Jhipster template by doing the following:
If the user is not authenticated , the authentication form is showing (instead of showing a link to the authentication page as it is set by default). I m showing it in the main.html view
<div class="row">
<div class="col-md-4">
<span class="hipster img-responsive img-rounded"></span>
</div>
<div class="col-md-8">
<h1 translate="main.title">Welcome, Java Hipster!</h1>
<p class="lead" translate="main.subtitle">This is your homepage</p>
<div ng-switch="authenticated">
<div class="alert alert-success" ng-switch-when="true"
translate="main.logged.message" translate-values="{username: '{{account.login}}'}">
You are logged in as user "Admin".
</div>
<div ng-switch-when="false">
<div class="row">
<div class="col-md-4">
<h1 translate="login.title">Authentication</h1>
<div class="alert alert-danger" ng-show="authenticationError" translate="login.messages.error.authentication">
<strong>Authentication failed!</strong> Please check your credentials and try again.
</div>
<form class="form" role="form" ng-submit="login()">
<div class="form-group">
<label for="username" translate="global.form.username">Login</label>
<input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}" ng-model="username">
</div>
<div class="form-group">
<label for="password" translate="login.form.password">Password</label>
<input type="password" class="form-control" id="password" placeholder="{{'login.form.password.placeholder' | translate}}"
ng-model="password">
</div>
<div class="form-group">
<label for="rememberMe">
{{"login.form.rememberme" | translate}}
<input type="checkbox" class="checkbox inline_class" id="rememberMe"
ng-model="rememberMe" checked>
</label>
</div>
<button type="submit" class="btn btn-primary" translate="login.form.button">Authenticate</button>
</form>
<p></p>
<div class="alert alert-warning" translate="global.messages.info.register">
You don't have an account yet? Register a new account
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and modified apps.js :
.otherwise({
templateUrl: 'views/main.html',
controller: 'LoginController',
access: {
authorizedRoles: [USER_ROLES.all]
}
});
It works if I m not using the ng-switch-when="false" statement.
If I m using this statement, the value of $scope.password and $scope.login are "undefined" in the LoginController.
Of course this statement is mandatory if I want to show the authentication form only if the user is not authenticated.
I can't understand why.
If you can help me on this, it would be great.
Thanks.
It's a common gotcha with ng-switch and other directives that create sub-scopes. This should work:
<div class="row">
<div class="col-md-4">
<span class="hipster img-responsive img-rounded"></span>
</div>
<div class="col-md-8">
<h1 translate="main.title">Welcome, Java Hipster!</h1>
<p class="lead" translate="main.subtitle">This is your homepage</p>
<div ng-switch="authenticated">
<div class="alert alert-success" ng-switch-when="true"
translate="main.logged.message" translate-values="{username: '{{account.login}}'}">
You are logged in as user "Admin".
</div>
<div ng-switch-when="false">
<div class="row">
<div class="col-md-4">
<h1 translate="login.title">Authentication</h1>
<div class="alert alert-danger" ng-show="authenticationError" translate="login.messages.error.authentication">
<strong>Authentication failed!</strong> Please check your credentials and try again.
</div>
<form class="form" role="form" ng-submit="login()">
<div class="form-group">
<label for="username" translate="global.form.username">Login</label>
<input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}" ng-model="$parent.username">
</div>
<div class="form-group">
<label for="password" translate="login.form.password">Password</label>
<input type="password" class="form-control" id="password" placeholder="{{'login.form.password.placeholder' | translate}}"
ng-model="$parent.password">
</div>
<div class="form-group">
<label for="rememberMe">
{{"login.form.rememberme" | translate}}
<input type="checkbox" class="checkbox inline_class" id="rememberMe"
ng-model="$parent.rememberMe" checked>
</label>
</div>
<button type="submit" class="btn btn-primary" translate="login.form.button">Authenticate</button>
</form>
<p></p>
<div class="alert alert-warning" translate="global.messages.info.register">
You don't have an account yet? Register a new account
</div>
</div>
</div>
</div>
</div>
</div>
Instead of $parent you may bind values to an object, but then you will need to modify Jhipster's LoginController accordingly (and also make sure to update login.html or create a variant of the controller for the main screen only)
My view page :
$scope.profileupdate = function(profiledata) {
var spinner = new Spinner(opts).spin(target);
console.log("Firstname " + $scope.firstName + "Lastname " + $scope.lastName );
spinner.stop();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="profileform" class="form-horizontal" role="form">
<div class="form-group">
<label for="firstName" class="control-label col-md-2 col-md-offset-1">First Name</label>
<div class="col-md-6">
<input type="text" class="form-control" ng-modal="profile.firstName" name="firstName" id="firstName" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="lastName" class="control-label col-md-2 col-md-offset-1">Last Name</label>
<div class="col-md-6">
<input type="text" class="form-control" ng-modal="profile.lastName" id="lastName" name="lastName" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<!-- Button -->
<div class="col-md-12">
<input id="btn-signup" type="button" ng-click="profileupdate(profile)" class="btn btn-primary" />
</div>
</div>
</form>
I need to get the text box value from view to controller. Bet i cant get value in the controller. is there any other better way to get the data using angular JS.
You want ng-model, not ng-modal.
If you use ng-model then you can get it that way
see doc here
its simple
use like
alert($scope.firstName) ;
you passed the form data to controller
console.log(profiledata.firstName);
if you do not pass the form value to controller get data directly
console.log($scope.profile.firstName);