AngularJS-オートフィルのドロップダウンで前のページの情報

Question

私はStackOverFlowをかなり徹底的に検索しましたが、私の答えは見つかりませんでした。

私はドロップダウンメニューを持つフォームを持っています。また、ユーザーがボタンをクリックすると、新しいHTMLページに移動して詳細情報を入力します。しかし、私はどのように私のデータをドロップダウンメニューから次のページに渡し、私は両方のページのフォームに同じコントローラを使用している場合、選択されたオプションで同じドロップダウンメニューを自動入力するのですか？

var app = angular.module('myApp', []); 
 

 
var currentEquipmentType = ""; 
 

 
app.controller('myController', ['$scope', function($scope) { 
 
    $scope.addEquipment.type = ""; 
 
    $scope.addEquipment.name = ""; 
 
    
 
    $scope.typeList = ['A', 'B', 'C', 'D']; 
 
    
 
    //trying to get this info passed onto the next page. 
 
    if (sessionStorage.type) { 
 
    currentEquipmentType = sessionStorage.type; 
 
    } 
 
    
 
    $scope.getEquipmentInfo = function() { 
 
    if ($scope.addEquipment.name !== undefined) { 
 
     sessionStorage.name = $scope.addEquipment.name; 
 
     sessionStorage.type = $scope.addEquipment.type; 
 
    
 
    } else { 
 
     // warning message 
 
    } 
 
    } 
 

 
}]);

<input type="text" ng-model="addEquiment.name"> 
 

 
<select ng-model="addEquipment.type" ng-options="type for type in typeList"> 
 
    <option value="" selected="selected">Please select a type.</option> 
 
</select>

<!-- on the next page (different html file, but uses the same controller as the previous page) --> 
 

 
<!-- more form inputs here --> 
 

 
<select ng-model="addEquipment.type" ng-options="type for type in typeList"> 
 
    <option>NEED THE OPTION SELECTED FROM PREVIOUS PAGE</option> 
 
</select>

Answer 1

あなたは良いの使用ディレクティブをすることができますし、例のように、両方のドロップダウンのために同じテンプレートを設定し、すべての要素は、属性select-boxこのテンプレートを埋めますがあります。

var app=angular.module('myApp', []); 
 
app.directive("selectBox", function() { 
 
    return { 
 
     restrict: 'A', 
 
     template :'<select ng-model="addEquipment" ng-options="type for type in typeList"><option value="">Please select a type.</option></select>', 
 
     link: function(scope, elem, attrs) { 
 
     scope.typeList = ['A','B','C','D']; 
 
     } 
 
    }; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 

 
<div ng-app="myApp" > 
 
    <div select-box></div> 
 
</div>

Answer 2

サービスソリューション：AngularJSアプリでデータを永続化する1つの方法は、サービス（または工場）にあるであろう

。サービスはシングルトンなので、ページを更新しない限りデータを保持します。

app.service('YourService', function() { 
    let yourDataFromPreviousPage = { 
     page: 1, 
     // currentEquipmentType: '', 
     // properties can be added later from controllers when you have them resolved. 
    }; 

    function yourData() { 
     return ['A','B','C','D']; 
    } 

    angular.extend(this,{ 
     yourData, 
     yourDataFromPreviousPage 
    }); 

}); 

次に、あなたのディレクティブにサービスを挿入するだけで、そこからサービスの変数を取得/設定できます。サービスに関する

さらに詳しい情報：

https://toddmotto.com/factory-versus-service

UI-ルータソリューション

になり別の方法：サービスや工場間の

https://docs.angularjs.org/guide/services

本当に良い比較ui-routerを使用して州を通るあなたのルートの軌跡 - 私はこのアプローチを推奨します。なぜなら、今のところSPAアプリケーションにとっては事実上の標準であるからです。異なるページのルートを設定することができます。異なるページ状態に切り替えると、異なるパラメータがロードされます。

あなたは使用状態の間でオブジェクトを渡すことができます：あなたは以前にカバーされていることだ

https://github.com/angular-ui/ui-router/wiki/Quick-Reference

ローカルストレージ

：UI-ルータに関する詳細情報については

$state.go('yourstate', { 
    // your object properties 
}); 

をコメント。