I want use a form under another form in angularjs. First form (form1) is a form-wizard. I want use another form in form1 and then goto another step of form-wizard. I want add some data in form2 and push data in a list and then by form 1, goto another step. I have below code:
<form class="tab-pane" id="second-1" name="second-1Form" rc-submit rc-step>
<form ng-submit="form2()">
<div class="form-group">
...
</div>
<div class="form-group">
...
</div>
<div class="form-group">
<button>Submit</button>
</div>
</form>
</form>
<div class="form-group">
<div class="pull-right">
<a class="btn btn-default" ng-click="rc.sampleWizard.backward()"ng-show="rc.sampleWizard.currentIndex > rc.sampleWizard.firstIndex">Back</a>
<a class="btn btn-primary" data-loading-text="Please Wait..." ng-click="rc.sampleWizard.forward()"ng-show="rc.sampleWizard.currentIndex < rc.sampleWizard.navigationLength">Continue</a>
<a class="btn btn-primary" ng-click="rc.sampleWizard.forward()"ng-show="rc.sampleWizard.currentIndex == rc.sampleWizard.navigationLength">Complete</a>
</div>
</div>
and in controller:
$scope.addBolouk = function(){
$scope.BoloukRadif.push($scope.formdata);
};
but when I complete form2 and click on submit, data don't add to list and submit of form-wizard is work and page is goto next form-wizrd.
I want add data to list by using first form and then goto next form-wizard. How can I seprate button of form2 from button of form-wizard? How can I resolve this problem?
You can't have a form inside a form, but you can use the ng-form directive,
<form class="tab-pane" id="second-1" name="second-1Form" rc-submit rc-step>
<ng-form>
<div class="form-group">
...
</div>
<div class="form-group">
...
</div>
<div class="form-group">
<button ng-click="form2()">Submit</button>
</div>
</ng-form>
</form>
<div class="form-group">
<div class="pull-right">
<a class="btn btn-default" ng-click="rc.sampleWizard.backward()"ng-show="rc.sampleWizard.currentIndex > rc.sampleWizard.firstIndex">Back</a>
<a class="btn btn-primary" data-loading-text="Please Wait..." ng-click="rc.sampleWizard.forward()"ng-show="rc.sampleWizard.currentIndex < rc.sampleWizard.navigationLength">Continue</a>
<a class="btn btn-primary" ng-click="rc.sampleWizard.forward()"ng-show="rc.sampleWizard.currentIndex == rc.sampleWizard.navigationLength">Complete</a>
</div>
</div>
Related
I'm doing a system to idle a user after 1 minute and I'm opening a modal with a button to alert the user with a button inside which redirects to login page.
controllerScope.logout = function () {
alert("logout");
$location.path('/');
AuthService.logout(controllerScope.user).then(function (result) {
$state.go('user.signin');
});
};
In my view:
<script type="text/ng-template" id="timedout-dialog.html">
<div class="modal-header">
<h3>Oh, Snap! You've Timed Out!</h3>
</div>
<div class="modal-body">
<p>
You were idle too long. Click the button below to be redirected to the login page and begin again.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-small" ng-click="doLogout()">Back To Login</button>
</div>
</script>
Why when I click on my "back to login" on modal it doesn't go to my function on the controller? I tried to pop up an alert, a simple thing but event that doesn't work
You need to make below changes, since you use controller as syntax :
In controller it should be like var controllerScope = this
In HTML controller declaration be like : ng-controller ="yourcontrollername as controllerScope"
During calling logout, it should be like ng-click="controllerScope.logout()"
Update
Your plunker has many issues, this even doesn't run angular.
So I created this Fiddle with minimal possible code to show the things to be done.
In general :
use controller as alias., for logout ng-click="inventoryCtrl.openNewDeviceModal()" and for opening modal popup use alias as well controller: 'InventoryController as inventoryCtrl',
You set doLogout() function into your ng-click. Would you mean logout() as in your controller ?
Your ng-click method is wrongly called: Kindly change ng-click="controllerScope.logout()"> instead of ng-click="doLogout()">
Update
I have uploaded my code to share with you https://jsfiddle.net/y0xrgjaf/
Your template code in outside of the controller div tag. You should add your all html code inside of the main div
<div ng-controller="controllername">
//all code should be here
</div>
Copy this below code and paste it
<div class="row" ng-controller="InventoryController as inventoryCtrl" >
<div class="col-md-12">
<div class="panel mb25">
<div class="panel-body">
<table class="table mb0 table-striped datatable" ui-jq="dataTable" ui-options="devicesData">
<thead>
<tr>
<th></th>
<th>S/N</th>
<th>IP</th>
<th>Name</th>
<th>Manufacturer</th>
<th>Model</th>
<th>Organization</th>
<th style="width:70px;"></th>
</tr>
</thead>
</table>
</div>
</div>
<div>
<button class="btn btn-default" ng-click="openNewDeviceModal()">Add Device</button>
</div>
</div>
<script type="text/ng-template" id="newDeviceModalContent.html">
<div class="modal-header">
<h3 class="modal-title" ng-bind="deviceModalTitle"> Add Device</h3>
</div>
<div class="modal-body">
<form class="form-horizontal bordered-group" role="form" name="addDeviceForm">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" ng-model="newdevice.data.name" required>
<span ng-show="addDeviceForm.name.$invalid">The name is required.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">S/N</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="sn" ng-model="newdevice.data.sn" required>
<span ng-show="addDeviceForm.sn.$invalid">The S/N is required.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Model</label>
<div class="col-sm-10">
<select class="form-control" ng-model="newdevice.device_type_id" ng-options="type.id as type.model for type in deviceTypes">
<option value="">None</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Organization</label>
<div class="col-sm-10">
<select class="form-control" ng-model="newdevice.organization_id" ng-options="organization.id as organization.data.name for organization in organizations">
<option value="">None</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-default btn-sm" ng-click="saveDevice()" ng-disabled="addDeviceForm.name.$invalid || addDeviceForm.sn.$invalid">Save</button>
<button class="btn btn-default btn-sm" ng-click="cancel()">Cancel</button>
</div>
</script>
<script type="text/ng-template" id="timedout-dialog.html">
<div class="modal-header">
<h3>Oh, Snap! You've Timed Out!</h3>
</div>
<div class="modal-body">
<p>
You were idle too long. Click the button below to be redirected to the login page and begin again.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-small" ng-click="inventoryCtrl.logout()">Back To Login</button>
</div>
</script>
</div>
I am very new to captcha. I want to disable submit button until captcha is verified successfully. (restricting from form submission until captcha is validated successfully)
<div class="col-sm-offset-3 col-sm-6">
<div class="g-recaptcha" data-sitekey="sitekey"></div>
</div>
<div class="row form-row1">
<div class="col-sm-6 col-md-6 col-xs-4"></div>
<div class="col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary" ng-click="registration()" style="float: left;">SUBMIT</button>
</div>
<div class="col-sm-4"></div>
</div>
I have the following modal, With ng-model item
<div class="uk-modal" id="modal_header_footer">
<div class="uk-modal-dialog">
<div class="uk-modal-header">
<h3 class="uk-modal-title">Editar Usuario</h3>
</div>
<form id="form_validation" class="uk-form-stacked">
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-2">
<div class="parsley-row">
<label for="fullname">user<span class="req">*</span></label>
<input type="text" ng-model="item.user" required class="md-input" md-input />
</div>
</div>
<div class="uk-width-medium-1-2">
<div class="parsley-row">
<label for="fullname">name<span class="req">*</span></label>
<input id="nombre" type="text" name="nombre" ng-model="item.name" required class="md-input" md-input />
</div>
</div>
</div>
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-2">
<div class="parsley-row">
<label for="email">Email<span class="req">*</span></label>
<input id="email" type="email" name="email" ng-model="item.email" data-parsley-trigger="change" required class="md-input" md-input />
</div>
</div>
</div>
</form>
<div class="uk-modal-footer uk-text-right">
<button type="button" class="md-btn md-btn-flat uk-modal-close">Cerrar</button>
<button type="button" ng-click="EditarUsuario(item)" class="md-btn md-btn-flat md-btn-flat-primary">Aceptar</button>
</div>
</div>
The modal call it from a button belonging to a record in datatable, "data-uk-modal="{target:\'#modal_header_footer\'}""
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('Id'),
DTColumnBuilder.newColumn('usuario').withTitle('Usuario'),
DTColumnBuilder.newColumn('nombre').withTitle('Nombre'),
DTColumnBuilder.newColumn('email').withTitle('Email'),
DTColumnBuilder.newColumn('telefono').withTitle('Telefono'),
DTColumnBuilder.newColumn('estado').withTitle('Estado'),
DTColumnBuilder.newColumn('created_at').withTitle('Creado'),
DTColumnBuilder.newColumn(null).withClass('parent').withTitle('Acciones').notSortable().renderWith(function(data,type,full){
vm.usuario[data.id] = data;
return ' <i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i>'+
' <i class="md-icon material-icons md-bg-red-900 uk-text-contrast"></i>';
})
];
I need to pass the data parameter, and so make use of the ng-model in the modal
There is no difference between the way we use ng-model in a modal and any other part of the website.
In your case, I suppose you want to show the user's data displayed which belong to a specific record in the table.
So if your ng-model in the modal belongs to the same controller which contains the edit func, you just need to bind the information passed as parameter to the corresponding ng-model in the modal. When the modal shows up, it will show the bind information in the modal.
Let's say, in your modal you have this:
<div class="parsley-row">
<label for="fullname">user<span class="req">*</span></label>
<input type="text" ng-model="item.user" required class="md-input" md-input />
</div>
Then in your edit function you just have to say
function edit(user){
$scope.item = user; //...item is the var used for binding the information to the modal and user is the var coming from the table
}
This can solved using dummy object. here is a code
<td title="'Payment'"> <button type="button" class="btn btn-info btn-lg pay-btn" data-toggle="modal" data-target="#myModal" ng-click="mommy(obj)" >yuty</button>
<!-- Modal content-->
<div id="myModal" class="modal fade" role="dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<form>
<div class="form-group">
<label>Amout</label>
<input type="Number" ng-model="vvv.payment">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng- click="mono=false">Close</button>
<button type="button" class="btn btn-default" ng- click="modify(vvv._id,vvv)">Submit</button>
</div>
</div>
dummy object
$scope.mommy = function(h){
console.log(h.payment);
$scope.vvv = h;
}
hope you get to understand it,
This is better way to use it
I am doing an event scheduler app using angular js. In calendar when i am clicking the event i am sent the event id to back end to getting event details.Here how to get the pop up on my calendar when the url status is true.
My code is:
$scope.alertOnEventClick = function( date, jsEvent, view){
var event_id=date.id;
$http.post("Youin-api/v2/business/event_information",{"event_id":event_id}).then(function(response) {
if(response.error="true")
{
$scope.eventInformation= response;
}
});
};
My bootstrap model pop up is:
<div class="modal fade" id="AddUsers" ng-model="eventInformation" role="dialog">
<div class="modal-dialog " style="top:80px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">User Details</h4>
</div>
<div class="modal-body">
<p><form role="form" ng-submit="AddUsers(addusers)">
<div class="form-group">
<label for="pwd">User Type</label>
<input type="text" class="form-control" id="user_type" ng-model="addusers.user_type" value="{{addusers.user_type}}">
</div>
<div class="form-group">
<label for="pwd">Created By</label>
<input ty{{addusers.user_type}}pe="text" class="form-control" id="created_by" ng-model="addusers.created_by" value="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form></p>
</div>
</div>
</div>
</div>
thanks in advance..!!
To manually trigger modal to show from javascript. Use this.
$('#AddUsers').modal('show')
Note: You have to add bootstrap.js and jquery.js to use this functionality.
You can view the complete modal api options here.
Wherever you want to open the modal based on your condition you can achieve the same using following:
angular.element(document.getElementById("AddUsers")).modal();
I have form on a dialog with some input field and a submit, a cancel buttons. I use ng-message for show input is wrong. But when i click cancel with ng-click="$dismiss()" for disable dialog then ng-message is show and action dismiss() is terminate. Some suggestion for me to resolve case
<form name="accountGroupForm" novalidate>
<div class="form-group"
>
<input id="group-name" class="form-control" name="groupName" placeholder="{{'Group name' | translate}}"
ng-model="accountGroup.name" ng-focus="true"
required>
<div ng-messages="accountGroupForm.groupName.$error" ng-if="accountGroupForm.groupName.$touched">
<div ng-message="required" class="help-block"><span translate>Group name is required</span></div>
</div>
</div>
<div class="wrapper row">
<div class="col-xs-6 text-right p-r-xs">
<button type="submit" class="hvr-grow btn btn-success w-sm"
ng-disabled="accountGroupForm.$invalid"
ng-click="submitAccountGroup()" translate>
Ok
</button>
</div>
<div class="col-xs-6 text-left p-l-xs">
<button class="hvr-grow btn btn-grey-blue w-sm" ng-click="$dismiss()" translate>Cancel
</button>
</div>
</div>
</form>
you can add an ng-if to the ng-message with its own variable then you can set that variable on the desired action. I usually set it on the form validations for $error and $dirty.
ng-show='myForm.inputBox.$dirty && myForm.inputBox.$error'