如何将推送数据保存到控制器块的json

Question

我是Angular的新成员。点击保存按钮后，我需要了解如何保存我的JSON更改。我已添加保存按钮并在控制器中统计变量，其中u不能添加超过3行。如何添加保存控制器一起捕获所有三行数据并一次发布到json。

var app = angular.module("myapp", []); 
 

 
app.controller("ListController", ['$scope', function($scope) { 
 
    $scope.employeeCount = 2; 
 
    $scope.personalDetails = []; 
 

 
    $scope.addNew = function(personalDetails) { 
 

 

 
    $scope.personalDetails.push({ 
 
     'objtyp': personalDetails.objtyp, 
 
     'activ': personalDetails.activ, 
 
     'comm': personalDetails.comm, 
 
    }); 
 

 
    $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; 
 
    }); 
 
    }; 
 
}]);

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

<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.objtyp" required/></td> 
 
           <td> 
 
           <input type="text" class="form-control" ng-model="personalDetail.activ" required/></td> 
 
           <td> 
 
           <input type="text" class="form-control" ng-model="personalDetail.comm" 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="button" class="btn btn-primary pull-left" ng-click="save()" value="Save"> 
 
          <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>

Answer 1

如果您想通过$http post API保存JSON，尝试这个 -

$scope.save = function(){ 
    // maintain an array of selected items 
    $scope.selected = []; 
    angular.forEach($scope.personalDetails, function(detail){   
     if(detail.selectd){ 
      $scope.selectd.push(detail); 
     } 
    }); 
    // post this data to server using $http 
    $http({ 
    url: '/request-url', 
    method: "POST", 
    data: { 'data' : $scope.selectd } 
    }) 
    .then(function(response) { 
     // success, do something 
    }, 
    function(response) { // optional 
     // failed , do something 
    }); 
} 

不要忘记定义$http依赖于你喜欢控制器 - app.controller("ListController", ['$scope','$http', function($scope, $http){ //.....your controller with save and other functions.. }