angularJS code:
appModule.controller('dcrlistingCtrl',
['$scope', '$modal', '$state', '$rootScope', 'loginService', 'servicePOST', 'appConstants', 'sessionService', '$http',
function ($scope, $modal, $state, $rootScope, loginService, servicePOST, appConstants, sessionService, $http) {
alert("trial");
$scope.contact = "Doctors";
$scope.contacts =
[
{ "patch": "BARIJPUR", "contact": ["RAMA SENA", "SMRITI IRANI", "JAGDISH NAIR"] },
{ "patch": "Anna", "contact": ["ASHISH NAIK", "SMRITI IRANI", "SAIRAJ NAIK"] },
{ "patch": "Peter", "contact": ["RATAN PANDEY", "RAMAN SHIVOLKAR"] }
];
$scope.doctors = function () {
$scope.contact = "Doctors";
$scope.contacts = [];
$scope.contacts =
[
{ "patch": "BARIJPUR", "contact": ["RAMA SENA", "SMRITI IRANI", "JAGDISH NAIR"] },
{ "patch": "RATANGHAR", "contact": ["ASHISH NAIK", "SMRITI IRANI", "SAIRAJ NAIK"] },
{ "patch": "BHIRJ", "contact": ["RATAN PANDEY", "RAMAN SHIVOLKAR"] }
];
};
$scope.pharmacists = function () {
$scope.contact = "pharmacists";
$scope.contacts = [];
$scope.contacts =
[
{ "patch": "DRAMAPUR", "contact": ["RYAN DCOSTA", "SIDDESH NAIK", "ARVIND CHARI"] },
{ "patch": "MAHALSA", "contact": ["TANVI REDKAR", "PRIYANKA BANDODKAR", "GIRISH MATARBHOG"] }
];
};
$scope.stockists = function () {
$scope.contact = "stockists";
$scope.contacts = [];
$scope.contacts =
[
{ "patch": "SRIJAN", "contact": ["SHILPA NAIK", "ARBAAZ SHAIK", "NAZEEF SHAIK"] },
{ "patch": "KHANCHAR", "contact": ["AVESH NAIK", "MELROY FERNANDES", "BRIAN DIAS"] },
{ "patch": "TRINSAL", "contact": ["MEENAKSHI TIWARI", "GAURAV TIWARI"] }
];
};
}
])
html code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" type="button" class="navbar-toggle collapsed" style="float:right;" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-option-vertical" style="float:right;"></span>
</button>
<button type="button" class="navbar-toggle collapsed" style="float:left;" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="text-center visible-xs">
<span> <b> Field Work </b> </span>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
<span> <b>Field Work</b> </span>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 hidden-xs">
<ul class="list-group text-center" style="cursor:pointer;">
<li class="list-group-item" id="heading" style="cursor:default;">{{contact}}</li>
<div ng-repeat="con in contacts">
<li class="list-group-item" id="patch" data-toggle="collapse" data-target='#Dright{{$index}}'>{{con.patch}}<span class="badge">5</span></li>
<div class="text-center collapse" id='Dright{{$index}}'>
<div class="cell" ng-repeat="cell in con.contact">
<li class="list-group-item">{{cell}}</li>
</div>
</div>
</div>
</ul>
</div>
<div class="col-sm-7">
<div class="col-sm-12">
<button type="button" class="btn btn-primary " ng-click="doctors()"><b>Doctor</b></button>
<button type="button" class="btn btn-primary " ng-click="pharmacists()"><b>Pharmacist</b></button>
<button type="button" class="btn btn-primary " ng-click="stockists()"><b>Stockist</b></button>
</div>
<div class="col-sm-12">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>john@example.com</td>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr class="danger">
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>john@example.com</td>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr class="info">
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>john@example.com</td>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
any angularJS expert here? help required!
onclick of each button,i am trying to fill the array with new values! but it seems to not happen! am i doing something wrong?
i tried to declare thhe array again in each of the functions so that the old values get flushed out!
any help or advice and changes are appreciated!
here is the result:
