前提・実現したいこと
AngularJsを使って項目情報を設定する処理を作成している
画面から項目の情報を入力して保存、項目追加できる処理を実装したい。
AngularJsを使って画面からの入力値を保存、追加できる処理を実装しようとして
以下のような実装を行うと既に追加(保存)した値も同時に更新される現象が発生します。
■処理イメージ
①画面で項目情報を設定 $scope.paramというオブジェクトにプロパティを追加していく想定
②追加ボタンを押下して①で入力した結果を$scope.itemsという配列にpushして①の内容を保存
③項目追加がある場合、再度$scope.paramを編集
④追加ボタンを押下して③で入力した結果を$scope.itemsという配列にpushして③の内容を保存
このような実装をすると③の処理を実行すると、②でpushした配列の値まで変更されてしまいます。
実際のソースコード
---test.html
<p>項目名:<input type='text' ng-model='param.idvalue' placeholder='項目名'></p> <select ng-model="param.template" ng-options="template.template as template.name for template in templatetypes"></select> <button type="submit" ng-click="addItem(param)">新規項目追加</button>---controller.js
//入力パラメータの定義
$scope.param={
template:'a',
};
//新規項目追加ボタン押下
$scope.addItem = function(param){
$scope.view.items.push(param);
}
試したこと
値をそのまま渡すことが問題かと思い、以下のように別のオブジェクトに移して追加なども
してみましたが、結果が変わらずでした。
//新規項目追加ボタン押下
$scope.addItem = function(param){
var temp=param;
$scope.view.items.push(temp);
}
色々と調べてみて配列やオブジェクトなど型によって継承方法が異なるということは分かったのですが
具体的な対処方法がわからずという状態です。
何か良い解決方法はないでしょうか?
補足情報
以下のリソースを使用
"angular": "^1.7.9",
"angular-resource": "^1.7.9",
"angular-route": "^1.7.9",
"angular-sanitize": "^1.7.9",
あなたの回答
tips
プレビュー