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

时间：2017-05-05 12:03:34

标签： javascript angularjs json

我是Angular的新人。我需要找到如何在单击保存按钮后保存我的JSON更改。我已经在控制器中添加了保存按钮和计数varible，其中你不能添加超过3行。如何添加保存控制器以一起捕获所有三行数据并一次发布到json。

＆＃13;
＆＃13; 
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;
    });
  };
}]);
＆＃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.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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

如果您想通过$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.. }

相关问题
最新问题