Can you please let me know how I can show and Hide an element in angular? in following example I want to initially hide the #item-details and show it if check box checked or Hide if un-check
<!DOCTYPE html>
<html ng-app="app">
<body>
<div class="container" ng-controller="checkController">
<div class="row">
<div class="col-md-2"><input type="checkbox" name="item" value="new" />Add New Item <br /></div>
<div class="col-md-6" id="item-details" ng-show="">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js">/script>
<script>
var app = angular.module('app', [])
.controller('checkController', function() { });
this.
});
</script>
</body>
</html>
First assign an model to the check box
<div class="col-md-2"><input type="checkbox" name="item" value="new" ng-model="checked" />Add New Item <br /></div>
then simply assign the same model value to item-details in ng-show
<div class="col-md-6" id="item-details" ng-show="checked">
you are done
Example
var app = angular.module('app', []);
app.controller('checkController', function($scope) {
$scope.hide = false;
$scope.checkboxClick = function() {
$scope.hide = !$scope.hide;
};
});
HTML:
<body ng-app="app">
<div ng-controller="checkController" class="container">
<div class="row">
<div class="col-md-2">
<input type="checkbox" ng-click="checkboxClick()" value="new" name="item" /> Add New Item
<br />
</div>
<div ng-show="hide" id="item-details" class="col-md-6">
<div aria-label="..." role="group" class="btn-group">
<button class="btn btn-default" type="button">Left</button>
<button class="btn btn-default" type="button">Middle</button>
<button class="btn btn-default" type="button">Right</button>
</div>
</div>
</div>
</div>
</body>
In one way or the other, the ng-show is not working but I use the ng-if as a work around which work perfectly.
<!DOCTYPE html>
<html ng-app="app">
<body>
<div class="container" ng-controller="checkController">
<div class="row">
<div class="col-md-2"><input type="checkbox" name="item" ng-model="item" value="new" />Add New Item <br /></div>
<div class="col-md-6" id="item-details" ng-if="item == true">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>
hope is helps thanks.
<div class="container" ng-controller="checkController">
<div class="row">
<div class="col-md-2"><input type="checkbox" name="item" value="new" ngmodel="checked" ngchecked="checked == '1'"/>Add New Item <br /></div>
<div class="col-md-6" id="item-details" ngshow = "checked == '1'">
<div class="btn-gr`enter code here`oup" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>
Just do above
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 have 2 step form
on step 1 : ask user to how many input form needed
that use in < input type="number" ng-model="vm.nkeys" />`
on step 2 : want to create one input text for each with ng-model and name attribute in array form so that I can capture the every input box value; but both is not working; see the relevant code and wokrking plunker below.
<div ng-show="vm.step == 2" ng-form="vm.step2form" class="step-content body" >
<div class="text-center m-t-md">
<div ng-repeat="n in [].constructor(vm.nkeys) track by $index" class="form-group">
<label class="col-sm-2 control-label">{{$index+1}}</label>
<input ng-model="key_desc" name="description_{{n}}" type="text" class="form-control" >
</div>
</div>
</div>
tried ng-model="key_desc[{{$index+1}}] but no success; also name=description_{{$index}} is also not working
see the demo plunker
what do I need to do?
Have a look at the sample snippet below:
<div ng-repeat="item in getNumber(key) track by $index">
<input type="text" ng-model="text[$index]" name="input_{{$index}}" />
<span ng-if="text[$index]">
- {{text[$index]}}
</span>
</div>
Refer the demo here.
See your code now:
<div ng-repeat="n in vm.getNumber(vm.nkeys) track by $index" class="form-group">
<!-- Other stuff -->
<input id="location" ng-model="key_desc[$index]" name="description_{{n}}" type="text" class="form-control" >
</div>
See you code here.
Try this
<input ng-model="key_desc['{{$index}}']" name="description_{{n}}" type="text" class="form-control" >
Set vm variable to ng-model.
(function () {
'user strict';
angular.module('app',[])
.controller('FormController', function ($log) {
var vm = this;
vm.title = 'Key Manager';
vm.step = 1;
vm.key_desc = [];
vm.submit = _submit;
function _submit(){
alert(vm.key_desc);
}
vm.next = function() {
$log.debug('clicked on next');
if(vm.step < 3 )
vm.step = vm.step + 1;
vm.getKeys=function(n){
return new Array(n);
};
}
vm.prev = function() {
$log.debug('clicked on prev');
if(vm.step > 0)
vm.step = vm.step - 1;
}
vm.hasPreviousStep = function(){
var previousStep = vm.step - 1;
return (previousStep > 0);
};
});
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap#3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="angular.js#1.5.7" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script>
<!--<link rel="stylesheet" href="style.css" />-->
<script src="script.js"></script>
</head>
<body ng-controller="FormController as vm">
<h1>{{vm.title}}</h1>
<div class="row">
<div class="col-lg-7">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Genarate Key(s)</h5>
</div>
<div class="ibox-content">
<form action="#" class="form" novalidate>
<div role="application" class="wizard clearfix">
<div class="content clearfix">
<div ng-form='vm.step1form' ng-show="vm.step == 1" class="step-content body" >
<div class="m-t-md">
<h2>Number of Keys</h2>
<div class="form-group">
<label class="col-sm-2 control-label">Number of Keys *</label>
<div class="col-sm-4">
<input type="number" min="0" max="50" id="nkeys" name="nkeys" ng-model="vm.nkeys" required class="form-control required" placeholder="How many keys required" />
</div>
</div>
</div>
</div>
<div ng-form="vm.step2form" ng-show="vm.step == 2" class="step-content body" >
<div class="text-center m-t-md">
<h2>This is step 2</h2>
<div ng-repeat="n in [].constructor(vm.nkeys) track by $index" class="form-group">
<label class="col-sm-2 control-label">{{$index+1}}</label>
<div class="col-sm-4">
<input id="location" ng-model="vm.key_desc[$index]" name="description_{{n.name}}" type="text" class="form-control" >
</div>
</div>
</div>
</div>
</div>
<div class="actions clearfix">
<ul class="list-inline">
<li >
<button ng-disabled="vm.step=='1'" type="button" class="btn btn-w-m btn-primary" ng-click="vm.prev()">Previous</button>
</li>
<li >
<button type="button" class="btn btn-w-m btn-primary" ng-click="vm.next()" ng-disabled="!vm.step1form.$valid">Next</button>
</li>
<li >
<button class="btn btn-primary " ng-click="vm.submit()" type="button"><i class="fa fa-check"></i> Submit</button>
</li>
<li>
<button ui-sref="keyhouse.list" type="button" class="btn btn-w-m btn-warning" >Cancel</button>
</li>
</ul>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
model name could be connect with controller name..using vm variable..
In your controller initialize vm.key_desc = [] in your controller..
Use an Array element as ng-model
<input ng-model="key_desc[$index]" name="description_{{n}}"
type="text" class="form-control" >
here the value of first input will be in $scope.key_desc[0], second in $scope.key_desc[1] and so on
before that, initialise $scope.key_desc = [] in your controller
I using angularjs bootstrap modal, and i want to validate form before submit, so i use required in input tag like this:
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Add</h3>
</div>
<div class="modal-body">
<form id="productForm" novalidate>
<div>
<label for="ProductName"> ProductName:</label>
<input type="text" name="ProductName" id="ProductName" ng-model="model.ProductName" value="" required />
</div>
<div style="margin:10px">
<label for="Price">Price:</label>
<input type="text" name="Price" id="Price" ng-model="model.Price" required />
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="Save()" ng-disabled="productForm.$invalid">Save</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<button type="button" class="btn btn-default modalBtn" ng-click="open()">addProduct</button>
</div>
but it doesn't work, what is the problem?
Trying adding a name to the form. productForm.$invalid refers to the name of the form. Towards the bottom of the docs there are some examples.
EDIT: I would also move the buttons into the form
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Add</h3>
</div>
<form name="productForm" novalidate>
<div class="modal-body">
<form id="productForm" name="productForm" novalidate>
<div>
<label for="ProductName"> ProductName:</label>
<input type="text" name="ProductName" id="ProductName" ng-model="model.ProductName" value="" required />
</div>
<div style="margin:10px">
<label for="Price">Price:</label>
<input type="text" name="Price" id="Price" ng-model="model.Price" required />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="Save()" ng-disabled="productForm.$invalid">Save</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</form>
</script>
<button type="button" class="btn btn-default modalBtn" ng-click="open()">addProduct</button>
</div>
I am Fairly New to AngularJs, I have done crud operations in AngularJs, I have fetched all the records of user having options like(View, Edit(Update), Delete)
If the User Wants To Update the record then he clicked on edit then shows his/her record. all fields are mandatory. if users deletes the text in the Text-box. then press on cancel button it redirects to mange users page with empty field
Like in my plunker, I want to update one record, Clicked on Edit and then in the name(textbox) make it as blank. Immediately click on Cancel
Then Output will be empty of my record(name field)
But, I want data in user record(name field), if user make it as blank
I was Updated My code in here
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link href="style.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="container" style="padding-top:20px;">
<div ng-app="userApp" data-ng-controller="userController" class="container">
<div ng-show="error" class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<p>{{ error }}</p>
</div>
<div class="modal fade" id="userModel" tabindex="-1" role="dialog" 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">X</button>
<h4 class="modal-title" id="myModalLabel" ng-hide="editMode">Add User</h4>
<h4 class="modal-title" id="myModalLabel" ng-show="editMode">Edit User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" name="adduserform">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" data-ng-model="user.name" name="name" class="form-control" id="title" placeholder="Your Name" required title="Enter your name" />
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<input type="text" data-ng-model="user.address" name="address" class="form-control" id="title" placeholder="Your Address" required title="Enter your address" />
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">ContactNo</label>
<div class="col-sm-10">
<input type="text" data-ng-model="user.contact" name="contact" class="form-control" id="title" placeholder="Your ContactNo" required title="Enter your contactno" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<span data-ng-hide="editMode">
<input type="submit" value="Add" ng-disabled="adduserform.$invalid" data-ng-click="add()" class="btn btn-primary" />
</span>
<span data-ng-show="editMode">
<!-- <input type="submit" value="Update" ng-disabled="" data-ng-click="update()" class="btn btn-primary"/> -->
<input type="submit" disabled="disabled" value="update" class="btn btn-primary"/>
</span>
<input type="button" value="Cancel" data-ng-click="cancel()" class="btn btn-primary" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<h1>Users List</h1>
<table class="table table-hover">
<tr>
<th>User ID</th>
<td>Name</td>
<th>Address</th>
<th>Contact No</th>
<th></th>
</tr>
<tr data-ng-repeat="user in users">
<td><strong>{{ user.id }}</strong></td>
<td>
<p>{{ user.name }}</p>
</td>
<td>
<p>{{ user.address }}</p>
</td>
<td>
<p>{{ user.contact }}</p>
</td>
<td>
<p>
<a data-ng-click="get(user)" href="javascript:;">View</a> |
<a data-ng-click="edit(user)" href="javascript:;">Edit</a> |
<a data-ng-click="showconfirm(user)" href="javascript:;">Delete</a>
</p>
</td>
</tr>
</table>
<hr />
<div class="modal fade" id="viewModal" tabindex="-1" role="dialog" 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">X</button>
<h4 class="modal-title" id="myModalLabel">View User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" name="viewuser">
<div class="form-group">
<label for="Name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
{{user.name}}
</div>
</div>
<div class="form-group">
<label for="Address" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
{{user.address}}
</div>
</div>
<div class="form-group">
<label for="ContactNo" class="col-sm-2 control-label">ContactNo</label>
<div class="col-sm-10">
{{user.contact}}
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" 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">X</button>
<h4 class="modal-title" id="myModalLabel">Confirm Action</h4>
</div>
<div class="modal-body">
Are you sure to delete?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-ng-click="delete()">Ok</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
please help me out with this situation
You are binding your modal to the original user object.
Instead you can make a temporary copy of the user, and if you click cancel, copy the temp back to the original user:
$scope.edit = function () {
$scope.user = this.user;
$scope.tempUser = angular.copy($scope.user); //copy user to temp
$scope.editMode = true;
$('#userModel').modal('show');
};
$scope.cancel = function () {
angular.copy($scope.tempUser, $scope.user); // copy back from temp to user
$('#userModel').modal('hide');
}
See this plunker
I am using AngularJS as my front-end, below is my HTML file
<div >
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-body">
<div style="margin-bottom: 10px;">
<button type="button" ng-click='cancel()' class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">{{alert.summary}}</h4>
</div>
<form name="alertForm" novalidate>
<div ng-if="!displayMap">
<alert ng-if='displayAlertMsg' type="alertMsg.type">{{alertMsg.message}}</alert>
<input type="hidden" ng-model="alert.source" />
<div class="field-box">
<span class="checkboxLabel">Public: </span><input type="checkbox" id='updateType' ng-true-value="1" ng-false-value="0" ng-model="alert.publicAlert"></input>
</div>
<div class="field-box">
<label>qweqwName:</label>
<input class="span5" id='updateName' ng-model="alert.summary" required />
</div>
<div class="field-box">
<label>Notes:</label>
<textarea id='updateNotes' ng-model="alert.details" rows="2" required ></textarea>
</div>
<div class="span3" style="margin-left: 0px;">
<div class="field-box">
<label>Priority:</label>
<select ng-model="updatePriority" ng-options="p.name for p in priorities" ng-change='updateP(updatePriority)'></select>
</div>
<div class="field-box">
<label>Status:</label>
<select ng-model="updateState" ng-options="s.name for s in statusList" ng-change="updateS(updateState)"></select>
</div>
</div>
</div>
<div id="alertmap-buttons" class="span2 no-margin">
<button id="alert-add-location" class="btn btn-default pull-left" ng-click="displayMap = !displayMap"><span ng-if="!displayMap">Add Location</span><span ng-if="displayMap">Done</span></button>
<button id="alert-cancel-location" class="btn btn-danger" ng-if="displayMap">Cancel</button>
</div>
<div id="latlng-label" class='span3 pull-right no-margin'>
<div class="pull-left"><label class="latlng-label">lat: {{alert.latitude}}</label></div>
<div class="pull-right"><label class="latlng-label">long: {{alert.longitude}}</label></div>
</div>
<!--Select Coords from map-->
<!--Google Map Directive-->
<div ng-init="displayMap = false" ng-if="displayMap">
<google-map class="create-alert-map angular-google-map-container" center="map.center" zoom="map.zoom"
draggable='true'
events="mapEvents">
<markers models="themarkers"
coords="'self'"
>
</markers>
</google-map>
</div>
<!--Lat and Long
<input placeholder="Latitude" class="span2" id='updateLat' ng-model="alert.latitude" />
<input style="float: right" placeholder="Longitude" class="span2" id='updateLong' ng-model="alert.longitude" /-->
</form>
</div>
<div ng-if="!displayMap" class="modal-footer">
<button type="button" class="btn btn-default" ng-click="submit()" ng-disabled="alertForm.$invalid">Save</button>
<button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
</div>
</div>
</div>
This file is given to me by client and he want some CSS changes etc in that. But when I try to edit the file nothing is happening to the modal dialog box, for example if I change button text from Save to Submit it's not applying in the file. How come this???
If this information is not enough I can give controller JS file also. Thanks..