Input box requires following validations:
1) Length input box should take upto 3 integer length values (decimals not allowed)
2) Height input box should take 3 integer number and decimals upto 2 places
Its working fine for the first time, but after clicking + button same input fields are opening but now: In the new boxes validations are not working even if I use the same classes for input boxes, i.e, newly added input boxes are taking any number of digits and characters.
Following is my code:
var app = angular.module('Calc', []);
var inputQuantity = [];
$(function () {
$(".form-control").each(function (i) {
inputQuantity[i] = this.defaultValue;
$(this).data("idx", i); // save this field's index to access later
});
$(".form-control").on("keyup", function (e) {
var $field = $(this),
val = this.value,
$thisIndex = parseInt($field.data("idx"), 10); // retrieve the index
// window.console && console.log($field.is(":invalid"));
// $field.is(":invalid") is for Safari, it must be the last to not error in IE8
if (this.validity && this.validity.badInput || isNaN(val) || $field.is(":invalid")) {
this.value = inputQuantity[$thisIndex];
return;
}
if (val.length > Number($field.attr("maxlength"))) {
val = val.slice(0, 5);
$field.val(val);
}
inputQuantity[$thisIndex] = val;
});
});
app.controller('Calc_Ctrl', function ($scope, $http) {
$scope.choices = [{id : 'choice1', l2 : 0, b2 : 0}];
$scope.areas = [{id : 'choice2', total : 0}];
$scope.addNewChoice = function () {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({
'id' : 'choice' + newItemNo, l2 : 0, b2 : 0
});
};
$scope.removeChoice = function () {
var lastItem = $scope.choices.length - 1;
if (lastItem !== 0) {
$scope.choices.splice(lastItem);
}
};
});
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="newscript.js"></script>
<body>
<div ng-app="Calc" ng-controller="Calc_Ctrl">
<div data-ng-repeat="choice in choices" class="col-md-12 col-sm-12 col-xs-12 bottom-line no-gap">
<h6>Flooring Area {{$index + 1}}
<button type="button" class="btn btn-default pull-right btn-right-gap btn-red" aria-label="Left Align" ng-click="addNewChoice()" style="margin-top: -5px;" id="plus_icon">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</h6>
<div class="row walls top-gap">
<div class="form-group col-md-3 col-sm-3 col-xs-12">
<label for="length">Length :</label>
<input type="number" class="form-control text-red bold" id="length" ng-model="choice.l2" min="0" max="999" maxlength="6" step="0.00" >
</div>
<div class="form-group col-md-3 col-sm-3 col-xs-12">
<label for="height">Height :</label>
<input type="number" class="form-control text-red bold" id="height" ng-model="choice.b2" min="0" max="999" maxlength="6" step="0.01">
</div>
<div class="form-group col-md-3 col-sm-3 col-xs-12">
<label for="area">Area sq :</label>
<input type="number" class="form-control text-red bold" id="area" value="{{choice.l2 * choice.b2}}" readonly>
</div>
<button type="button" class="btn btn-default pull-right btn-red" aria-label="Left Align" ng-click="removeChoice()" id="minus_icon">
<span class="glyphicon glyphicon-minus minus-btn" aria-hidden="true" ></span>
</button>
</div>
</div>
</div>
</body>
</html>
Related
In the view {{phonenumber}} value is not updating. But When I enter digits alert is working properly inside the controller.
Controller
var app = angular.module('myApp', []);
app.controller('PosController', function ($scope, $http) {
$scope.phonenumberFromDial = "";
$scope.phonenumber = "";
$scope.updatePhoneNumber = function(id) {
$scope.phonenumberFromDial=id;
$scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
if($scope.phonenumber.length > 9) {
console.log("Log phonenumber: " + $scope.phonenumberFromDial);
alert('Here the Number: '+ $scope.phonenumber);
}
});
View
<div ng-app="myApp" ng-controller="PosController" class="panel" >
<div class="input-group col-xs-4">
<div class="input-group-btn">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Telefono</button>
</div><!-- /btn-group -->
<div ng-app="myApp" ng-controller="PosController">
<input id="phonenumber" class="form-control" ng-model="phonenumber" />
<!--<input type="text" id="phonenumber" ng-model="myModel" ng-keyup="(myModel.length >= 3) && myFunction()" class="form-control" data-inputmask='"mask": "(999) 999-9999"' data-mask>-->
</div>
<div class="input-group-btn" >
<button type="button" class="btn btn-success">Cliente</button>
</div><!-- /btn-group -->
<div ng-app="myApp" ng-controller="PosController">\
<input type="text" id="cliente" class="form-control" value="{{phonenumber}}">
</div>
</div>
</div>
Some observations :
remove unecessary multiple ng-controller="PosController" and ng-app="myApp" from the code and leave with only one at the top.
use ng-model="phonenumber" instead of value="{{phonenumber}}" to perform two way data binding.
Working demo :
var app = angular.module('myApp', []);
app.controller('PosController', function ($scope, $http) {
$scope.phonenumberFromDial = "";
$scope.phonenumber = "";
$scope.updatePhoneNumber = function(id) {
$scope.phonenumberFromDial=id;
$scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
if($scope.phonenumber.length > 9) {
console.log("Log phonenumber: " + $scope.phonenumberFromDial);
alert('Here the Number: '+ $scope.phonenumber);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="PosController" class="panel" >
<div class="input-group col-xs-4">
<input type="text" id="phonenumber" class="form-control" ng-model="phonenumber"/>
<div class="input-group-btn" >
<button type="button" class="btn btn-success" ng-click="updatePhoneNumber(phonenumber)">Cliente</button>
</div>
<input type="text" id="cliente" class="form-control" ng-model="phonenumber">
</div>
</div>
There are several things you're missing. First of the all, as suggested in comment, you only need to declare ng-app and ng-controller once in the HTML with np-app on the top-most level. Secondly, you bind the scope data to the HTML using ng-model inside a input field, or {{phonenumber}} in HTML. Third, you forgot to close the controller with an ending parenthesis.
Here is a working demo:
var app = angular.module('myApp', []);
app.controller('PosController', function ($scope, $http) {
$scope.phonenumberFromDial = "";
$scope.phonenumber = "";
$scope.updatePhoneNumber = function(id) {
$scope.phonenumberFromDial=id;
$scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
if($scope.phonenumber.length > 9) {
console.log("Log phonenumber: " + $scope.phonenumberFromDial);
alert('Here the Number: '+ $scope.phonenumber);
}
}
});
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
</head>
<body>
<div class="panel" >
<div class="input-group col-xs-4" ng-controller="PosController">
<div class="input-group-btn">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Telefono</button>
</div><!-- /btn-group -->
<div>
<input id="phonenumber" class="form-control" ng-model="phonenumber" />
<!--<input type="text" id="phonenumber" ng-model="myModel" ng-keyup="(myModel.length >= 3) && myFunction()" class="form-control" data-inputmask='"mask": "(999) 999-9999"' data-mask>-->
</div>
<div class="input-group-btn" >
<button type="button" class="btn btn-success">Cliente</button>
</div><!-- /btn-group -->
<div>
<input type="text" id="cliente" class="form-control" ng-model="phonenumber">
</div>
<span>Phone#: {{phonenumber}}</span>
<div>
Dial: <input type="text" id="cliente" class="form-control" ng-model="phonenumberFromDial">
</div>
<div class="input-group-btn" >
<button type="button" class="btn btn-success" ng-click="updatePhoneNumber(phonenumberFromDial)">Update phone#</button>
</div><!-- /btn-group -->
</div>
</div>
</body>
</html>
<!-- code snippet of html -->
<div class="form-group">
<label for="items" class="col-sm-2 control-label">Items</label>
<div class="pull-left input-group">
<input type="text" class="form-control" ng-model="name">
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="addNewItem()">Add</button>
</span>
</div>
<div>
<ul class="pull-left">
<li ng-repeat="item in items">
<p style="display: inline-block">{{item}}</p>
<button type="button" class="btn btn-default" ng-click="deleteItem(item)">Delete</button>
</li>
</ul>
</div>
</div>
<div class="form-group">
<label for="anotherField" class="col-sm-2 control-label">Another Field</label>
<input type="text" class="form-control" ng-model="anotherField" id="anotherField">
</div>
/* code snippet in Augular controller */
$scope.addNewItem = function() {
if ($scope.name && $scope.name.trim()) {
if ($scope.items.indexOf($scope.name.trim()) >= 0) {
console.log('item name should not be duplicated');
} else {
$scope.items.push($scope.name.trim());
$scope.name = '';
}
}
};
$scope.deleteItem = function(item) {
var idx = $scope.items.indexOf(item);
if (idx >= 0) $scope.items.splice(idx, 1);
};
Above codes function properly, but the only problem is that when I create even on one new item, the label supposedly for "anotherField" just shows up immediately after this this very item (even misaligned with the label for "items"); when more items were created, it's simply placed at the end of the 1st item but not like a label for "anotherField" any more. Anybody can help to address this "strange" style issue?
Thanks,
Xihua
I have two input boxes: length and breadth.
The area is calculated is l*b and based on this I am calculating the result. My result that is Area to be treated:= (sum +(sum *0.05)).
It's working fine, but the problem is when I am entering area manually without length and breadth, I am getting different result. Both result must be same, even if I enter the area manually.
eg, if I enter the area as 1, the output is 10.05.
If I enter the length as 1 and breadth 1, the area is 1 so the output is 1.05 which is correct.
I need 1.05 whether I enter the length and breadth or just the area alone.
var app = angular.module('Calc', []);
app.controller('Calc_Ctrl', function ($scope) {
/* Start constants declaration*/
$scope.constant = {coeff : "0.003"};
/*End constants declaration*/
/*Start user input values and Function to add/remove input fields*/
$scope.choices = [{id : 'choice1', l2 : 0, b2 : 0}];
$scope.addNewChoice = function () {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({'id' : 'choice' + newItemNo, l2 : 0, b2 : 0});
};
$scope.removeChoice = function () {
var lastItem = $scope.choices.length - 1;
if (lastItem !== 0) {
$scope.choices.splice(lastItem);
}
};
$scope.sum = function () {
var sum = 0;
angular.forEach($scope.choices, function (choice) {
sum += choice.l2 * choice.b2;
});
return sum;
}
$scope.Getarea = function () {
$scope.total = document.getElementById("total").value;
//totalsum =$scope.total;
//alert(totalsum);
};
$scope.$watch($scope.sum, function (value) {
$scope.total = value;
});
/*End user input values and Function to add/remove input fields*/
});
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src ="area.js"></script>
<script type="text/javascript"></script>
<div class = "col-lg-8 col-md-7 col-sm-7 col-xs-12 center-output " ng-app="Calc" ng-controller="Calc_Ctrl" >
<h3 class="text-red bottom-line-thick">Antitermite treatment Calculator</h3>
<div class="col-md-12 col-sm-12 col-xs-12 step-2">
<div class="heading"><b>Step: 2</b> - Enter your <b>Requirement</b></div>
<!--Start Input calculation-->
<div data-ng-repeat="choice in choices" class="col-md-12 col-sm-12 col-xs-12 bottom-line">
<button type="button" class="btn btn-default pull-right btn-red" aria-label="Left Align" ng-show="$last" ng-click="removeChoice()">
<span class="glyphicon glyphicon-minus" aria-hidden="true" ></span>
</button>
<button type="button" class="btn btn-default pull-right btn-right-gap btn-red" aria-label="Left Align" ng-click="addNewChoice()">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</h4>
<div class="walls">
<div class="form-group col-md-4 col-sm-6 col-xs-6">
<label for="length">Length ({{data.selectedOption.name}}):</label>
<input type="number" class="form-control text-red bold" id="length" ng-model="choice.l2">
</div>
<div class="form-group col-md-4 col-sm-6 col-xs-6">
<label for="breadth">Breadth ({{data.selectedOption.name}}):</label>
<input type="number" class="form-control text-red bold" id="breadth" ng-model="choice.b2">
</div>
<div class="form-group col-md-4 col-sm-6 col-xs-6">
<label for="area">Area (sq {{data.selectedOption.name}}):</label>
<input type="number" class="form-control text-red bold" id="total" placeholder="Area" ng-model="total" ng-change="Getarea()">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 step-result bottom-gap">
<div class="heading"><b>Step: 3</b> - Material <b>Required</b></div>
<div class="col-md-12 ">
<div class="col-md-4 col-sm-4 col-xs-4">
<p class="bold">Area to be treated:</p>
<h1>{{(total + (total * 0.05))|number:2}}<span class="small-text"> (sq {{data.selectedOption.name}}):</span></h1>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<p class="bold">ATT Chemical</p>
<h1>{{((total + (total* 0.05)) * constant.coeff) |number:2}}<span class="small-text">ltrs</span></h1>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When you type in ng-model=total it will actually be treated a string. You could use input type=number perhaps, or you can just cast it to a number when you set the total:
$scope.Getarea = function () {
// numeric cast
$scope.total = +document.getElementById("total").value;
}
Since you already have ng-model you don't need the ng-change at all and you and use input type=number to have it work as a number or you can cast it where you actually use it.
{{((+total + (total* 0.05)) * constant.coeff) |number:2}}
I do now know, but I think jquery is conflicting with my angular datatable, but even when I take off jquery (hide and show elements), ng-click keeps not working.
Here goes as well a printscreen from my table:
My AngularJS js:
angular.module('BoxApp').controller("ConfiguraBkpEmail", function($scope, $http) {
var urlRestServer = "http://localhost:8080/boxmlV2";
$scope.clientes = {};
$scope.clientesSelecionados = {};
$scope.iniciar = function() {
$http.get(urlRestServer + '/configurabkpemail').success(function(response) {
$scope.clientes = response;
});
};
$scope.iniciar();
$scope.selecionaClientes = function(selecao){
$scope.clientesSelecionados = selecao;
$('#myModal').modal('show');
if($scope.clientesSelecionados.backupEmail == 0){
// $('#enderecoEmailBackup').hide();
// $('#idLabel').hide();
} else {
// $('#enderecoEmailBackup').show();
// $('#idLabel').show();
}
};
/**
* Trecho para validar o form ao submeter.
*/
$scope.submitted = false;
$scope.submitForm = function(form) {
$scope.submitted = true;
if (form.$valid) {
$scope.editaEmailBkp();
}
};
$scope.editaEmailBkp = function() {
var dados = {
idCliente : idCliente.value,
razaoSocial : razaoSocial.value,
backupEmail : $scope.clientesSelecionados.backupEmail,
enderecoEmailBackup : enderecoEmailBackup.value
};
$http.post(urlRestServer + '/configurabkpemail/salvar', dados).then(function(response) {
$scope.sucesso();
}, function(response) {
});
};
$scope.sucesso = function() {
$scope.closeModal();
$scope.iniciar();
};
$scope.closeModal = function() {
// $('#myModal').modal('hide');
};
$scope.opcoesBkps = [
{OpcaoBkpID: 0, Tipo: '0 - Sem backup de e-mail'},
{OpcaoBkpID: 1, Tipo: '1 - Backups inconsistentes'},
{OpcaoBkpID: 2, Tipo: '2 - Backup de Todos E-mails'}
];
});
My html:
<div class="row">
<table datatable="ng" id="configuraBkpEmail" class="row-border hover table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Nome Empresa</th>
<th>CNPJ</th>
<th>Backup E-mail</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in clientes" ng-click="selecionaClientes(x)">
<td><span ng-bind="x.razaoSocial" /></td>
<td><span ng-bind="x.cnpj" /></td>
<td><span ng-bind="x.strOpcaoBackupEmail" /></td>
</tr>
</tbody>
</table>
</div>
My modal that should be opened:
<!-- Modal INICIO-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">Configuração Backup de E-mail</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<f<div ultimate-datatable="datatable" width="100%"></div>orm name="form" id="form_sample_2" role="form"
class="form-horizontal ng-pristine ng-valid" novalidate>
<div class="form-group">
<label class="control-label col-md-3">Nome:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input type="text"
ng-model="clientesSelecionados.razaoSocial"
class="form-control" id="razaoSocial" maxlength="100"
name="razaoSocial" required disabled> <span
style="color: red"
ng-show="submitted && form.razaoSocial.$error.required">Campo
Nome Obrigatório.</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Backup de
E-mail:<span class="required" aria-required="true"> *
</span>
</label>
<div class="col-md-9">
<select size="1" name="backupEmail"
ng-model="clientesSelecionados.backupEmail"
ng-change="selecionaClientes(clientesSelecionados)"
class="form-control"
ng-options="opcoesBkp.OpcaoBkpID as opcoesBkp.Tipo for opcoesBkp in opcoesBkps"
required>
<option value="">Selecione um Recurso.</option>
</select> <span style="color: red"
ng-show="form.backupEmail.$error.required">Selecione
uma opção de backup.</span>
</div>
</div>
<div class="form-group">
<label id="idLabel" class="control-label col-md-3">Endereço:<span
class="required" aria-required="true"> * </span>
</label>
<div class="col-md-9">
<input type="email"
placeholder="Endereço do Backup para encaminhamento."
ng-model="clientesSelecionados.enderecoEmailBackup"
class="form-control" id="enderecoEmailBackup"
maxlength="100" name="enderecoEmailBackup">
</div>
</div>
<div class="form-group">
<label id="idLabel" class="control-label col-md-3">ID:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input type="text" ng-model="clientesSelecionados.idCliente"
class="form-control" id="idCliente" maxlength="100"
name="idCliente" disabled> <span
style="color: red"
ng-show="submitted && form.idCliente.$error.required">Campo
ID Obrigatório.</span>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancelar
</button>
<button type="submit" class="btn btn-primary" ng-click="submitForm(form)">
Salvar
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal FIM-->
Try ng-click="$parent.selecionaClientes(x)".
I'm using few modals in my angular project, in every modal which is a form I'm using button with ng-disabled directive and each modal has its own controller.
The issue is that when I debugging the code I can see that when I'm opening one modal the debugger run on all the ng-disabled directives in the code although it should run only on the ng-disabled function in the current modal that I use.
On each ng-disabled I run some verification function in its own controller,
like ng-disabled='somefunction()'
and somefunction() in the controller is somefunction() = x || y;
Do I miss something ?
controller:
app.controller('NewHolidayModalController', function ($scope, close, HolidaysService) {
var centerList = $scope.$parent.$$childHead.centers;
var currCenterDN = $scope.$parent.$$childHead.currentCenter.DN;
var indexOfCurrentCenter = _.indexOf(_.pluck(centerList, 'DN'), currCenterDN);
centerList[indexOfCurrentCenter].ticked = true;
var selectedDNs;
$scope.dt = k = new Date();
$scope.close = function (result) {
centerList[indexOfCurrentCenter].ticked = false;
close(result, 500);
};
$scope.conditionsForSendNewHoliday = function () {
selectedDNs = _.select(centerList, { ticked: true });
return (($scope.starttime >= $scope.endtime) || ($scope.dt < k) || (angular.isDate($scope.dt) == false) || (angular.isDate($scope.starttime) == false) || (angular.isDate($scope.endtime) == false) || ($scope.HolidayName.length == 0) || (selectedDNs.length == 0));
};
$scope.addHoliday = function () {
holiday = HolidaysService.formatDateAndTime($scope);
for (i = 0; i < selectedDNs.length; i++)
{
newHoliday = { DN: selectedDNs[i].DN, HolidayName: $scope.HolidayName, HolidayDate: holiday.Date, BeginHour: holiday.start, EndHour: holiday.end }
HolidaysService.addHoliday(newHoliday)
.success(function (data, status, headers, config) {
if ((_.select($scope.$parent.$$childHead.holidays, { BeginHour: data.BeginHour }).length == 0) && (_.select($scope.$parent.$$childHead.holidays, { EndHour: data.EndHour }).length == 0) && (_.select($scope.$parent.$$childHead.holidays, { HolidayDate: data.HolidayDate }).length == 0) && (_.select($scope.$parent.$$childHead.holidays, { EndHour: data.EndHour }).length == 0) && (_.select($scope.$parent.$$childHead.holidays, { HolidayName: data.HolidayName }).length == 0))
$scope.$parent.$$childHead.holidays.push(data);
centerList[indexOfCurrentCenter].ticked = false;
alert("holiday was created");
})
.error(function (data, status, headers, config) {
if (status == 409)
alert("Holiday " + data.HolidayName + " Cannot be created for " + data.DN + " BECAUSE OF OVERLAPPED HOLIDAYS.")
})
}
}
})
HTML:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close(false)" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div isteven-multi-select
input-model="$parent.$$childHead.centers"
output-model="outputCenters"
button-label="Name"
item-label="Name (Route)"
tick-property="ticked"
max-labels="5" max-height="150px">
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<div class="input-group date">
<input ng-model="HolidayName" type="text" placeholder="Holiday Name" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-pencil"></span>
</span>
</div>
</div>
</div>
</div>
<div ng-controller="DatepickerCtrl">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="$parent.dt" is-open="opened" min-date="minDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
<div class="row">
<div class='col-md-8 col-md-offset-2'>
<timepicker-pop input-time="starttime" class="input-group"
show-meridian='showMeridian'>
</timepicker-pop>
</div>
</div>
<div class="row">
<div class='col-md-8 col-md-offset-2'>
<timepicker-pop input-time="endtime" class="input-group"
show-meridian='showMeridian'>
</timepicker-pop>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" ng-click="close(false)" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" ng-click="addHoliday()" class="btn btn-primary" data-dismiss="modal" ng-disabled="conditionsForSendNewHoliday()">Send</button>
</div>
</div>
</div>
Should I add the other controller and the html?