I am implementing the form with add and remove fields using angularjs, running outside is working fine, but when I put it inside an div its not working only remove is working. Could you please suggest whats going wrong.
<body>
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-2">
<div class="emp_details">
<h3><span>Anil Kumar K</span></h3>
<h3><span>IND1469</span></h3>
<hr></hr>
<h2><span>Manager</span></h2>
<h3><span>Vikram Ranade</span></h3>
</div>
</div>
<div class="col-lg-10 col-sm-10">
<div class="card hovercard">
<div class="card-background">
<!-- <img class="card-bkimg" alt="" src="http://lorempixel.com/100/100/people/9/">
http://lorempixel.com/850/280/people/9/ -->
</div>
<!-- <div class="useravatar">
<img alt="" src="anil.png">
</div> -->
<div class="card-info"> <h1><span class="card-title">OBJECTIVES</span></h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2">
<div class="side_menu">
</div>
</div>
<div class="col-lg-10 col-sm-10">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">JOB</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Behaviour</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<div ng-app="myapp" ng-controller="ListController">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form ng-submit="addNew()">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
<th>Objective Type</th>
<th>Activity</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td>
<input type="checkbox" ng-model="personalDetail.selected"/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.fname" required/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.lname" required/></td>
<td>
<input type="email" class="form-control" ng-model="personalDetail.email" required/></td>
</tr>
</tbody>
</table>
<div class="form-group">
<input ng-hide="!personalDetails.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
<input type="submit" class="btn btn-primary addnew pull-right" value="Add New">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JavaScript file
var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.personalDetails = [
{
'fname':'Muhammed',
'lname':'Shanid',
'email':'[email protected]'
},
{
'fname':'John',
'lname':'Abraham',
'email':'[email protected]'
},
{
'fname':'Roy',
'lname':'Mathew',
'email':'[email protected]'
}];
$scope.addNew = function(personalDetails){
$scope.personalDetails.push({
'fname': personalDetails.fname,
'lname': personalDetails.lname,
'email': personalDetails.email,
});
$scope.PD = {};
};
$scope.remove = function(){
var newDataList=[];
$scope.selectedAll = false;
angular.forEach($scope.personalDetails, function(selected){
if(!selected.selected){
newDataList.push(selected);
}
});
$scope.personalDetails = newDataList;
};
$scope.checkAll = function () {
if (!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.personalDetails, function (personalDetails) {
personalDetails.selected = $scope.selectedAll;
});
};
}]);
CSS file
/* USER PROFILE PAGE */
.card {
margin-top: 20px;
padding: 30px;
background-color: rgba(214, 224, 226, 0.2);
-webkit-border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
border-top-right-radius:5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card.hovercard {
background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat center center;
position: relative;
padding-top: 40px;
overflow: hidden;
text-align: center;
background-color: #fff;
background-color: rgba(255, 255, 255, 1);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.card.hovercard .card-background {
height: 130px;
}
.card-background img {
-webkit-filter: blur(25px);
-moz-filter: blur(25px);
-o-filter: blur(25px);
-ms-filter: blur(25px);
filter: blur(25px);
margin-left: -100px;
margin-top: -200px;
min-width: 130%;
}
.card.hovercard .card-info {
position: absolute;
bottom: 14px;
left: 0;
right: 0;
}
.card.hovercard .card-info h1{
background-color: rgba(255, 255, 255, 0.7);
overflow: hidden;
text-align: center;
padding: 10px;
font-weight: bold;
font-family: arial;
font-size: 83px;
margin: 450px 0px 27px 0px;
}
.card.hovercard .card-info .card-title {
background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display: block;
background-position: center -450px;
}
.card.hovercard .bottom {
padding: 0 20px;
margin-bottom: 17px;
}
.btn-pref .btn {
-webkit-border-radius:0 !important;
}
.btn-primary{
margin-right: 10px;
}
.container{
margin: 20px 0;
}
