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).
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>
I have a dictionary of objects with some duplicate ids like this:
var groups = {"0": "attributes":[{"id":2, "name":"abc"},
{"id":5, "name":"xyz"}],
"1": "attributes":[{"id":2, "name":"abc"}]}
I want to fetch this group into input text fields of form like this
<div ng-repeat="group in groups">
<input type="text" ng-model="group.value"/>
</div>
Its working fine if I have all the distinct ids but I want the input fields with duplicate ids to be attached with same ng-model, so that if one input is filled then another one gets filled automatically.
Searched almost everything but couldn't come up with any solution. Any help would be appreciated.
Thanks in advance :)
The HTML standard requires elements to have unique IDs to be valid. Use a class to select multiple elements using a shared selector. You could write some code to have each element with the same ID have the same ng-model value.
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
I want use select in angularjs.
I have a json that every element have 2 part: name and value. I want show name in dropdown and when user select one of theme, value is copy to ng-model.
$scope.list = [{name:"element1",value:10},{name:"element2",value:20},{name:"element3",value:30}];
For this I have 2 way to use select:
ng-options:
I use ng-options like below:
<select ng-model="model.test" ng-options="element.name for element in list"></select>
It's work correctly, but when I select each of element, I want just value of element is copy to ng-model, but a json is copy to ng-model, like below:
$scope.model.test = {name:"element1",value:1}
I can resolve this problem in angular controller, but I want find a better way that resolve this problem.
For resolove this problem, I use second way:
2.use ng-repeat in options:
<select ng-model="model.test">
<option ng-repeat="element in list" value="{{element.value}}">{{element.name}}</option>
</select>
In second way, just value is copy to ng-model, but as a string type:
$scope.model.test = "10";
I use below code, but all of them return a string value to model.
<option ng-repeat="element in list" value={{element.value}}>{{element.name}}</option>
<option ng-repeat="element in list" value="{{element.value}}|number:0">{{element.name}}</option>
<option ng-repeat="element in list" value={{element.value}}|number:0>{{element.name}}</option>
How can fix this problem?
you can resolve it with ng-options as well
ng-options="element.value as element.name for element in list"
please read this blog to understand more about ng-options.
Also another advantage of ng-options is, it binds the object as opposed to json string in case you want to attach the selected object to ng-model.
Have you tried this :
<select ng-model="model.test" ng-options="element.value element.name for element in list"></select>
btw, if you may have hundreds of records into your list, you should create your own directive, where you would manipulate your DOM with a simple javascript for loop
ng-repeat will be slow to be rendered,
ng-options adds every record into $watch.