我正在使用 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]
我的问题是,我希望用户从特定条件中进行选择,而不是在字段区域中输入文本,但是当从文本切换到选择元素时,我遇到了一些 Angular 问题。
每次用户输入条件时,他们都会在历史记录堆栈中看到选择下拉列表,但它显示为空白,就好像没有选择任何内容(尽管 Web 应用程序的行为就好像选择的值设置为用户在提交之前选择的值)。
例如,我得到的是这个,而不是上面我想要的
[ Blank ] [Search Button]
[ Blank ] [Search Button]
.
.
.
[ Blank ] [Search Button]
下拉菜单有效,更新这些过去的选择似乎也有效,所以我怀疑 Angular 在自动填充新的选择区域时没有将默认设置为过去的标准。
下面是我用选择行动态填充 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?
最佳答案
尝试使用这个
<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>
关于javascript - 使用 Angular 动态生成的选择选项未选择默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33001076/