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

时间:2015-10-30 20:24:06

标签: javascript angularjs angular-ngmodel angularjs-select

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

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

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

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

有关

1 个答案:

答案 0 :(得分:0)

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

现在,只要用户选择任何选项,使用setter将其设置为服务,当用户返回同一页面时,使用getter方法获取用户选择。

要将其设置回您的选择框,您可以从服务中获取该对象,然后直接将其分配给您的ng-model

例如

$scope.selectedAnsw = yourServiceValue

以下是解释服务使用的简单摘要。

&#13;
&#13;
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;
  }
})
;
&#13;
<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>
&#13;
&#13;
&#13;