AngularJs複数のスコープにJson値を割り当てます。

Question

こんにちは私は以前のデータを参照するために1ページに2つのフォームを持ち、1つは実際のフォームです。だから私は同じjson（実際にはデータベースから来ている）をページ内の2つの異なるフォームに割り当てる必要があります。参照フォームの値も変更されたメインフォームのオプション値を変更すると問題が発生します。私が望むのは、主なフォームの変更値でも、参照フォームは古い値を保持する必要があります。私のコードをチェックしてください。 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

期待どおりに仕事を提供してきました例。このassigmentが行われたときの事は同じオブジェクト（$scope.wspVdcMuniTblsと$scope.wspVdcMuniTblsRefも同じ）の両方$scope.municipalitiesと$scope.municipalities_refポイントということである。

$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を見つけることができます。