I am populating html drop down list from database with angularjs and I want to access selected value and pass it further to another function to get some more data from database but I cannot access values that is select tag populated with ng-repeat.
<select name="boja" ng-model="boja" class="form-control" ng-click="loadState(data.model)">
<option value="">Odaberi boju</option>
<option ng-repeat="boja in boje" value="{{boja.boja}}">{{boja.boja}}</option> </select>
$scope.loadState = function(model){
$http({
method:"POST",
url:"ubaciBoje.php",
data:{'model':model}
}).success(function(data){
$scope.boje = data;
});
};
Now when I want to access $scope.boja in another function it says it is undefined. But I am able to access $scope.boje which gives me an array of values. My question is how do i get access to value selected by user and pass it to another function?
When you do this:
<option ng-repeat="boja in boje" value="{{boja.boja}}">{{boja.boja}}</option> </select>
boja will exist here in the view template, and only here. IF you want to use in component code you have to directly pass it from a view as a paramenter eg
<option ng-repeat="boja in boje" value="{{boja.boja}}">{{someComponentMethod(boja.boja)}}</option>
and since boje isa scope (here component) field, you can access it whenever you want.
Here ng-click in select statement is not a good choice. angularjs has a very good directive for selecting and generating select html template.
<select ng-options="boja as boja.boja for boja in boje" ng-model="selectedBoja" ng-change="loadState(selectedBoja)"></select>
Here selectedBoja is you selected item when user change item drom select.
Related
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 the code listed below which works fine, however when i attempt to add ng-model and related ng-change to the select, an empty option is added. I understanding why, it is because on init the selectedOption for ng-model is empty.
What I want to do is set a default value so when I can use ng-change to set options IsSelected value to true when user selects it. I'm just not sure how to go about this, I have no issues doing this when I'm working with a static generated select list, but for some reason I can't figure it out for this dynamic generated list.
Any input is appreciated!
<div ng-repeat="optionType in productDetailModel.OptionTypes">
<select name="{{optionType.OptionTypeName}}">
<option ng-repeat="option in optionType.Options"
value="{{option.OptionValue}}">{{option.OptionValue}}
</option>
</select>
</div>
Here's plunkr I mocked to give a basic idea of what I have in mind: http://plnkr.co/edit/xBDfc0XzDwsF0mBiFZOv?p=preview
The initial option is blank because the model is initially undefined.
As tymeJV said, initializing your scope inside of your .js will define a default value that will be shown as selected initially.
$scope.modelName = $scope.optionType.Options[0];
It might be helpful to use ng-options instead of ng-repeat. One reason why it might be beneficial is that ng-options does not create a child scope (unlike ng-repeat). This could help simplify linking to your model and avoid confusion.
<select name="{{optionType.OptionTypeName}}" ng-model="modelName" ng-options="option for option in optionType.Options">
</select>
This article covers the basics of ng-options as well as discusses why it would be used as opposed to ng-repeat.
Hope this helps.
Use ng-options when using a select!
<select name="{{optionType.OptionTypeName}}" ng-model="someModel" ng-options="option as option for option in optionType.Options>
</select>
And then set the ngModel to the default option you want selected:
$scope.someModel = $scope.optionType.Options[0]
There is one directive of select element is ng-init but it call once while first time rendering, but if you change the options dynamically then it will not call again. So for that you need to set the model field with value in scope just below of your new option population logic.
$scope.modelName = $scope.Options[0]; // if array
$scope.modelName = $scope.Options[key]; // if Json Object
I'm trying to figure out why the ng-model is not working with the ng-repeat.
There is my code:
$scope.availableCountries = [];
APIUtility.getCountries().then(function(data){
$scope.availableCountries = data;
$scope.filters.country = "AZ";
});
<select id="eventprice" class="searchpage_select" ng-model="filters.country">
<option value="all">show all</option>
<option ng-repeat="countries in availableCountries" value="{{countries.country_iso}}" ng-class="{'element_selected' : filters.country == countries.country_iso}">{{countries.name}}</option>
</select>
where:
availableCountries is an object from an API call (well formed, trust me)
$scope.filters is an object containing a lot of filters (including country)
The problem is that if i change the ng-model before or after the API call, the select statement is not updated, i think that if i update the scope before angular has the time to execute his ng-repeat, ng-model stop working and will not update the field.
i added the ng-class to prove that filters.country has the right value (ng-class statement returns true when needed and add the class in the right place, so filters.country contains the right value).
I don't know if i was clear enough. Thanks all for your time!
Use ng-options instead of an ng-repeat on an option field.
<select id="eventprice"
class="searchpage_select"
ng-model="filters.country"
ng-options="country.country_iso as country.name for country in availableCountries">
<option value="all">show all</option>
</select>
Problem is in
$scope.filters.country = "AZ";
Try this updated jsfiddle
http://jsfiddle.net/HB7LU/15021/
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.
I have an issue with angularjs's select directive.
Here is my code:
<ul class="thumbnails">
<li class="span4" ng-repeat="product in productsDTO">
<div class="thumbnail">
...
...
...
<div class="span4" ng-repeat="varCat in product.varietyCategoriesAndOptions">
{{varCat.varietyCategoryName}}
<br />
<br /><br />
<select ng-model="varCat.varietyCategoryOption" ng-options="varietyCategoryOptionTransfer.varietyCategoryOptionId as varietyCategoryOptionTransfer.varietyCategoryOptionValue for varietyCategoryOptionTransfer in varCat.varietyCategoryOptions">
<option value="">Select color</option>
</select>
</div>
...
...
</div>
</li>
</ul>
I have a $http call that returns json which gets added to the local scope.
function getProductsByCategoryIdServiceCall(CategoryService, categoryId){
CategoryService.getProductsByCategoryId(categoryId).success(function(data){
$scope.productsDTO = data;
}).error(function(data){
$scope.productsDTO = null;
});
}
So basically I have a set of json objects returned from a webservice call, I set the local $scope to have those json objects, and the first iteration tag for productsDTO iterates over the newly populated objects.
Each product has a seperate object that shows what special categories this product has, and the options for those category(s).
I am trying to have the select tag be bound (ng-model) to the varCat Object. This is the one currently being iterated over, and the same object that also contains the array of options for the category that I am trying to set for the select tag directive.
I added a special field on the varietycategory object called varietycategoryoption specifically to hold the current state of that particular select category. I'm doing it this way because there could be many many of these category select's per page, and it is unknown how many, so I can't just hard code it into the page.
It doesnt seem to be working. Does anyone have any advice?
All of the json is a lot of data, but here is the part of the json return inside product that has all of the values associated with the select box:
"varietyCategoriesAndOptions":{"1":{"varietyCategoryId":111,"varietyCategoryName":"color","varietyCategoryOptions":{"202":{"varietyCategoryOptionId":202,"varietyCategoryOptionValue":"red"},"203":{"varietyCategoryOptionId":203,"varietyCategoryOptionValue":"blue"}},"varietyCategoryOption":null}}
**UPDATE*******************
user Chandermali said I was treating my data like it was
in array format, when it is in object format. Chandermali said to use this format
(key, value) in product.varietyCategoriesAndOptions
I tried this in my select
<select ng-model="varCat.varietyCategoryOption" ng-options="(varietyCategoryOptionTransfer.varietyCategoryOptionId, varietyCategoryOptionTransfer.varietyCategoryOptionValue) in varCat.varietyCategoryOptions">
<option value="">Select color</option>
</select>
And got this error:
Error: [ngOptions:iexp] Expected expression in form of '_select_ (as _label_)?
for (_key_,)?_value_ in _collection_' but got
'varietyCategoryOptionTransfer.varietyCategoryOptionId,
varietyCategoryOptionTransfer.varietyCategoryOptionValue in
varCat.varietyCategoryOptions'.
This change in the select tag was enough for it to work for me.
<select ng-model="varCat.varietyCategoryOption" ng-options="value.varietyCategoryOptionId as value.varietyCategoryOptionValue for (key,value) in varCat.varietyCategoryOptions">
<option value="">Select color</option>
</select>
I just had the wrong formatting on the select directive to access my object graph.
The select box is now being populated with the data.
Thank you very much for you patience.
Seeing your json neither your varietyCategoriesAndOptions or varietyCategoryOptions are array. These are object maps. You need to use the syntax for object map like
(key, value) in expression – where key and value can be any user
defined identifiers, and expression is the scope expression giving the
collection to enumerate.
For example: (key, value) in product.varietyCategoriesAndOptions