I have two select menus that are populated via AJAX JSON data fetched after page load. They are linked by their own model and look like so;
<select name="category"
id="category"
ng-model="category"
ng-options="category as category.name for category in categories track by category.name">
<option value=''>Select category</option>
</select>
<select name="product"
id="product"
ng-disabled="!category"
ng-model="product"
ng-options="product for product in category.products">
<option value=''>Select product</option>
</select>
After the form is submitted to the API, it returns an originobject consisting of both the category and product strings if they are used.
I thought I should then be able to set the $scope.category and/or $scope.product to the returned origin data to pre-select the item in the select menu/s;
.success(function(data)) {
...
$scope.category = data.origin.category
...
}
But this does not work...
You can use ng-init to select initial value
<select ng-init="initDefaultCategory(categories)" name="category" id="category" ng-model="category" ng-options="category as category.name for category in categories track by category.name">
<option value=''>Select category</option>
</select>
<select ng-init="initDefaultProduct(category.products)" name="product" id="product" ng-disabled="!category" ng-model="product" ng-options="product for product in category.products">
<option value=''>Select product</option>
</select>
Working DEMO
EDITS
If you want to select default value, you can do something like this
Controller
$scope.initDefaultCategory = function(categories, value) {
if (categories.length > 0)
$scope.category = categories.filter(e => e.name == value)[0];
}
And you can pass value in ng-init
<select ng-init="initDefaultCategory(categories,'All')" name="category" id="category" ng-model="category" ng-options="category as category.name for category in categories track by category.name">
<option value=''>Select category</option>
</select>
Edited Demo
.success(function(data)) {
$scope.category = $scope.categories.filter(function(val,key){
return data.origin.category['yourKey']==val['yourKey']
})[0]
}
Related
I am working in an MVC project with HTML and angular.
I have a select list which get selected based on a name entered in an input box, but I am not able to get the id.
This works but I don't get the Id of the selected item:
<input type="text" ng-model="selectedCountry">
<select class="form-control"
ng-model="selectedCountry"
ng-options="country.name as country.name for country in countries">
<option value="">Select Country</option>
And this is not working, as I am not able to select by the name and get the id:
<input type="text" ng-model="selectedCountry">
<select class="form-control"
ng-model="selectedCountry"
ng-options="country.id as country.name for country in countries">
<option value="">Select Country</option>
Here is the plunker: Plunker
Thanks for the help!
<select class="form-control" data-ng-change="call(country.id)"
ng-model="country.id"
ng-options="country.id as country.name for country in countries">
<option value="">Select Country</option>
</select>
In order for the second scenario to work you'll need to get the id of the country in your controller like this:
$scope.selectedCountry = $scope.countries.find(function(country) {
return country.name === "Italy";
}).id;
try this
html
<input type="text" ng-model="selectedCountryId">
<select class="form-control" ng-model="selectedCountryId">
<option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>
<div>selected country id: {{selectedCountryId}} </div>
in controller add $scope.selectedCountryId = "";
hope it helps
Or
<input type="text" ng-model="selectedCountry.name">
<select class="form-control"
ng-model="selectedCountry"
ng-options="country as country.name for country in countries">
<option value="">Select Country</option>
</select>
In your HTML
and
$scope.selectedCountry = {};
in your javascript
I don't think that's possible when you use the same model on different select which are using different keys for the model.
I would go with using the name in both models and then fetching the id from the array:
$scope.getId = function(){
var co = $scope.countries.filter(function (el) { return el.name == $scope.selectedCountry });
if(typeof co !== 'undefined' && co.length > 0){
$scope.selectedId =co[0].id;
}else{
$scope.selectedId = null;
}
};
plunker here
when am using this code.selected value shown as empty.i want select 1st value as one.
<select class="form-control" name="cityID" id="Select1" ng-change="RoomSelect()" ng-model="sRoom">
<option value="1" selected="selected">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
When am using ng-model at the time default value selected as empty.otherwise its ok.
Try init sRoom model in controller
$scope.sRoom = 1;
also its better use ng-options instead of repeat option in select tag.
Demo
var app = angular.module('anApp', []);
app.controller('aCtrl', function($scope) {
$scope.sRoom = 1;
$scope.chooses = [{"key":"one","value":1},{"key":"Two","value":2},{"key":"Three","value":3}];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="anApp" ng-controller="aCtrl">
<select ng-change="RoomSelect()" ng-model="sRoom" ng-options="k.value as k.key for k in chooses">
</select>
</div>
Try this
<select class="form-control" ng-init="sRoom=1" name="cityID" id="Select1" ng-change="RoomSelect()" ng-model="sRoom">
<option value="1" selected="selected">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
You can also use ng-init
<select class="form-control" ng-init="sRoom=1" name="cityID" id="Select1" ng-change="RoomSelect()"
I have a angular dropdown cmbAll and list of cmbFruit in ng-repeat. I want when i change cmbAll selected value on cmbFruit [i] also change. But on load cmbAll is populated with -1 indexselected and cmbFruit [i] with their specific indexex. Below is the code. Please suggest.
<select id="cmbAll" tabindex="" title="" ng-change="onChange()">
<option value="">-Select One-</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Mango</option>
<option value="4">Papaya</option>
<option value="5">Pear</option>
</select>
<div data-ng-repeat="x in InfoList">
<select id="cmbFruit" name="cmbFruit" ng-model="x.Name"
ng-options="c.Value as c.Text for c in x.List"></select>
</div>
What should be the code for onchange()
Take ng-model for cmbAll
<select id="cmbAll" tabindex="" title="" ng-change="onChange()" ng-model="cmbAll">
<option value="">-Select One-</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Mango</option>
<option value="4">Papaya</option>
<option value="5">Pear</option>
</select>
<div data-ng-repeat="x in InfoList">
<select id="cmbFruit" name="cmbFruit" ng-model="x.Name"
ng-options="c.Value as c.Text for c in x.List"></select>
</div>
Controller.
$scope.onChange = function()
{
for(var i=0 ; i < $scope.InfoList.length; i++)
{
$scope.InfoList[i].name = $scope.cmbAll
}
}
This will assign the value selected in cmbAll to second dropdown.
I have
select
<select ng-model="country" ng-options="{{selectOptions}}">
<option style="display:none" value="">Select country</option>
</select>
and json country list {id :..., nameEn: ..., nameRu: ...}
Can someone explain why this works:
$scope.lang = "En";
$scope.selectOptions = "country as country['name'+lang] for country in countries";
$scope.customerChanged = function(v){
if (/[а-яА-ЯЁё]/.test(v))
$scope.lang = "Ru";
else
$scope.lang = "En";
}
But this doesn't:
$scope.selectOptions = "country as country['nameEn'] for country in countries";
$scope.customerChanged = function(v){
if (/[а-яА-ЯЁё]/.test(v))
$scope.selectOptions = "country as country['nameRu'] for country in countries";
else
$scope.selectOptions = "country as country['nameEn'] for country in countries";
}
This doesn't work either:
<select ng-model="country" ng-options="country as country.name{{lang}} for country in countries">
<option style="display:none" value="">Select country</option>
</select>
$scope.lang = "En";
$scope.customerChanged = function(v){
if (/[а-яА-ЯЁё]/.test(v))
$scope.lang = "Ru";
else
$scope.lang = "En";
}
<!--First Solution-->
<select ng-model="selectValue" ng-options="item.Name for item in items">
<option selected value="">Select Value</option>
</select>
<!--Second Solution-->
<select ng-model="selectValue">
<option value="{{item.Value}}" ng-repeat="item in items">
{{item.Name}}
</option>
</select>
<!--Third Solution-->
<select ng-model="selectValue" ng-options="item.Name for item in items">
</select>
<!--For Multiple Select-->
<select ng-model="" multiple ng-options="">
</select>
From angular documentation:
Why mixing interpolation and expressions is bad practice:
There is no guarantee that it works for every directive, because
interpolation itself is a directive. If another directive accesses
attribute data before interpolation has run, it will get the raw
interpolation markup and not data.
I'm having the following script,
<select ng-model="create.Category" class="form-control input-sm" name="category" required>
<option value="" disabled="" selected="">Select Category</option>
<option ng-repeat="cat in categories" value="{{ cat.type }}">{{cat.type}}</option>
</select>
so my controller looks like this (categories is a factory which reaturn my categories to fill the select options, and info is an object instance with the parameters):
app.controller('myCtrl', function($scope, categories, info) {
$scope.categories = categories;
$scope.create = info;
});
so, my select options are filled perfectly, however, the ng-model="create.category" which has a value, is not been selected, it display the first category on the list.
Any guessing?
use ng-selected in select and compare the cat.type with value given
<select ng-model="create.Category" class="form-control input-sm" name="category" required>
<option value="" disabled="" selected="">Select Category</option>
<option
ng-selected="{{create.Category == cat.type}}"
ng-repeat="cat in categories" value="{{ cat.type }}">{{cat.type}}</option>
</select>
The preferred way is to use ngOptions :
https://docs.angularjs.org/api/ng/directive/ngOptions