Angular filter on multiple array keys - angularjs

Here is my code,
(function (module) {
module.controller('TemplatesController', function (Template) {
var model = this;
model.loading = false;
model.templates = [];
model.attributes = [];
model.categories = [];
model.media = [];
init();
function init() {
getTemplates();
}
function getTemplates() {
model.loading = true;
Template.types.query().$promise.then(function (response) {
model.media = response.media;
});
Template.categories.query().$promise.then(function (response) {
model.categories = response.categories;
});
Template.attributes.query().$promise.then(function (response) {
model.attributes = response.attributes;
});
Template.templates.query().$promise.then(function (response) {
model.templates = response.templates;
});
model.loading = false;
}
model.filteredTemplates = function () {
return model.templates.filter(function (template) {
return model.filterBy.indexOf(template.media_category.id) !== -1;
});
};
});
}(angular.module("adbuilder.dealer.templates")));
and html
<div class="filters">
<h4 class="product-filters">Filter Category</h4>
<div data-toggle="buttons">
<label class="btn btn-default btn-block"
ng-repeat="category in templates.categories"
ng-class="{'active': category.isChecked}">
<input type="checkbox" value="{{ category.id}}" ng-model="category.isChecked">
{{ category.name}}
</label>
</div>
<hr>
<h4 class="product-filters">Media</h4>
<div data-toggle="buttons">
<label class="btn btn-default btn-block"
ng-repeat="media in templates.media"
ng-class="{'active': media.isChecked}">
<input type="checkbox" value="{{ media.id}}" ng-model="media.isChecked">
{{ media.name}}
</label>
</div>
<hr>
<h4 class="product-filters">Type</h4>
<div data-toggle="buttons">
<label class="btn btn-default btn-block"
ng-repeat="attribute in templates.attributes"
ng-class="{'active': attribute.isChecked}">
<input type="checkbox" value="{{ attribute.id}}" ng-model="attribute.isChecked">
{{ attribute.name}}
</label>
</div>
</div>
<div ng-repeat="template in filteredTemplates(templates.templates)" class="col-md-4 col-sm-6 m-item">
I have array of checkbox, in model.attributes, model.categories and
model.media. Now I want to filter templates to view only selected.
template.media_category.id contains category id
template.media_type.id contains type id
template.media_type_attribute_options.media_type_attribute_id contains atribute id
How to make it works? Currently it returns nothing..

Related

unable to get data from html in angular js

in this code of HTML, we get input text value and send to the Angular controller
so they get to work as defined in code.
<div class="row" ng-controller="RegionController">
<div class="col-lg-12" >
<div class="hpanel">
<div class="panel-heading">
<!-- <div panel-tools></div> -->
<h2>Region Master Entry</h2>
</div>
<div class="panel-body">
<!--change form name,and submit controller name-->
<form role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Region Name</label>
<div class="col-sm-10">
<input type="text" placeholder="please enter Region name" class="form-control m-b" required name="Region Name" ng-model="formRegionData.region_name" >
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Region Code</label>
<div class="col-sm-10">
<input type="text" placeholder="please enter Region code" class="form-control m-b" required name="Region Code" ng-model="formRegionData.region_code">
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Active</label>
</div>
<div class="checkbox checkbox-success col-sm-9">
<input id="checkbox3" type="checkbox" checked="" ng-model="formRegionData.status">
<label for="checkbox3">
</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-4"></div>
<div class="col-sm-8">
<button class="btn btn-sm btn-primary btn-xl text-right" type="submit" ng-click="createRegion()"><strong> Save Region </strong></button>
</div>
</div>
{{formRegionData | json}}
</form>
</div>
</div>
</div>
</div>
"{{formRegionData | json}}" this will return in HTML input text result of but not send data to the controller
in Controller the code is written as
.controller('RegionController', function( $scope , regionService) {
$scope.createRegion = function() {
debugger;
vm.processing = true;
vm.message = '';
console.log(formRegionData);
regionService.SaveRegion( formRegionData )
.then(function(data) {
debugger;
//console.log(data);
//.success(function(data) {
vm.processing = false;
vm.storyData = {};
vm.message = data.message;
});
}
})
and my service to work according to Controller
.factory('regionService',function($http ){
var regionFactory = {};
regionFactory.SaveRegion = function(formRegionData) {
debugger;
return $http.post('/api/region/', formRegionData);
}
return regionFactory;
});
You have missed $scope
$scope.createRegion = function() {
debugger;
$scope.processing = true;
$scope.message = '';
console.log($scope.formRegionData);
regionService.SaveRegion($scope.formRegionData )
.then(function(data) {
debugger;
//console.log(data);
//.success(function(data) {
$scope.processing = false;
$scope.storyData = {};
$scope.message = data.message;
});
}
})
and remove ng-click="createRegion()" in your button control and add this code in your form tag by ng-submit. like,
<form ng-submit="createRegion()" role="form">
You have missed of $scope in form region data
Here is the link Jsfiddle
JS
angular.module('myApp', ['ngStorage'])
.controller('RegionController', function($scope, regionService) {
var vm = this;
$scope.createRegion = function() {
debugger;
vm.processing = true;
vm.message = '';
regionService.SaveRegion($scope.formRegionData)
.then(function(data) {
debugger;
//console.log(data);
//.success(function(data) {
vm.processing = false;
vm.storyData = {};
vm.message = data.message;
});
}
}).factory('regionService', function($http) {
var regionFactory = {};
regionFactory.SaveRegion = function(formRegionData) {
debugger;
return $http.post('/api/region/', formRegionData);
}
return regionFactory;
});

Can't Receive MVC ViewBag(always null) property after $http post

I am using MVC 5 with angularjs and SSRS 2008 R2 and just trying to display report posted data by angularjs form and display it in #Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer, new { Height = 600, Width = 1200, SizeToReportContent = true, frameBorder = "0", })
My MVC Controller is returning this
ViewBag.ReportViewer = reportViewer;
return View(); but my post angularjs function is not getting any ViewBag.REportViewer property on response data.
Please just let me know if I am making any mistake while posting, because always my ViewBag.ReportViewer is null.
Please see (html) for #html.ReportViewer at the bottom and (angularjs $http.post) postIncomingMaterialData for call.
Sorry I pasted most of the code here, but had no choice.
Thanks.
(function() {
'use strict'
angular.module('GAiiNSApp').controller('GFIReportModalCtrl', ['$scope', 'getEmployeeNameFctry', 'getGrvNoFctry', '$http', '$log', '$rootScope', '$filter',
function($scope, getEmployeeNameFctry, getGrvNoFctry, $http, $log, $rootScope, $filter) {
$scope.getGRVNo = function(val) {
return getGrvNoFctry.getGRVNoData('/Stores/StoresAPI/GetGRVNo', val).then(function(res) {
var grvNo = [];
angular.forEach(res.data, function(OBJ) {
grvNo.push((OBJ));
});
return grvNo;
});
};
$scope.getEmployee = function(val) {
return getEmployeeNameFctry.getData('/Stores/StoresAPI/GetEmployee', val).then(function(res) {
var users = [];
angular.forEach(res.data, function(OBJ) {
users.push((OBJ.NAME).trim());
});
return users;
});
};
$scope.SubmitData = function() {
$scope.myobject = {};
$scope.myobject.StartDate = $scope.Date1;
$scope.myobject.EndDate = $scope.Date2;
.employeename = $scope.empName;
$scope.myobject.grvno = $scope.grvNo;
$http({
method: "POST",
url: '/Stores/Materials/IncomingMaterial',
params: {
StartDate: $scope.myobject.StartDate,
EndDate: $scope.myobject.EndDate,
HandedOverTo: $scope.myobject.employeename,
GRVNo: $scope.myobject.grvno,
},
cache: false
});
}
}
]);
})();
(function() {
angular.module('GAiiNSApp').factory('postIncomingMaterialData', ['$http'], function($http) {
$http({
method: "POST",
url: MYURL_URL,
data: myObject,
cache: false
});
});
})();
(function() {
angular.module('GAiiNSApp').factory('getEmployeeNameFctry', ['$http', '$q',
function($http, $q) {
return {
getData: function(url, val) {
return $http({
url: url,
method: "GET",
params: {
nameSearch: val,
}
});
}
}
}
]);
})();
(function() {
'use strict'
angular.module('GAiiNSApp').factory('getGrvNoFctry', ['$http', '$q',
function($http, $q) {
return {
getGRVNoData: function(url, val) {
return $http({
url: url,
method: "GET",
params: {
grv: val,
}
});
}
}
}
]);
})();
#using ReportViewerForMvc; #using System.Drawing #using Microsoft.Reporting.WebForms; #using System.Web.UI.WebControls
<script src="~/Areas/Stores/Controllers/StoresNG/StoresCtrl.js"></script>
<div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding: 10px; min-height: 500px; margin-left: 10px;" ng-controller="GFIReportModalCtrl">
<fieldset>
<h3>Report</h3>
<hr />
<form name="MeForm" class="form-inline" novalidate>
<div class=" form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label class="col-xs-5 col-sm-2 col-md-4" for="date1">Start Date:<span style="color:red">*</span>
</label>
<p class="input-group">
<input type="text" id="date1" name="fdate" class="form-control" uib-datepicker-popup="{{$root.format}}" ng-model="$root.Date1" is-open="$root.popup1.opened" datepicker-options="$root.dateOptions1" ng-required="true" close-text="Close" alt-input-formats="$root.altInputFormats"
uib-tooltip="Date must be in dd-mm-yyyy format" tooltip-placement="top-right" tooltip-trigger="'mouseenter'" tooltip-enable="!inputModel" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
<p class="error validationerror" ng-show="MeForm.fdate.$invalid && MeForm.fdate.$touched">Start date is required</p>
</p>
</div>
<div class=" form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label class="col-xs-5 col-sm-2 col-md-4" for="date2">End Date:<span style="color:red">*</span>
</label>
<p class="input-group">
<input type="text" id="date2" name="ldate" class="form-control" uib-datepicker-popup="{{$root.format}}" ng-model="$root.Date2" is-open="$root.popup2.opened" datepicker-options="$root.dateOptions2" ng-required="true" close-text="Close" alt-input-formats="$root.altInputFormats"
uib-tooltip="Date must be in dd-mm-yyyy format" tooltip-placement="top-right" tooltip-trigger="'mouseenter'" tooltip-enable="!inputModel" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
<p class="error validationerror" ng-show="MeForm.ldate.$invalid && MeForm.ldate.$touched">End date is required</p>
</p>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label class="col-xs-5 col-sm-2 col-md-4" for="HandOver">Handed Over To:</label>
<input type="text" id="HandOver" ng-model="empName" uib-typeahead="name for name in getEmployee($viewValue)" typeahead-loading="loadingName" typeahead-no-results="noResults" typeahead-editable="false" typeahead-min-length="3" typeahead-wait-ms="500" class="form-control">
<i ng-show="loadingName" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> No Results Found...
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label class="col-xs-5 col-sm-2 col-md-4" for="GRVNo">GRV No:</label>
<input type="text" id="GRVNo" ng-model="grvNo" uib-typeahead="grvno for grvno in getGRVNo($viewValue)" typeahead-loading="loadingGRVNo" typeahead-no-results="noResults" typeahead-editable="false" typeahead-min-length="3" typeahead-wait-ms="500" class="form-control">
<i ng-show="loadingGRVNo" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> No Results Found...
</div>
</div>
<div class="row">
<div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12">
<br />
<br />
<div class="form-group col-xs-3 col-sm-3 col-md-3 col-lg-3 pull-right">
<button type="submit" class="btn submitbtn" ng-click="SubmitData()">Submit</button>
</div>
</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12" style="border: red;">
<div>
<div>
</div>
#{ if (ViewBag.ReportViewer != null) { #Html.ReportViewer(ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer, new { Height = 600, Width = 1200, SizeToReportContent = true, frameBorder = "0", }) } else {
<p>Message -- The ViewBag is still null</p>
} }
</div>
</div>
</form>
</fieldset>
</div>

bootstrap "control-label" behaves strange when following dynamically created list

<!-- 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

AngularJS - Scope Not Updating

For some reason, I can't remove the description and packing elements/fields (see picture) from the scope variable, even after deleting their respective code and restarting the application. Any help is much appreciated.
My directive:
app.directive('formElement', function() {
return {
restrict: 'E',
transclude: true,
scope: {
label : "#",
model : "="
},
link: function(scope, element, attrs) {
scope.disabled = attrs.hasOwnProperty('disabled');
scope.required = attrs.hasOwnProperty('required');
scope.pattern = attrs.pattern || '.*';
console.log(element);
},
template:
'<div class="form-group">' +
'<label class="col-sm-3 control-label no-padding-right"> {{label}}</label>' +
'<div class="col-sm-7">' +
'<span class="block input-icon input-icon-right" ng-transclude></span>' +
'</div></div>'
};
});
My controllers:
app.controller('ProductsCtrl', function ($scope, $modal, $filter, Data) {
$scope.product = {};
Data.get('products').then(function(data){
$scope.products = data.data;
});
$scope.changeProductStatus = function(product){
product.status = (product.status=="Active" ? "Inactive" : "Active");
Data.put("products/"+product.id,{status:product.status});
};
$scope.deleteProduct = function(product){
if(confirm("Are you sure to remove the product?")){
Data.delete("products/"+product.id).then(function(result){
$scope.products = _.without($scope.products, _.findWhere($scope.products, {id:product.id}));
});
}
};
$scope.open = function (p,size) {
var modalInstance = $modal.open({
templateUrl: 'partials/product-edit.html',
controller: 'ProductEditCtrl',
size: size,
resolve: {
item: function () {
return p;
}
}
});
modalInstance.result.then(function(selectedObject) {
if(selectedObject.save == "insert"){
$scope.products.push(selectedObject);
$scope.products = $filter('orderBy')($scope.products, 'id', 'reverse');
}else if(selectedObject.save == "update"){
p.price = selectedObject.price;
p.stock = selectedObject.stock;
}
});
};
$scope.columns = [
{text:"ID",predicate:"id",sortable:true,dataType:"number"},
{text:"Name",predicate:"name",sortable:true},
{text:"Price",predicate:"price",sortable:true},
{text:"Stock",predicate:"stock",sortable:true},
{text:"Status",predicate:"status",sortable:true},
{text:"Action",predicate:"",sortable:false}
];
});
app.controller('ProductEditCtrl', function ($scope, $modalInstance, item, Data) {
$scope.product = angular.copy(item);
$scope.cancel = function () {
$modalInstance.dismiss('Close');
};
$scope.title = (item.id > 0) ? 'Edit Product' : 'Add Product';
$scope.buttonText = (item.id > 0) ? 'Update Product' : 'Add New Product';
var original = item;
$scope.isClean = function() {
return angular.equals(original, $scope.product);
};
$scope.saveProduct = function (product) {
product.uid = $scope.uid;
if(product.id > 0){
Data.put('products/'+product.id, product).then(function (result) {
if(result.status != 'error'){
var x = angular.copy(product);
x.save = 'update';
$modalInstance.close(x);
}else{
console.log(result);
}
});
}else{
product.status = 'Active';
Data.post('products', product).then(function (result) {
if(result.status != 'error'){
var x = angular.copy(product);
x.save = 'insert';
x.id = result.data;
$modalInstance.close(x);
}else{
console.log(result);
}
});
}
};
});
HTML:
product-edit.html (partial):
<div class="modal-header">
<h3 class="modal-title">Edit product [ID: {{product.id}}]</h3>
</div>
<div class="modal-body">
<form name="product_form" class="form-horizontal" role="form" novalidate>
<form-element label="NAME" mod="product">
<input type="text" class="form-control" name="name" placeholder="Name" ng-model="product.name" ng-disabled="product.id" focus/>
</form-element>
<form-element label="PRICE" mod="product">
<input type="text" name="price" class="form-control" placeholder="PRICE" ng-model="product.price" only-numbers/>
<small class="errorMessage" ng-show="product_form.price.$dirty && product_form.price.$invalid"> Enter the price.</small>
</form-element>
<form-element label="STOCK" mod="product">
<input type="text" name="stock" class="form-control" placeholder="STOCK" ng-model="product.stock" only-numbers/>
<small class="errorMessage" ng-show="product_form.stock.$dirty && product_form.stock.$invalid"> Enter the available stock.</small>
</form-element>
<div class="modal-footer">
<form-element label="">
<div class="text-right">
<a class="btn btn-sm" ng-click="cancel()">Cancel</a>
<button ng-click="saveProduct(product);"
ng-disabled="product_form.$invalid || enableUpdate"
class="btn btn-sm btn-primary"
type="submit">
<i class="ace-icon fa fa-check"></i>{{buttonText}}
</button>
</div>
</form-element>
</div>
</form>
</div>
products.html (partial):
<div class="panel panel-default">
<div class="panel-heading" style="height: 60px;">
<div class="pull-left">
<input placeholder="Filter inventory list ..." class="form-control" aria-describedby="basei" ng-model="filterProduct" ng-change="resetLimit();" autocomplete="off" type="text" focus>
</div>
<div class="pull-right">
<button type="button" class="btn btn-default fa fa-plus" ng-click="open(product);">Add New Product</button>
</div>
</div>
<div class="panel-body">
<div class="input-group pull-right">
</div>
<table class="table table-striped">
<tr ng-show="products.length==0"><td style="vertical-align:middle;"><i class="fa fa-ban fa-3x"></i> No data found</td></tr>
<tr ng-hide="products.length>-1"><td style="vertical-align:middle;"><i class="fa fa-spinner fa-spin"></i> Loading</td></tr>
<tr><th ng-repeat="c in columns">{{c.text}}</th></tr>
<tr ng-repeat="c in products | filter:filterProduct | orderBy:'-id'" id="{{c.id}}" animate-on-change='c.stock + c.price' ng-animate=" 'animate'">
<td>{{c.id}}</td><td>{{c.name}}</td><td>{{c.price}}</td><td>{{c.stock}}</td>
<td>
<button class="btn" ng-class="{Active:'btn-success', Inactive:''}[c.status]" ng-click="changeProductStatus(c);">{{c.status}}</button>
</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default fa fa-edit" ng-click="open(c);"></button>
<button type="button" class="btn btn-danger fa fa-trash-o" ng-click="deleteProduct(c);"></button>
</div>
</td>
</tr>
</table>
</div>
</div>
I often have a problem with my templates being cached while using Angular. In chrome if you have the developer console open you can go to settings and prevent it from using cached results while the console is open. Or clear your browser cache manually

AngularJS - ng-disabled directive acting weird

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?

Resources