如何将会话存储值设置为 Angular JS 中的下拉选择字段答案

【问题标题】：How to set the session storage value to the drop down select field in angular JS如何将会话存储值设置为 Angular JS 中的下拉选择字段
【发布时间】：2023-03-13 08:40:02
【问题描述】：

我在使用 Angular JS 设置下拉字段的值时遇到问题。下面是我拥有的 HTML 和 js 代码。我正在使用https://select2.org/（选择下拉组件）。

                  <div class="dropdown">
                    <label class="label"
                      >Type of card</label
                    >
                    <select
                      class="select js-select2"
                      ng-model="cardInfo.cardType"
                      required
                    >
                      <option value="debit">Debit card</option>
                      <option value="credit">Credit card</option>
                    </select>
                  </div>
                </div>

JS :

var saveToStorage = function() {
        var state = {
          cardInfo: $scope.cardInfo
        };
        window.sessionStorage.setItem("wizard", JSON.stringify(state));
      };

      var loadStorage = function() {
        var state = window.sessionStorage.getItem("wizard");
        if (state) {
          var newState = JSON.parse(state);
          $scope.cardInfo= newState.cardInfo;
         console.log('$scope.cardInfo', $scope.cardInfo.cardType ); // prints cardType: "Debit card"
        }
      };

      var init = function() {

        loadStorage();
      };

我在会话存储中设置 cardType 的值，并且设置正确，但是我在将值绑定到下拉组件时遇到的问题，它总是被设置为默认的第一个选项，无论我是什么选择。事实上，我试图在 HTML 中显示 ng-model 值，无论在 session 中设置什么，它都会显示正确的值，但只是下拉菜单没有设置 session 值。

【问题讨论】：

尝试创建一个演示来重现它
必须调用init()，后者又调用loadStorage()并设置$scope.cardInfo

标签： angularjs select dropdown

【解决方案1】：

Because you have to add 
ng-init when you initialize the drop-down.



Add html code:
<div class="dropdown" ng-init="init()">
                    <label class="label"
                      >Type of card</label
                    >
                    <select
                      class="select js-select2"
                      ng-model="cardInfo.cardType"
                      required
                    >
                      <option value="debit">Debit card</option>
                      <option value="credit">Credit card</option>
                    </select>
                  </div>
                </div>



js code:
$scope.saveToStorage = function() {
        var state = {
          cardInfo: $scope.cardInfo
        };
        window.sessionStorage.setItem("wizard", JSON.stringify(state));
      };
      var loadStorage = function() {
        var state = window.sessionStorage.getItem("wizard");
        if (state) {
          var newState = JSON.parse(state);
          $scope.cardInfo= newState.cardInfo;
         console.log('$scope.cardInfo', $scope.cardInfo.cardType ); // prints cardType: "Debit card"
        }
      };
      $scope.init = function() {
        loadStorage();
      };

【讨论】：