AngularJs Назначить значение Json для нескольких областей.

Question

Привет. У меня есть две формы на одной странице для ссылок на предыдущие данные, а другая - действительная форма. Поэтому я должен назначить один и тот же json (который фактически поступает из базы данных) на две разные формы на странице. У меня проблема, когда я изменяю значение параметра в основной форме, значение ссылочной формы также изменяется. То, что я хочу - это даже основное значение изменения формы, эталонная форма должна сохранять старую ценность. проверьте мой код. https://jsfiddle.net/sanuman/kts7je89/24/
Благодарю вас за любую помощь и предложения.

var app = angular.module('myApp',[]) 
 
    .controller('MyCtrl', function($scope, $http) { 
 
    
 
    $scope.muni=[ 
 
    { 
 
     "id": 24001, 
 
     "VDC_Muni_Code": "24001", 
 
     "VDC_Muni_Name_Eng": "Anaikot", 
 
     "tbl_district_id": 24 
 
    }, 
 
    { 
 
     "id": 24002, 
 
     "VDC_Muni_Code": "24002", 
 
     "VDC_Muni_Name_Eng": "Baldthali", 
 
     "tbl_district_id": 24 
 
    }, 
 
    { 
 
     "id": 24003, 
 
     "VDC_Muni_Code": "24003", 
 
     "VDC_Muni_Name_Eng": "Balting", 
 
     "tbl_district_id": 24 
 
    }, 
 
    { 
 
     "id": 24004, 
 
     "VDC_Muni_Code": "24004", 
 
     "VDC_Muni_Name_Eng": "Baluwapati", 
 
     "tbl_district_id": 24 
 
    } 
 
    ]; 
 
    $scope.service_data=[ 
 
    { 
 
     "tbl_vdc_municipality_id": 24001 
 
    }, 
 
    { 
 
     "tbl_vdc_municipality_id": 24004 
 
    }, 
 
    { 
 
     "tbl_vdc_municipality_id": 24002 
 
    }, 
 
    { 
 
     "tbl_vdc_municipality_id": 24003 
 
    } 
 

 
]; 
 
    $scope.municipalities_ref = $scope.muni; 
 
    $scope.municipalities = $scope.muni; 
 
\t $scope.wspVdcMuniTbls = $scope.service_data; 
 
\t $scope.wspVdcMuniTblsRef = $scope.service_data; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="MyCtrl"> 
 
    <h2> 
 
    Main Form 
 
    </h2> 
 
    <div ng-repeat="wspVdcMuniTblRef in wspVdcMuniTblsRef"> 
 
\t <select \t 
 
     ng-model="wspVdcMuniTblRef.tbl_vdc_municipality_id" 
 
\t options="municipalities_ref" 
 
\t ng-options="municipality_ref.id as municipality_ref.VDC_Muni_Name_Eng for municipality_ref in municipalities_ref"> 
 
\t </select> 
 
    </div> 
 

 
<h2> 
 
Reference Form 
 
</h2> 
 
    
 
    <div ng-repeat="wspVdcMuniTbl in wspVdcMuniTbls"> 
 
\t <select 
 
\t \t ng-model="wspVdcMuniTbl.tbl_vdc_municipality_id" 
 
\t  options="municipalities" 
 
\t \t ng-options="municipality.id as municipality.VDC_Muni_Name_Eng for municipality in municipalities"> 
 
\t </select> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

пример вы предоставили работу, как и ожидалось. Дело в том, что оба $scope.municipalities и $scope.municipalities_ref указывает на тот же объект (одинаковые для $scope.wspVdcMuniTbls и $scope.wspVdcMuniTblsRef), когда эта распайка выполнена:

$scope.municipalities = $scope.muni; 
$scope.municipalities_ref = $scope.muni; 
$scope.wspVdcMuniTbls = $scope.service_data; 
$scope.wspVdcMuniTblsRef = $scope.service_data; 

Вы должны создать копию $scope.muni и «$ scope.service_data», как это:

$scope.municipalities_ref = angular.copy($scope.muni); 
$scope.wspVdcMuniTblsRef = angular.copy($scope.service_data); 

документация angular.copy(source, [destination]); можно найти there.