Javascript 角度添加按钮不工作
我使用angularjs实现了带有添加和删除字段的表单，在外部运行效果很好，但当我将其放入div时，它不工作，只有删除工作。你能告诉我出了什么问题吗Javascript 角度添加按钮不工作,javascript,css,angularjs,Javascript,Css,Angularjs,我使用angularjs实现了带有添加和删除字段的表单，在外部运行效果很好，但当我将其放入div时，它不工作，只有删除工作。你能告诉我出了什么问题吗 <body> <div class="container"> <div class="row"> <div class="col-md-2 col-sm-2"> <div class="emp_details">
<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>
/* 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;
}
$scope.addNew = function(personalDetails){
$scope.personalDetails.push({
'fname': personalDetails.fname,
'lname': personalDetails.lname,
'email': personalDetails.email,
});
$scope.PD = {};
};
personalDetails<form ng-submit="addNew(personalDetails)">
添加函数的语法如下
$scope.addNew = function(personalDetails) {
// Code
}
personalDetails<form ng-submit="addNew(personalDetails)">
x
/*用户配置文件页面*/
.卡片{
边缘顶部：20px；
填充：30px；
背景色：rgba（2142242260.2）；
-webkit边框左上半径：5px；
-moz边框左上半径：5px；
边框左上半径：5px；
-webkit边框右上角半径：5px；
-moz边框右上角半径：5px；
边框右上角半径：5px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.卡片{
背景：url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg)无重复中心；
位置：相对位置；
填充顶部：40px；
溢出：隐藏；
文本对齐：居中；
背景色：#fff；
背景色：rgba（255、255、255、1）；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.card.hovercard.card背景{
高度：130像素；
}
.卡背景img{
-webkit过滤器：模糊（25px）；
-moz滤波器：模糊（25px）；
-o-滤波器：模糊（25px）；
-ms滤波器：模糊（25px）；
过滤器：模糊（25px）；
左边距：-100px；
利润上限：-200px；
最小宽度：130%；
}
.card.hovercard.card信息{
位置：绝对位置；
底部：14px；
左：0；
右：0；
}
.card.hovercard.card信息h1{
背景色：rgba（255、255、255、0.7）；
溢出：隐藏；
文本对齐：居中；
填充：10px；
字体大小：粗体；
字体系列：arial；
字号：83px；
利润率：450px 0px 27px 0px；
}
.card.hovercard.card info.card title{
背景：url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg)不重复；
-webkit文本填充颜色：透明；
-webkit背景剪辑：文本；
显示：块；
背景位置：中心-450px；
}
.card.hovercard.bottom{
填充：0 20px；
边缘底部：17px；
}
.btn首选btn{
-webkit边界半径：0！重要；
}
.btn主要{
右边距：10px；
}
.集装箱{
利润率：20px0；
}
阿尼尔·库马尔K
IND1469
经理
维克拉姆·拉纳德
目标
工作
行为
目标类型
活动
评论
这是表2
这是表3
<form ng-submit="addNew(personalDetails)">