没有使用角度动态生成的选择选项选择默认值

时间:2015-10-07 19:43:07

标签: javascript jquery html angularjs meteor

我正在使用Meteor + Angular在网页上工作,我希望用户能够搜索条件。通过搜索按钮提交过滤条件后,我还希望用户看到他们之前标准的堆栈,以便他们可以编辑它。例如:

最初,用户将拥有:

[Enter Field 1] [Search Button]

输入<“某些标准”>然后单击搜索按钮用户应该看到:

[<"some criteria">] [Search Button]
[Enter Field 1] [Search Button]

在连续输入后,用户应该看到:

[<"some criteria 1">] [Search Button]
[<"some criteria 2">] [Search Button]
.
.
.
[<"some criteria n">] [Search Button]

[Enter Field 1] [Search Button]

我的问题是我希望用户从特定标准中选择而不是将文本输入到字段区域,但是当从文本切换到select元素时,我遇到了一些角度问题。

每次用户输入条件时,他们都会看到历史堆栈中的选择下拉列表,但它显示为空白,就好像没有选择任何内容一样(尽管webapp的行为就像select的值设置为用户在提交之前选择的内容一样)。 / p>

例如,我得到的不是我想要的

[      Blank       ] [Search Button]
[      Blank       ] [Search Button]
.
.
.
[      Blank       ] [Search Button]

下拉列表的工作原理以及更新这些过去的选项似乎也有效,所以我怀疑在自动填充新的选区时,仅将角度设置为过去的标准。

下面是我使用选择行动态填充div的代码:

  <div id="history"  ng-repeat="past in prevSearches">
    <select ng-model="past.field" ng-change="myCallback()" 
       ng-value="past.field" ng-options="option.title for option in colKeys">     
    </select>
  </div>
      <select class="form-control" ng-model="colKey" ng-change="myCallback()">
        <option value="">--Field--</option>
        <option ng-repeat="option in colKeys" ng-value="option.value" ng-bind="option.title"></option>
      </select>
  <button  ng-click="addToPrevSearches()">go</button>

和javascript:

$scope.addToPrevSearches: function() {
  $scope.prevSearches.push({field:$scope.colKey});
}

有人会认为,因为ng-model和ng-value被指定为past.field,所以past.field文本将显示为选中而不是空白(特别是因为Web应用程序的行为就像它们被正确选择一样)但这不是情况下。

我已经在这里尝试了以下帖子,但似乎没有任何工作:

Can't set selected value of ng-options

Angularjs how to set the default value for select

How to select dynamically generated elements from inside an AngularJS directive?

1 个答案:

答案 0 :(得分:3)

尝试使用此

<select class="form-control" ng-change="myCallback()" ng-model="colKey" ng-options="option.value as option.title for option in colKeys" ng-selected="colKey === option.value"></select>