Here is my attempt:
If the user hits Territory A i need to display "Sales Team A" and "Sales Team B" as my options.`enter code here: http://plnkr.co/edit/n2A83tHk4r0G1ZWddb7V?p=preview.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div data-ng-app="myApp" class="container">
<form class="form-horizontal" data-ng-controller="dropdownCtrl">
<div class="form-group">
<label for="country" class="col-sm-2 control-label">* </label>
<div class="col-sm-7">
<select data-ng-model="customer.Country"
data-ng-options="obj.id as obj.country for obj in countries"
data-ng-change="getCountryStates()"
class="form-control"
data-ng-required="true"
id="country">
<option value="">-- Choose Org --</option>
</select>
</div>
</div>
<div class="form-group">
<label for="state" class="col-sm-2 control-label">** </label>
<div class="col-sm-7">
<select data-ng-model="customer.State"
data-ng-options="x.Id as x.state for x in sates"
data-ng-change = "getStateCities()"
class="form-control"
data-ng-required="true"
id="state">
<option value="">-- Select --</option>
</select>
</div>
</div>
<div class="form-group">
<label for="city" class="col-sm-2 control-label">*** </label>
<div class="col-sm-7">
<select data-ng-model="customer.City"
data-ng-options="x.Id as x.city for x in cities"
data-ng-change = "getStatesSales()"
class="form-control"
data-ng-required="true"
id="city">
<option value="">-- Select --</option>
</select>
</div>
</div>
<div class="form-group">
<label for="sales" class="col-sm-2 control-label">**** </label>
<div class="col-sm-7">
<select data-ng-model="customer.Sales"
data-ng-options="x.Id as x.sales for x in mysales"
class="form-control"
data-ng-required="true"
id="sales">
<option value="">-- Select --</option>
</select>
</div>
</div>
</form>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Here is my index.js file:
var myApp = angular.module('myApp',[]);
myApp.controller('dropdownCtrl', ['$scope','CustomerService', function($scope, CustomerService) {
$scope.countries = CustomerService.getCountry();
$scope.getCountryStates = function(){
$scope.sates = CustomerService.getCountryState($scope.customer.Country);
$scope.cities =[];
$scope.mysales = [];
}
$scope.getStateCities = function(){
// debugger;
$scope.cities = CustomerService.getStateCity($scope.customer.State);
console.log("Hi");
// console.log($scope.cities);
}
$scope.getStatesSales = function(){
// debugger;
$scope.sales = CustomerService.getSalesList($scope.customer.Sales);
// console.log($scope.sales);
}
}]);
myApp.factory("CustomerService", ['$filter', function($filter){
var service = {};
var countrylist = [
{ "id": 1, "country": "Marketing" },
{ "id": 2, "country": "Sales" },
{ "id": 3, "country": "Customer Service" }
];
var statelist = [
{"Id":1, "state":"Marketing Team A", "countryId": 1},
{"Id":3, "state":"Marketing Team B", "countryId": 1},
{"Id":4, "state":"Territories", "countryId": 2}
];
var citylist = [
{"Id":5, "city":"Territory A", "stateId": 4},
{"Id":6, "city":"Territory B", "stateId": 4}
];
var salesTeamList = [
{"Id":1, "sales":"Sales Team A", "salesId": 5},
{"Id":2, "sales":"Sales Team B", "salesId": 5},
{"Id":3, "sales":"Sales Team A", "salesId": 6},
{"Id":4, "sales":"Sales Team B", "salesId": 6}
];
service.getCountry = function(){
return countrylist;
};
service.getCountryState = function(countryId){
var states = ($filter('filter')(statelist, {countryId: countryId}));
return states;
};
service.getStateCity = function(stateId){
var items = ($filter('filter')(citylist, {stateId: stateId}));
return items;
};
service.getSalesList = function(salesId){
var items = ($filter('filter')(salesTeamList, {salesId: salesId}));
return items;
console.log(items);
};
return service;
}]);
You missed two points:
I changed here the parameter to $scope.customer.City
$scope.getStatesSales = function(){
$scope.sales = CustomerService.getSalesList($scope.customer.City);
}
and in your last drop down you passed the wrong list mySales so I changed it to sales in ng-repeat
data-ng-options="x.Id as x.sales for x in sales"
See the plunker
Related
I'm having trouble binding my default value to a ng-option. I already searched for the answer to my question but can't seem to find one.
My problem is that I have 3 cascading selects with one model.
default values
vm.roomData.branch = 'Lucena';
vm.roomData.building = 'mhq';
vm.roomData.roomFloor = '3rd Floor';
html
<div class="col-md-4">
<label for="branch">
<strong>Branch</strong>
</label>
<select ng-options="loc as loc.branch for loc in vm.locations" class="form-control" ng-model="vm.roomData.branch">
</select>
<small id="emailHelp" class="form-text text-muted">Select branch.</small>
</div>
<div class="col-md-4">
<label for="building">
<strong>Building</strong>
</label>
<select ng-options="loc as loc.name for loc in vm.roomData.branch.building" ng-model="vm.roomData.building" class="form-control">
</select>
</div>
<div class="col-md-4">
<label for="roomFloor">
<strong>Room Floor</strong>
</label>
<select ng-options="loc.floors as loc for loc in vm.roomData.building.floors" ng-model="vm.roomData.roomFloor" class="form-control">
</select>
</div>
vm.locations data
[
{
"_id": "5a681380b7c41e7df2076819",
"branch": "Lucena",
"__v": 0,
"building": [
{
"name": "MHQ",
"floors": [
"Ground Floor",
"2nd Floor",
"3rd Floor"
]
}
],
"dateCreated": "2018-01-24T05:02:56.465Z"
},
{
"_id": "5a681aecb7c41e7df207681d",
"branch": "Lucban",
"__v": 0,
"building": [
{
"name": "MHQ1",
"floors": [
"ground floor",
"2nd floor"
]
}
],
"dateCreated": "2018-01-24T05:34:36.775Z"
}]
try initializing the default values like this,
$scope.roomData.branch = $scope.locations.find((loc) => loc.branch === 'Lucena');
$scope.roomData.building = $scope.roomData.branch.building.find((br) => br.name.toLowerCase() == 'mhq');
$scope.roomData.roomFloor = '3rd Floor' ;
like
var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
var vm = this;
vm.roomData = {};
vm.locations = [{
"_id": "5a681380b7c41e7df2076819",
"branch": "Lucena",
"__v": 0,
"building": [{
"name": "MHQ",
"floors": [
"Ground Floor",
"2nd Floor",
"3rd Floor"
]
}],
"dateCreated": "2018-01-24T05:02:56.465Z"
},
{
"_id": "5a681aecb7c41e7df207681d",
"branch": "Lucban",
"__v": 0,
"building": [{
"name": "MHQ1",
"floors": [
"ground floor",
"2nd floor"
]
}],
"dateCreated": "2018-01-24T05:34:36.775Z"
}
];
vm.roomData.branch = vm.locations.find((loc) => loc.branch === 'Lucena'); debugger
vm.roomData.building = vm.roomData.branch.building.find((br) => br.name.toLowerCase() == 'mhq');
vm.roomData.roomFloor = '3rd Floor' ;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl as vm">
<div class="col-md-4">
<label for="branch">
<strong>Branch</strong>
</label>
<select ng-options="loc as loc.branch for loc in vm.locations" class="form-control" ng-model="vm.roomData.branch">
</select>
<small id="emailHelp" class="form-text text-muted">Select branch.</small>
</div>
<div class="col-md-4">
<label for="building">
<strong>Building</strong>
</label>
<select ng-options="loc as loc.name for loc in vm.roomData.branch.building" ng-model="vm.roomData.building" class="form-control">
</select>
</div>
<div class="col-md-4">
<label for="roomFloor">
<strong>Room Floor</strong>
</label>
<select ng-options="o as o for o in vm.roomData.building.floors" ng-model="vm.roomData.roomFloor" class="form-control">
</select>
</div>
</body>
I want to show a div tag when selecting a specific option. I am developing this with Angular and Ionic 1. I've been searching around for a while now, but I can't find any answers that works for me, therefore I'm writing this. I want to display the second option (id number 2), but I can't get it to work.
Here's the HTML:
<div class="row row-white">
<div class="col col-white">
<label>
<select name="keys" ng-options="key.name for key in list" ng-change="myCtrl()" ng-model="testValue" class="select-input" style="margin-left:0px;">
<option ng-if="false"></option>
<option ng-value=""></option>
<option ng-value=""></option>
</select>
</label>
</div>
</div>
<div class="divider20"></div>
<div class="row row-white" ng-show="result"> <!-- Won't display!! -->
<div class="col col-white">
<input type="number">
</div>
</div>
And here's the JS:
$scope.list = [{
"id": 1,
"name": "Engångsnyckel"
}, {
"id": 2,
"name": "Fleragångsnyckel"
}]
$scope.myCtrl = function() {
if ($scope.testValue.id == "2") {
$scope.result = true
}
else {
$scope.result = false
}
}
// Sets the first index as placeholder
$scope.testValue = $scope.list[0]
Sorry if this is a dumb and obvious question, but I'm getting desperate.
I hope this will help. You can directly use the data binding property without depending on any functions for the static conditions.
function TodoCtrl($scope) {
$scope.list = [{
"id": 1,
"name": "The Id One"
}, {
"id": 2,
"name": "The Id Two"
}]
// Sets the first index as placeholder
$scope.testValue = $scope.list[0]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<div class="row row-white">
<div class="col col-white">
<label>
<select name="keys" ng-options="key.name for key in list" ng-model="testValue" class="select-input" style="margin-left:0px;">
<option ng-if="false"></option>
<option ng-value=""></option>
<option ng-value=""></option>
</select>
</label>
</div>
</div>
<div class="divider20"></div>
<div class="row row-white" ng-show="testValue.id==2"> <!-- Won't display!! -->
<div class="col col-white">
<input type="number" placeholder="Enter the number here">
</div>
</div>
</div>
</div>
Your comparison should be with a number
$scope.myCtrl = function() {
if ($scope.testValue.id == 2) {
$scope.result = true
}
else {
$scope.result = false
}
}
It's nice to use track by too in your
<select name="keys" ng-options="key as key.name for key in list track by key.id" ng-change="myCtrl()" ng-model="testValue" class="select-input" style="margin-left:0px;">
</select>
I have this dropdown list
<label class="control-label">Type</label><br/>
<select class="form-control" ng-model="selectedItem" ng-change="selectChange()" ng-options="item as item.name for item in items">
<option value=""> Select Type</option>
</select>
this is the list in items.
$dialogScope.items = [{
name:"Pencil",
value:"0",
},{
name:"Eraser",
value:"1"
},{
name:"Colourpencil",
value:"2",
},{
name:"Ruler",
value:"4",
},{
name: "Pen",
options : ["Blue","Red","Colourful"]
},{
name: "Laptop",
options : ["Dell","Lenovo","Acer"]
},{
name: "Pencil Box",
value:"7",
},{
name: "Download CACHE By GPU",
value:"8",
},
];
What is want is that if user choose Pencil or Eraser or Ruler or Pencil Box, label A and Label B field will hide. I tried as below
<div class="form-group has-feedback" ng-if="type==0||type==1||type==4||type==7" ng-hide="hideField1">
<label class="control-label">{{labelA}}</label>
<input type="url" class="form-control" ng-model="stepA" name="stepA" required>
</div>
<div class="form-group has-feedback" ng-if="type==5||type==6||type==8||type==10" ng-hide="hideField2">
<label class="control-label">{{labelB}}</label>
<input type="url" class="form-control" ng-model="stepB" name="stepB" required>
</div>
<div class="form-group has-feedback" ng-if="type==0||type==4||type==7||type==5||type==6||type==8||type==9||type==10" ng-hide="hideField3">
<label class="control-label">{{labelC}}</label>
<input type="text" class="form-control" ng-model="stepC" name="stepC" required>
</div>
And use this in the controller but it doesn't to be in the right way. Anyone notice the mistake? and if any correct way to create this.
UPDATED
$dialogScope.selectChange = function(selectedItem){
if (selectedItem) {
$dialogScope.type = selectedItem.value;
$dialogScope.labelA = '';
$dialogScope.labelB = '';
$dialogScope.labelC = 'MD5';
$dialogScope.stepA = '';
$dialogScope.stepB = '';
$dialogScope.stepC = '';
if ($dialogScope.value == 0) {
$dialogScope.labelA = "APK URL";
} else if ($dialogScope.value == 4) {
$dialogScope.labelA = "OBB URL";
} else if ($dialogScope.value == 5) {
$dialogScope.labelB = "OBB URL";
} else if ($dialogScope.value == 6) {
$dialogScope.labelB = "APK URL";
}
console.log($dialogScope.selectedItem)
};
Check out this
var jimApp = angular.module("mainApp", []);
jimApp.controller('mainCtrl', function($scope){
$scope.items = [{
name:"Pencil",
value:"0",
},{
name:"Eraser",
value:"1"
},{
name:"Colourpencil",
value:"2",
},{
name:"Ruler",
value:"4",
},{
name: "Pen",
options : ["Blue","Red","Colourful"]
},{
name: "Laptop",
options : ["Dell","Lenovo","Acer"]
},{
name: "Pencil Box",
value:"7",
},{
name: "Download CACHE By GPU",
value:"8",
},
];
$scope.hideMe = function(hideElements){
if($scope.selectedItem){
return (hideElements.indexOf($scope.selectedItem.name) != -1)?true:false;
}
else{
return true;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
<label class="control-label">Type</label><br/>
<select class="form-control" ng-model="selectedItem" ng-change="selectChange()" ng-options="item as item.name for item in items">
<option value=""> Select Type</option>
</select>
{{selectedItem}}
<div class="form-group has-feedback" ng-if="selectedItem && hideMe(['Pencil', 'Ruler']);">
<label class="control-label">{{(selectedItem.value==0)?"APK URL":"OBB URL"}}</label>
<input type="url" class="form-control" ng-model="stepA" name="stepA" required>
</div>
<div class="form-group has-feedback" ng-if="selectedItem && hideMe(['Pen', 'Laptop']);">
<label class="control-label">{{(selectedItem.value==5)?"OBB URL":"APK URL"}}</label>
<input type="url" class="form-control" ng-model="stepB" name="stepB" required>
</div>
<div class="form-group has-feedback">
<label class="control-label">labelC</label>
<input type="text" class="form-control" ng-model="stepC" name="stepC" required>
</div>
</div>
im trying to make a small search engine, using angular and a json object.
im sorting the querys with 3 drop down lists chained so that they populate them selves depending on the selection.
the structure is so: a json object that holds an array of categorys, each category holds an array of products, and each products array hold parameters such as price, name, etc. so when a user selects a category, the second drop down list gets populated with the relevant products. and when the user selects the relevant product the third drop down list gets populated with this products price.
here is the json:
[{
"caregory": "Electronics",
"products": [{
"product": "PC",
"description": "Item4 Product Page",
"price": 99.99
},
{
"product": "PC",
"description": "Item4 Product Page",
"price": 2999.99
},{
"product": "TV",
"description": "lorem ipsum possum",
"price": 250.00
}]
}, {
"caregory": "Home Design",
"products": [{
"product": "Paintings",
"description": "awesome description about anything",
"price": 200.00
}, {
"product": "Pencils",
"description": "we are filters",
"price": 29.99
}, {
"product": "Sharpies",
"description": "loremloremlorem",
"price": 89.00
}
]
}]
here is the js:
var app = angular.module('app', ['angular.filter']);
var Controller = function($scope,$http) {
$http.get('data.json')
.success(function(data) {
$scope.data = data;
});
var data;
$scope.selected = {};
$scope.data = $scope.data;
console.log($scope.data);
var self = this;
$scope.search = function(predicate)
{
$scope.searchPredicate = predicate;
}
}
app.controller('ctrl', Controller);
and here is the view:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="filters.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="jumbotron">
<h1>Search engine</h1>
</div>
<form>
<div class="form-group">
<label for="caregory">Category</label>
<select id="caregory" data-ng-model="selected.category" ng-options="option as option.caregory for option in data | orderBy:'caregory'">
<option value="">None</option>
</select>
<br />
<br />
<label for="filters">Product type</label>
<select id="filters" ng-model="selected.type" ng-options="option as option.product for option in selected.category.products | unique: 'product'">
<option value="">None</option>
</select>
<br>
<br>
<label for="filters">Price</label>
<select id="filters" ng-model="selected.price" ng-options="option as option.price for option in selected.category.products | unique: 'price'">
<option value="">None</option>
</select>
</div>
<div class="form-group" ng-if="selected.price">
<button class="btn btn-primary" ng-click="search(selected.price)">Search</button>
</div>
<div ng-if="searchPredicate">
Searching for <b>{{searchPredicate.product}}</b> in <b>{{searchPredicate.description}}</b> with price <b>{{searchPredicate.price | currency}}</b>
</div>
</form>
</body>
</html>
heres a plunker:
http://plnkr.co/edit/omLQMQa39TRVMXovRKcD?p=preview
thanks!
You need to apply a filter on third select, to filter only products equals to selected:
<select id="filters"
ng-model="selected.price"
ng-options="option as option.price for option in selected.category.products | filter: { product: selected.type.product } | unique: 'price'">
<option value="">None</option>
</select>
take a look at plunker
I am kinda new in angularjs and javascript so please be kind, I have two dropdown items (Ionic Select) both of them holds data from a service. The issue is that I need to filter them in order to work together like: if I choose a company in the first dropdown list, only the reps inside of that company should display in the other dropdown list.
I tried using | filter: byID as I followed in Angularjs documentation but I do not think it is the right way of doing this don't know.
HTML:
<label class="item item-input item-select"">
<div class="input-label">
Company:
</div>
<select>
<option ng-repeat="x in company">{{x.compname}}</option>
<option selected>Select</option>
</select>
</label>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Rep:
</div>
<select>
<option ng-repeat="x in represent">{{x.repname}}</option>
<option selected>Select</option>
</select>
</label>
Javascript:
/*=========================Get All Companies=========================*/
$http.get("http://localhost:15021/Service1.svc/GetAllComp")
.success(function(data) {
var obj = data;
var SComp = [];
angular.forEach(obj, function(index, element) {
angular.forEach(index, function(indexN, elementN) {
SComp.push({compid: indexN.CompID, compname: indexN.CompName});
$scope.company = SComp;
});
});
})
/*=========================Get All Companies=========================*/
/*=========================Get All Reps=========================*/
$http.get("http://localhost:15021/Service1.svc/GetAllReps")
.success(function(data) {
var obj = data;
var SReps = [];
angular.forEach(obj, function(index, element) {
angular.forEach(index, function(indexN, elementN) {
SReps.push({repid: indexN.RepID, repname: indexN.RepName, fkc :indexN.fk_CompID});
$scope.represent = SReps;
});
});
})
/*=========================Get All Reps=========================*/
You may solve this problem like my solution process:
my solution like your problem. at first show District list and show Thana list according to selected District. using filter expression
In HTML:
<div>
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-3"><label><i class="fa fa-question-circle fa-fw"></i> District List</label></div>
<div class="col-md-4">
<select class="form-control" ng-model="selectedDist" ng-options="district.name for district in districts">
<option value="">Select</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-3"><label><i class="fa fa-question-circle fa-fw"></i> Thana List</label></div>
<div class="col-md-4">
<select class="form-control" ng-model="selectedThana" ng-options="thana.name for thana in thanas | filter: filterExpression">
<option value="">Select</option>
</select>
</div>
</div>
</form>
</div>
In controller:
$scope.selectedDist={};
$scope.districts = [
{id: 1, name: 'Dhaka'},
{id: 2, name: 'Goplaganj'},
{id: 3, name: 'Faridpur'}
];
$scope.thanas = [
{id: 1, name: 'Mirpur', dId: 1},
{id: 2, name: 'Uttra', dId: 1},
{id: 3, name: 'Shahabag', dId: 1},
{id: 4, name: 'Kotalipara', dId: 2},
{id: 5, name: 'Kashiani', dId: 2},
{id: 6, name: 'Moksedpur', dId: 2},
{id: 7, name: 'Vanga', dId: 3},
{id: 8, name: 'faridpur', dId: 3}
];
$scope.filterExpression = function(thana) {
return (thana.dId === $scope.selectedDist.id );
};
N.B: Here filterExpression is a custom function that return values when selected district id equal dId in thana.
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope,$window, $http) {
$scope.myFunc = function(x) {
$scope.name = x.Name;
$scope.country = x.Country;
$scope.city = x.City;
$scope.x = x;
$("#myModal").modal();
};
$scope.saveData = function(x) {
if(x == ''){
x = angular.copy($scope.names[0]);
x.Name = $scope.name;
x.Country = $scope.country;
x.City = $scope.city;
$scope.names.push(x);
}
else{
x.Name = $scope.name;
x.Country = $scope.country;
x.City = $scope.city;
}
};
$scope.newData = function() {
$scope.name = "";
$scope.country = "";
$scope.city = "";
$scope.x = "";
$("#myModal").modal();
};
$scope.myDelete = function(x) {
if(x.Name=='' && x.Country=='' && x.City==''){
var index = $scope.names.indexOf(x);
$scope.names.splice(index, 1);
}
else{
var deletedata = $window.confirm('are you absolutely sure you want to delete?');
if (deletedata) {
alert('i am');
var index = $scope.names.indexOf(x);
$scope.names.splice(index, 1);
}
}
};
$scope.filterExpression = function(x) {
//alert($scope.country.id);
return (x.countryId === $scope.country.countryId );
};
$scope.names = [{"Name":"Alfreds Futterkiste","City":"","Country":""},{"Name":"Ana Trujillo Emparedados y helados","City":"","Country":""}]
$scope.countryList = [
{countryName : "Pakistan", countryId : 1},
{countryName : "UK", countryId : 2},
{countryName : "Sweden", countryId : 3}
];
$scope.cityList = [
{cityName : "Karachi", cityId : 1, countryId:1},
{cityName : "London", cityId : 2, countryId:11},
{cityName : "Sweden City", cityId : 3, countryId:3}
];
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<style>
.table tr {
cursor: pointer;
}
</style>
<div class="container" ng-app="myApp" ng-controller="customersCtrl">
<pre>{{names}}</pre>
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state on table rows:</p>
<table class="table table-hover">
<thead>
<tr>
<th>Sr.No</th>
<th>Name</th>
<th>Country</th>
<th>City</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names" ng-dblclick="myFunc(x)" >
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country.countryName }}</td>
<td>{{ x.City.cityName }}</td>
<td><span class="glyphicon glyphicon-remove" ng-click="myDelete(x)"></span></td>
</tr>
</tbody>
<tfoot>
<tr ng-click="newData()">
<td colspan="4">
</td>
<td>
<span class="glyphicon glyphicon-plus" ng-click="newData()" cursor="" ></span>
</td>
</tr>
</tfoot>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" ng-if="x!=''">Edit Record</h4>
<h4 class="modal-title" ng-if="x==''">Save Record</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" ng-model="name">
</div>
<div class="form-group">
<label for="country">Country:</label>
<!-- <input type="text" class="form-control" id="country" ng-model="country"> -->
<select class="form-control" ng-model="country" ng-options="x.countryName for x in countryList"></select>
</div>
<div class="form-group">
<label for="country">City:</label>
<select class="form-control" ng-model="city" ng-options="x.cityName for x in cityList | filter:filterExpression"></select>
</div>
<input type="hidden" ng-model="x" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="saveData(x)">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="myDelete(x)" ng-if="x!=''">Delete</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>