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

Question

我在使用 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 值。

标签： angularjsselectdropdown

Answer 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();
      };