如何将编辑的重复数据推送到另一个数组onclick复选框

Question

<div class="row">
  <div class="col-md-4">
    <div class="form-group">
    <label class="control-label" for="SubCenter">SubCenter <span class="error">*</span></label>
    <span ng-init="GetSubCenter()"></span>
      <select class="form-control border-input" id="subcenter" name="subcenter" required  multiple="" data-ng-model="AddCamp.subcenter"  data-ng-change="GetVillage(AddCamp.subcenter)">
      <option ng-repeat="subcenter in SubCenterArray" value="{{subcenter.id}}">{{subcenter.SubCenterName}}</option>
      </select>
    </div>
  </div> 
</div>
<div class="row">
  <div class="col-md-6" ng-show="vlgdata">
    <div class="form-group">
    <label class="control-label" for="Village">Villages <span class="error">*</span></label>
      <table class="table">
        <thead>
        <tr>
        <th>Population</th>
        <th>Select</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="vlg in VillageArray | orderBy : 'Population'">

        <td data-title="Population">
          <input type="text" class="form-control border-input" value="{{ vlg.Population }}">
        </td>
        <td>
        <input type="checkbox" ng-model="vlg.selectvlg" name="{{vlg}}" ng-click="chk()" />
        </td>
        </tr>
        <tr>
        </tr>
        </tbody>
      </table>
  </div>
  </div>
  <div class="col-md-6" ng-show="vlgdata">
    <div class="form-group">
    <label class="control-label" for="Village">Selected Villages <span class="error">*</span></label>
      <table class="table">
      <thead>
      <tr>
      <th>Population</th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="p in selectedvlgs" | orderBy : 'Population'">
      <td data-title="Population">{{ p.Population }}</td>
      </tr>
      <tr>

      </tr>
      </tbody>
      </table>
    </div>
  </div>
</div>

//Js start here
    //Get  subcenter details
  $scope.subcenter = null;
  $scope.SubCenterArray= [];
  $scope.GetSubCenter= function()
  {   
    $http.post("get_subcenter_name.php" , {})
    .success(function(data)
    { 
      $scope.SubCenterArray = data;

    });
  }

  //Get  vlg details
  $scope.vlgdata = false;
  $scope.village = null;
  $scope.VillageArray= [];
  $scope.GetVillage= function(subcenter)
  {
    $http.post("get_village_name.php" , {'subcenter': $scope.AddCamp.subcenter})
    .success(function(data)
    { 
      if(data!=null)
      {
        $scope.vlgdata = true;
        $scope.VillageArray = data;
      }
      if(data==null)
      {
        $scope.vlgdata = false;
      }

    });
  }


  $scope.selectedvlgs = [];
  $scope.chk = function(){
    //alert("hii");
    angular.forEach($scope.VillageArray, function(value, key){
      if(value.selectvlg == true){
        var title = value.id;
        //alert(title);
        var flg = 1;
        angular.forEach($scope.selectedvlgs, function(value, key){
          var exTitle = value.id;
          if(title == exTitle){
            flg = 0;
          }
        });
        //alert (value.Product_Name);
        if(flg == 1){
          $scope.selectedvlgs.push(value);
        }
      }
      if(value.selectvlg == false){
        var title = value.id;
        //alert(title);
        var flg = 1;
        angular.forEach($scope.selectedvlgs, function(value, key){
          var exTitle = value.id;
          if(title == exTitle){
            flg = 0;
          }
        });
        //alert(flg);
        if(flg == 0){
          var index = $scope.selectedvlgs.indexOf(value);
          //alert(index);
          $scope.selectedvlgs.splice(index,1);
           $scope.sum=0;
          for(i=0;i<$scope.selectedvlgs.length;i++)
              {
            $scope.Population=$scope.selectedvlgs[i].Population;
              }

        }

      }
    });

  }

如何将已编辑的重复数据推送到另一个阵列onclick复选框。？

我正在点击子中心的VillageArray数据。在这个村庄我需要编辑人口字段并将可编辑值推入selectedvlgs。可编辑值不会更新。  怎么做？

Answer 1

可能要注意的一件事是添加超时和摘要。

    $timeout( () => {
      $scope.$apply();
    });

但我认为更简单的解决方案是利用视图中的函数来对界限值求和。您不必显式处理总计，您可以轻松地从视图中对函数中的vlg.selectvlg求和。创建一个循环遍历vlg.selectvlg

的函数

{{displayVillageTotal（）}}

    $scope.displayVillageTotal = function() {
        let total = 0;
        selectvlg.forEach()...
        return total;
    }

删除显式ng-click函数（chk（）），摘要应该在视图中选择函数的更改并相应地更新。