I am using Meteor + Angular to work on a webpage and I would like for users to be able to search for criteria. After submitting their filtering criteria via search button, I would also like users to see a stack of their previous criteria so they may edit it. For example:
Originally, users will have:
[Enter Field 1] [Search Button]
After entering <"some criteria"> and clicking the search button Users should see:
[<"some criteria">] [Search Button]
[Enter Field 1] [Search Button]
And after successive entries users should see:
[<"some criteria 1">] [Search Button]
[<"some criteria 2">] [Search Button]
.
.
.
[<"some criteria n">] [Search Button]
[Enter Field 1] [Search Button]
My problem is that I want users to select from specific criteria instead of entering text into the field area, but when switching from text to the select element I have run into some problems with angular.
Every time users enter criteria, they see the select dropdown in the history stack but it appears blank as if nothing is selected (although the webapp behaves as if the value of select is set to what the user selected before submitting).
For Example I get this instead of what I want above
[ Blank ] [Search Button]
[ Blank ] [Search Button]
.
.
.
[ Blank ] [Search Button]
The dropdown works and updating these past selections also seems to work so I suspect that angular just isnt setting the default to the past criteria when it auto populates the new select areas.
Below is my code for dynamically filling a div with rows of selects:
<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>
And the javascript:
$scope.addToPrevSearches: function() {
$scope.prevSearches.push({field:$scope.colKey});
}
One would think that because ng-model and ng-value are assigned past.field that the past.field text would appear selected instead of blank (especially since the web app behaves as if they are selected properly) but this isnt the case.
I have already tried the following posts here but nothing seems to be working:
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?
