Angular - 将选定选项分配/存储到范围变量以供使用

I have a select option with the options of yes or no.

我有一个选择选项,可选择是或否。

<select ng-model="selectedAnsw" ng-options="answ.text for answ in answs"></select>

$scope.answs = [
            {
                text: "Yes",
                value: Yes
            },
            {
                text: "No",
                value: no
            } ];

I want to store what the user selects in $scope.selectedAnsw and have it save + populate the select. So if the user selects No and then navigates to a different page and comes back to yes/no page No is preselected because they selected it a bit ago/it was stored. I don't need to keep the selection forever, just during this session. Thinking this might have to do with $rootScope + ng-select.

我想存储用户在$ scope.selectedAnsw中选择的内容并保存+填充select。因此,如果用户选择“否”,然后导航到另一个页面并返回到“是”/“否”页面,则会预先选择“否”,因为他们之前选择了它/它已存储。在本次会议期间,我不需要永远保留选择。认为这可能与$ rootScope + ng-select有关。

1 个解决方案

#1

You can use service to achieve this. Create a service with setter and getter methods. Inject the service in your controller.

您可以使用服务来实现此目的。使用setter和getter方法创建服务。在控制器中注入服务。

Now whenever user selects any option set it in service using setter, and when user comes back to same page, use getter method to get the user selection.

现在,每当用户选择任何选项时,使用setter设置它,并且当用户返回到同一页面时,使用getter方法来获取用户选择。

For setting it back to your select box you can take the object from your service and directly assign it to your ng-model.

要将其设置回您的选择框,您可以从服务中获取对象并直接将其分配给您的ng模型。

For e.g

$scope.selectedAnsw = yourServiceValue

$ scope.selectedAnsw = yourServiceValue

Below is simple snippet explaining the use of service.

下面是解释服务使用的简单片段。

var app = angular.module("myapp", []);

app.controller("testCntrl", function($scope, storeData) {
  $scope.selectedAnsw = {};

$scope.answs = [
            {
                text: "Yes",
                value: "Yes"
            },
            {
                text: "No",
                value: "no"
            } ];
  
  $scope.getAns = function() {
    $scope.userAns =  storeData.getUserAns();
  }
  
  $scope.setAns = function(ans) {
    storeData.setUserAns(ans);
  }
})
.service("storeData", function(){
  this.setUserAns = function(ans) {
    this.ans = ans;
  }
  
  this.getUserAns = function() {
    return this.ans;
  }
})
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="testCntrl">
<select ng-model="selectedAnsw" ng-options="answ.text for answ in answs" ng-change="setAns(selectedAnsw)">
     <option value="" disabled>Select An Answer</option></select>
</select>
  <div>User Selected : {{selectedAnsw}}</div>
  
  <button ng-click="getAns()">Show user selection</button>
  <div>User had Selected : {{userAns}}</div>
    </div>
  </div>

#1