角度添加按钮不起作用

时间：2017-05-05 09:29:48

标签： javascript css angularjs

我正在使用angularjs添加和删除字段来实现表单，在外面运行工作正常，但是当我把它放在div中时它不工作只有删除工作正常。你能否建议什么是错的。

<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文件

var app = angular.module("myapp", []);
  app.controller("ListController", ['$scope', function($scope) {
      $scope.personalDetails = [
          {
              'fname':'Muhammed',
              'lname':'Shanid',
              'email':'shanid@shanid.com'
          },
          {
              'fname':'John',
              'lname':'Abraham',
              'email':'john@john.com'
          },
          {
              'fname':'Roy',
              'lname':'Mathew',
              'email':'roy@roy.com'
          }];

          $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文件

/* 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;
}

2 个答案:

答案 0 :(得分：1)

您的添加功能的语法为

$scope.addNew = function(personalDetails) {
 // Code
}

它占用了参数personalDetails。因此，在调用add函数时，它应该作为参数传递。

<form ng-submit="addNew(personalDetails)">

＆＃13;
＆＃13; 
var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.employeeCount = 4;
  $scope.personalDetails = [{
      'fname': 'Muhammed',
      'lname': 'Shanid',
      'email': 'shanid@shanid.com'
    },
    {
      'fname': 'John',
      'lname': 'Abraham',
      'email': 'john@john.com'
    },
    {
      'fname': 'Roy',
      'lname': 'Mathew',
      'email': 'roy@roy.com'
    }
  ];

  $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;
    });
  };
}]);
＆＃13; 
x
/* 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;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<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(personalDetails)">
                        <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" ng-disabled="personalDetails.length>employeeCount">
                        </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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

<form ng-submit="addNew()">在这里你没有传递任何痛苦。但是在你的控制器中

$scope.addNew = function(personalDetails){
              $scope.personalDetails.push({ 
                  'fname': personalDetails.fname,
                  'lname': personalDetails.lname,
                  'email': personalDetails.email,
              });
              $scope.PD = {};
          };

预计会像{

}那样获得personalDetails这样的html更改 

<form ng-submit="addNew(personalDetails)">
相关问题
最新问题