Angularjs Dropdown在刷新后不会保持价值

时间:2015-10-16 18:22:55

标签: javascript jquery angularjs

我一直在努力解决这个问题。

 <select class="form-control"  
                        ng-model="question.sel"  
                        ng-change="updateDropDownQuestion(question,question.sel)">
                        <option ng-repeat="answer in question.answers" ng-disabled="answer.notAnOption"  value="{{answer.acode}}">{{answer.name}}</option>
                        <option style="display:none" value="NONE">NONE</option>
                      </select>

然后在我的js文件中:

$scope.updateDropDownQuestion = function(question, answer) {
    reset(question.code)

    $scope.formData["SOLE/SELECTED_QUESTION"] = question.code
    $scope.formData["SOLE/SELECTED_ANSWER"] = answer

    $scope.formData[question.code+"/"+answer] = true

    var questions = $scope.product.questions
    for(i=0; i <questions.length;i++){          
        if(questions[i].code == question.code){
            questions[i].sel = answer
            break;
        }
    }

    $scope.refresh()
};
$ scope.refresh()是它改变的地方。这会呈现屏幕。

无论我做什么,它似乎都会呈现先前的状态而不是下拉的当前状态。这是因为我在下拉更改后重新绘制屏幕。

似乎屏幕重新绘制它的时候首先是原始值。

关于如何获得价值的任何想法&#34;坚持&#34;一旦设定? 之后我需要开一些活动吗?

2 个答案:

答案 0 :(得分:0)

尝试使用ng-options呈现选项元素。

这些方面的东西:

<select class="form-control"  
                    ng-model="question.sel"  
                    ng-change="updateDropDownQuestion(question,question.sel)"
                    ng-options="answer.acode as answer.name in question.answers">
</select>

这还取决于updateDropDownQuestion正在做什么,你能提供吗?

答案 1 :(得分:0)

来自Angular官方网站: 注意:ngModel按引用进行比较,而不是值。绑定到对象数组时这很重要。您可能会发现这有助于设置下拉列表的默认值。请参阅下面的示例。

angular.module('demoApp', []).controller('DemoController', function($scope) {

  $scope.options = [
    { label: 'one', value: 1 },
    { label: 'two', value: 2 }
  ];
    
  // Although this object has the same properties as the one in $scope.options,
  // Angular considers them different because it compares based on reference
  $scope.incorrectlySelected = { label: 'two', value: 2 };
    
  // Here we are referencing the same object, so Angular inits the select box correctly
  $scope.correctlySelected = $scope.options[1];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="demoApp">
    <div ng-controller="DemoController">
        <div>
            <h2>Incorrect</h2>
            <p>We might expect the select box to be initialized to "two," but it isn't because these are two different objects.</p>
            <select ng-model="incorrectlySelected"
                ng-options="opt as opt.label for opt in options">
            </select>

            The value selected is {{ incorrectlySelected.value }}.
        </div>
        <div>
            <h2>Correct</h2>
            <p>Here we are referencing the same object in <code>$scope.correctlySelected</code> as in <code>$scope.options</code>, so the select box is initialized correctly.</p>
            <select ng-model="correctlySelected"
                ng-options="opt as opt.label for opt in options">
            </select>

            The value selected is {{ correctlySelected.value }}.
        </div>

    </div>
</body>