I have a form with some contents and some buttons. What I want to do is by clicking a button, hide the original contents of the form and load some new contents. Now I have done the hiding part using ng-show . But i'm stuck at loading new contents using ng include. I have included the contents that I want to show inside script tags and tried to load on button click.
This is what I have done.
<!DOCTYPE html>
<html lang="en">
<div class="container">
<form role="form" id="info_form" name="info_form" ng-controller="infoCtrl" ng-app="app" novalidate>
<section class="content-header">
<h1>
Fill your medical information
<!--<small>Optional description</small>-->
</h1>
</section>
<!-- Main content -->
<section class="content">
<div class="box">
<div class="box-body" ng-show="table_remove" >
<div>
<div class="col-lg-12">
<div style="margin-top: 15px;width: 100%;">
<!--first block-->
<div style="float: left;width: 33%;height: 100%">
<div class="form-group">
<label class="info_ques_text">Maximum Heart Rate</label>
<div class="input-group">
<input class='input' type="number" name="Heart" id="Heart" class="form-control" ng-model="data.heart_rate" placeholder="Enter Value" required><br>
<span class="error_msg" ng-show="submitted && info_form.Heart.$error.required">Value cannot be blank</span>
</div>
</div>
</div>
<!--third block-->
<div class="form-group">
<label class="info_ques_text">How Long Do You Work Per Day?</label>
<div class="input-group">
<select class='input' name="Work" id="Work" ng-model="data.work" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">4-5 Hours</option>
<option value="1">5-6 Hours</option>
<option value="2">6-7 Hours</option>
<option value="3">More than 7 Hours</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Work.$error.required">Value cannot be blank</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-footer" ng-show="table_remove">
<button href="" type="submit" ng-click="submitted = true; train(data);" class="btn btn-primary">Train data</button>
<button href="" type="submit" ng-click="submitted = true; submit(data); template = 'predictview'" class="btn btn-primary">Submit</button>
<a type="button" class="btn btn-danger" href="{{url()}}/admin/organizations/view">Cancel</a>
</div>
</div>
<ng-include src="template"></ng-include>
<script type="text/ng-template" id="predictview">
<div class="container" ng-controller="questionEditCtrl" >
<form class="form-horizontal" role="form" name='quizAdd' ng-submit="submit(data2)">
<a> New page </a>
</form>
</div>
</script>
</section><!-- /.content -->
</form>
</div>
</html>
Related
I am using md-datepicker from angular material. It is working fine except on bootstrap modal. I have applied various solutions like z-index:1200 but none of them proves useful for me.
Following libraries I am using:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.css" />
It shows the area when I use inspect element:
Here is the Modal Code:
<!-- Bootstrap Modal for Add an Event -->
<div class="modal fade" id="AddEvent" role="dialog">
<div class="modal-dialog">
<form ng-submit="addNewEvent()">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"> <span class="team-member-icon"><img class="" ng-src="home/img/event-star.svg"></span> Add Event</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="add-member-modl">
<div class="form-group">
<label>Event Name</label>
<input ng-model="newEvent.name" type="text" ng-focus="focusInput = true" class="form-control" placeholder="Mehndi" ng-required="true">
<input type="hidden" ng-model="newEvent.event_id">
<ul class="advance_search_inner" ng-show="focusInput">
<li ng-repeat="event in events| filter:newEvent.name" ng-click="newEvent.name = event.name; focusInput = false; newEvent.event_id = event._id">
{{event.name}}
</li>
</ul>
</div>
<div class="form-group">
<label>Date</label>
<md-datepicker md-open-on-focus ng-model="newEvent.start_date"></md-datepicker>
</div>
<div class="form-group">
<label>Duration</label>
<select class="form-control" ng-model="newEvent.duration">
<option value="1 Day">1 Day</option>
<option value="2 Days">2 Days</option>
<option value="3 Days">3 Days</option>
</select>
<!--<input type="text" class="form-control" ng-model="newEvent.duration" placeholder="1 Day(s)" ng-required="true">-->
</div>
</div>
</div>
<div class="modal-footer mod-footr">
<button type="submit" class="btn btn-default">Send</button>
</div>
</div>
</form>
</div>
</div>
Probably the z-index of the modal is higher than the date picker selector. Try to change the datepicker z-index with the following css:
.md-datepicker-calendar-pane {
z-index: 2000;
}
I am learning AngularJS and I got a beta project to modify the exisiting model. I cannot post the below form through api. When i click on submit button, the dasboard is senseless. can some one guide me how to move further. This is Angular version:1.6.0. I have passed the ng-submit as startApproval in form element.. But it doesn't workout
index.html
<form ng-controller="RequestController" method="post" ng-submit="startApproval()">
<div class="container">
<div class="row" ng-submit>
<p class="text-info">Please create request...</p>
<!-- Left -->
<div class="col-lg-2">
<div class="panel panel-primary">
<!-- Heading -->
<div class="panel-heading">
<h4>Request</h4>
</div>
<!-- Body -->
<div class="panel-body">
<!-- process type -->
<div class="groups list list-inset">
<div class="form-group">
<label for="generic_process_id">Select process typ:</label>
<select class="form-control" id="generic_process_id" ng-model="request.approvalObject.generic_process_id" >
<option value="1" ng-show="true" >Simple Process</option>
<!-- <option ng-hide= "true" ng-disabled="true" value="2">2</option>
<option ng-hide= "true" ng-disabled= "true" value="3">3</option>
<option ng-hide= "true" ng-disabled= "true" value="4">4</option>-->
</select>
</div>
</div>
</div>
</div>
<div class="panel panel-warning">
<!-- Heading -->
<div class="panel-heading">
<h4>Priority</h4>
</div>
<!-- Body -->
<div class="panel-body">
<!-- priority type -->
<div class="groups list list-inset">
<label>Select priority:</label><br>
<div class="btn-group" ng-init="request.approvalObject.priority='1'">
<label class="btn btn-info" ng-model="request.approvalObject.priority" uib-btn-radio="'1'" uncheckable>Low</label>
<label class="btn btn-info" ng-model="request.approvalObject.priority" uib-btn-radio="'2'" uncheckable>High</label>
</div>
</div>
<hr>
</div>
</div>
</div>
<!-- Center -->
<div class="col-lg-6">
<!-- Description part-->
<div class="panel panel-success">
<!-- Heading -->
<div class="panel-heading">
<h4>Description</h4>
</div>
<pre>{{request.approvalObject|json}}</pre>
<pre>{{request.form|json}}</pre>
</div>
</div>
<!-- Right -->
<div class="col-lg-4">
<!-- value part-->
<div class="panel panel-info">
<!-- Heading -->
<div class="panel-heading">
<h4>Value</h4>
</div>
<!-- Body -->
<div class="panel-body">
<div class="groups list list-inset">
<label class="item item-input">
<input type="text" placeholder="" name="value" ng-model="request.approvalObject.value"><b class="text-primary">{{request.approvalObject.value_currency}}</b>
</label>
<br>
</div>
</div>
<div class="panel panel-info">
<!-- Heading -->
<div class="panel-heading">
<h4>Approver</h4>
</div>
<!-- Body -->
<div class="panel-body">
<div class="groups list list-insert">
<label class="item item-input">
<input type="text" placeholder="First approver name" name="approver1_name" ng-model="request.approvalObject.approver1_name">
</label>
</div>
<!-- show second approver if process type != 1 -->
<div ng-show="secondApprover" class="groups list list-insert">
<label class="item item-input">
<input type="text" placeholder="Second approver name" name="approver2_name" ng-model="request.approvalObject.approver2_name" >
</label>
</div>
</div>
</div>
</div>
</div>
<input type="submit" value="request">
</form>
Controller.js
'use strict';
export default class RequestController {
approvalObject = {};
form = {};
secondApprover = false;
$onInit() {
this.approvalObject.generic_process_id=1;
this.approvalObject.value_currency="EUR";
this.approvalObject.priority=1;
this.form.type=1;
}
/*#ngInject*/
constructor($http, $scope, socket) {
this.$http = $http;
console.log("testentry");
}
startApproval(approvalObject) {
console.log("test");
// creator_email and name from backend
approvalObject.generic_process_id=1;
approvalObject.creator_email= "test1#example.com";
approvalObject.creator_name= "test1";
approvalObject.approver1_email= approvalObject.approver1_name+"#example.com";
approvalObject.approver2_email= approvalObject.approver2_name+"#example.com";
// wip from backend
approvalObject.approval_process_status= "wip";
approvalObject.priority= "super high";
//date_of_creation: '', -->> filled by database
approvalObject.date_of_expiration = undefined;
approvalObject.sending_tool= "Web-App";
approvalObject.submitRequest=true;
this.$http.post('/api/approvals', approvalObject);
}
}
The startApproval(approvalObject)method in your controller expecting input parametar object. but you are calling with out passing any object to the function on ng-submit in your html
you can clear the input parameter in your controller and you can access thos variables in funtion with 'this'keyword like
this.approvalObject.generic_process_id=1;
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>
this is my html form that have to use to get the details but when i use the required attribute in the select tag, only the first one is validated and not the second one or an other field after the select tag, for eg if i select option in the first select and click post project then there is no error about the validation, and if i dont select the data from the first select tag there is validation error popup saying that the field is required,
<form name="myForm" role="form" action="#">
<div class="well" style="margin-left:20px; margin-right:20px">
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-lg-12">
<h4 style="color:darkblue">What type of project do you require?</h4>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-6 col-lg-6">
<select name="drop1" class="form-control" ng-model="project.match1">
<option value="">-- Select Category --</option>
<option ng-repeat="items in serviceCategory" value="{{items.ServiceCategoryId}}">{{items.ServiceCategoryName}}</option>
</select>
</div>
<div class="col-md-6 col-lg-6">
<select class="form-control" ng-model="project.match2" name="drop2">
<option value="">-- Select Sub Category --</option>
<option ng-repeat="a in service" ng-if="a.ServiceCategoryId==project.match1">
{{a.ServiceName}}
</option>
</select>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<textarea ng-model="project.ServiceCategories" placeholder="Add Service Categories here" rows="3" style="resize:none; width:100%"></textarea>
</div>
</div>
</div>
<div class="well" style="margin-left:20px; margin-right:20px">
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12 text-left">
<h4 style="color:darkblue">What is your Project about</h4>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12 text-left">
Describe your Project<br>
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<input type="text" ng-model="project.DescribeProject" style="width:100%">
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-6 col-lg-6">
What is your Project about?
</div>
<div class="col-md-6 col-lg-6">
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<textarea ng-model="project.AboutProject" ng-trim="false" rows="3" cols="70" ng-maxlength="5000" style="resize:none; width:100%;"></textarea>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
Attach files
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<!--attach file code-->
<div style="height:30px; width:100%;">
</div>
</div>
</div>
<div class="row" style="margin-bottom:15px; margin-left:5px; margin-right:5px">
<div class="col-md-1 col-lg-1"></div>
<div class="col-md-10 col-lg-10">
<div class="text-right">
<button class="btn btn-default btn-primary" type="submit" ng-click="showData(project)">Post Project</button>
<button class="btn btn-default" data-dismiss="modal" aria-label="Close" style="color:black; border-color: #2e6da4">Close</button>
</div>
</div>
<div class="col-md-1 col-lg-1"></div>
</div>
</div>
</form>
The Script is
var app = angular.module("MyApp", []);
app.controller('MainCtrl', function ($scope, $http) {
$http.get('/JsonData/ServiceCategory.json').success(function (response) {
console.log("Service Category Connected");
$scope.serviceCategory = response;
});
$http.get('/JsonData/Service.json').success(function (res) {
console.log("Service Connected");
$scope.service = res;
});
$scope.showData = function (inputData) {
var Project = new Object();
Project.Category = inputData.match1;
Project.SubCategory = inputData.match2;
Project.ServiceCategories = inputData.ServiceCategories;
Project.Description = inputData.DescribeProject;
Project.AboutProject = inputData.AboutProject;
var ProjectJson = JSON.stringify(Project);
alert(ProjectJson);
}
});
I want to show the div which has Turn On E-Verify when clienId has a value if not I want to show the div which has Turn Off E-verify. I am not getting any errors but always the second div shows up and the button won't work. What am I doing wrong?
HTML :
<div class="col-md-12 col-centered" ng-app="CompanyEVerify">
<div class="row" ng-controller="EVerifyOptionController">
<form name="EverifyForm" id="EVerifyForm" class="form-horizontal" role="form" novalidate ng-submit="EVerifyForm.$valid && submit()"
style="background-color: #F0F0F0; border-radius: 8px; padding-top: 10px; margin: 15px !important;">
<div class="alert alert-danger" id="messages" style="display:none">{{message}}</div>
<div class="form-horizontal">
<input type="hidden" ng-model="company.Id" />
<div class="row">
<div class="col-md-12">
<div style="font-size:20px;font-weight:bold;display:inline-block">Would you like to opt for E-Verify feature?</div>
<br />
<div >
<div class="row" ng-if="clientId">
<div class="col-xs-12 form-group">
<label class="control-label col-xs-2">Client ID</label>
<div class="col-xs-7">
<input type="text" name="clientID" class="form-control input-md" ng-model="clientID" />
</div>
<button type="button" class="btn btn-success col-xs-3" ng-click="saveEverifyOption(clientID)">
<i class="fa fa-spinner fa-pulse"></i> Turn On E-Verify
</button>
</div>
</div>
<div class="row" ng-if="!clientId">
<div class="col-xs-12 form-group">
<label class="control-label col-xs-2">Client ID</label>
<div class="col-xs-7">
<input type="text" name="clientID" class="form-control input-md" ng-model="clientID" />
</div>
<button type="button" class="btn btn-danger col-xs-3" ng-click="saveEverifyOption(clientID)">
<i class="fa fa-spinner fa-pulse"></i> Turn Off E-Verify
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
In my controller :
$scope.clientId= sessionStorage.clientId;
I am going to assume that your controller is properly evaluating your conditions. In which case you would use ng-class to bind to css classes. I am not sure If you are trying to hide/show or disable toggle. Going with show/hide, you can make a class:
.hide{
display:none;
}
On one of your elements:
<button ng-class="{'hide': clientId}" ></button>
On the other element:
<button ng-class="{'hide': !clientId}" ></button>
Now the hide property on both elements is bound to one single source.
Check out docs example