I am attempting to get a JSON encoded response from an AJAX request into a select statement using angular ng-options. I do not have control of the PHP source of where the JSON response comes from.
The response is in the form:
{"A":"Col1","B":"Col2","C":"Col3","D":"Col4"}
I am using a simple select dropdown and need to populate the above JSON utilizing the index set as the value and the value set as the dropdown text. Example below.
<select ng-model="selectedItem" ng-options="item for item in items">
Options should result in this:
<option value="A">Col1</option>
<option value="B">Col2</option>
<option value="C">Col3</option>
...
I am unsure what I am missing for the format of the JSON response so it'll be used in the ng-options. I've tried all forms of the ng-options to no avail. I've also tried to format the response with json.parse, json.stringify, .eval(), etc.
Considering the json_encoded array was a correct object when it hit the angular function, I was able to get this working just by keeping it an object and manipulating the ng-options with a key, value configuration. Code below.
<select ng-options="k as v for (k, v) in cols"></select>
jsfiddle
I referenced the post here: ng-options with object data source
This worked out because I don't have control over the json encoded array coming to my controller but I needed to reference the key as the value for the options of the select instead of letting angular let it do its own thing with it.
use the angular JSON parser build in function: $scope.items = angular.fromJson(myJSON)
https://docs.angularjs.org/api/ng/function/angular.fromJson
Related
Having a lot of trouble with ng-repeat in a select tag. The below is not working for some reason though all documentation indicates that it should.
<select id="blahh" ng-model="log_instances" class="selectpicker" multiple>
<option>this works</option> <!-- this works -->
<option ng-repeat="comp in env.status.components">test-value</option>
</select>
The only option that ends up showing is the 'this works' one, but I would expect 'test-value' to show up for each of the items described in the ng-repeat's.
Additionally, I also checked the console for angular.element(document.getElementById('blahh')).scope() and it shows the proper data that I would expect to see. Also, if I include a table right below this select with the same ng-repeat's and fields, it produces the expected output just fine. I'm using Angular 1.6.5
Any help is appreciated!
The HTML snippet included with the original question had <span> tags as immediate children of the <select> tag, which would've produced invalid markup as only <option> or <optgroup> elements are permitted.
Whenever you have a data collection that needs to be presented as a select list, Angular's ng-options attribute makes it easy.
DEMO
Also, if you need a default option (for when the collection data might be in transit due to an AJAX request), include an <option> element assigned with an empty value (i.e. value=""), then you could use ng-if to hide this default option when it is no longer necessary.
Use ng-options like below. But your code also should work check env.status.components
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
My question to you would be, why do you want to use a ng-repeat inside a multiple select, when you have ng-options handy?
Assuming your comp object looks like this:
{
name: 'somevalue'
}
I would change your code to look like so:
<select id="blahh" multiple="true" ng-model="log_instances" ng-options="comp.name for comp in env.status.components"></select>
Please have a look at the plunker demo I have made for you
I'm working on angularjs app, and I can't find the answer for simple question. I've got an select with ng-options, when array that is set for options has more then one object inside the select is empty on start, but when array has only one element it automatically set it as default value. I need this select to be empty at the begining all the time, is there any solution?
in angularJS you may separate the variable used to fill in your options values and the model that stores your selected value.
See that example :
//Model used to store selected values
<select class="form-control" ng-model="myModel.country">
//I have a $scope.countries array of country
<option ng-repeat="country in countries" ng-value="country" required>{{country.name}}</option>
</select>
building an app that retreives data from a database.
Created 2 dependable dropdowns
1.Categories
2. branches
all select options are coming from a json tree (Array in an Array) that is fetched by a service(Categories).
in controller i fetch json with :
$scope.categories = Categories.query();
in html i try below code:
<select class="form-control" name="category" ng-model="params.category" ng-options="item as item.name for item in categories track by item.category">
</select>
<select class="form-control" name="branch" ng-model="params.branch" ng-options="branch as branch.name for branch in categories[params.category].branches track by item.category.branch">
</select>
Dropdown 1. Categories fetched ok but Dropdown 2. branches doesnt work.
Can you guide??
Since you have an array of arrays, I think the params.category variable will hold a reference to an array, so you can't use it in the second select with categories[params.category] because you need to use the index and not the reference. I suggest you try: categories[categories.indexOf(params.category)].
EDIT:
Since I don't know what your categories array looks like, and what a branch array looks like, I can only guess according to your code. IF your data structure is similar to what I think - here is a working plunker.
The main idea is that if an element inside your categories array is an object and has a branches property, then after you put a reference to it in $scope.params.category than you can just access the branches property using dot notation (no need to go back to the categories array).
It seems that angular's behavior with respected to the selected attribute has changed back and forth with each major version. So I'm just looking for someone to tell me if this is achievable in the 1.5.x release using ng-options rather than ng-repeat.
What I'm trying to do:
Have angular create html like the following(so that it can be interpreted by a jquery plugin)
<select multiple="multiple"...>
<option value="abc123" label="Justin" selected="selected">Justin</option>
</select>
I've tried many variations of this
<select ms-multi-listbox multiple="multiple" class="multi-select"
id="ym" name="ym" ng-model="groupCtrl.memSelection"
ng-options="mem as mem.displayName for mem in groupCtrl.selectableMembers track by mem.id">
with no luck.
the model looks like this:
groupCtrl.memSelection =["abc123"];//inbound from api as is selectableMembers
Here is a plunk I've been playing with (try changing the angular version for added confusion): Plunker
Any ideas are welcome.. I mainly wanted to avoid ng-repeat because it has a lot of overhead in longer lists but obviously slow is better than not working so I'll use it until I learn how to do this with ng-options.
Thanks!
edit:
Here is a ng-repeat that achieves the result I want:
<option ng-repeat="mem in groupCtrl.selectableMembers" value="{{mem.id}}" label="{{mem.displayName}}" ng-selected="groupCtrl.memSelection.indexOf(mem.id)>=0">{{mem.displayName}}</option>
enter code here
Be careful when using select as and track by in the same expression. AngularJS API ngOptions
Your expression for ng-options can't work. Using select as and track by in the same expression evaluates mem.id to mem.id.id. Change the expression to
ng-options="mem as mem.displayName for mem in groupCtrl.selectableMembers track by mem.id"
And how you set the selected objects don't look right to me as well. You can not just set the id, you have to set the whole object as selected otherwise your ng-options expression evaluation will also fail. Therefore change your selection to (assuming selectable data is stored in $scope.model as it is in the plunk example).
$scope.memSelection = [$scope.model[0], $scope.model[1]]
I have updated the plunk and it works for single and multi selection.
For more information read AngularJS API ngOptions.
I'm using Select2 library for autocomplete(directive name) with angularjs single-page. But I have a trouble with get the text of selected option:
<!--$scope.testData = [{code:1, value:'Test1'}, {code:2, value:'Test2'}];-->
<select id="test" name="test" ng-model="test" autocomplete>
<option ng-repeat="obj in testData" value="{{obj.code}}">{{obj.value}}</option>
</select>
I'm using ng-repeat instead of ng-options because select2 plugin doesn't have support for that.
At this part I got the value of obj.code and save it on $scope.test, but, additionaly I need to save in a other variable the text of obj.value selected. How can I do this? Basically this is because I need to print in another step that value (not code) but I too need save the code.
Thanks for advance.
You would have to watch the test value (or ng-change if that's supported) and when it changes loop through your testData to find the object with the same code and then update your other variable for display.
Alternatively you could use ui-select which lets you set test to be the object then you can display the value or code as you need.