I´d like to pre-select a select-field from a given Restful-Service:
$scope.findOne = function () {
$scope.teams = Teams.query();
$scope.teamCategory = TeamCategories.get({
teamCategoryId: $stateParams.teamCategoryId
});
};
This is my function to get one Team-Category from my database.
<select name="assignedTeams" size="10" id="assignedTeams" multiple class="form-control" data-ng-model="teamCategory.assignedTeams" ng-options="team._id as team.detailName for team in teams" required>
<option value="">Please choose.</option>
</select>
and this is my select-Field. Both Services return the correct results, I can see them in the console. But the select-Field is not pre-selected. Where is my fault?
You need to make $scope.teamCategory.assignedTeams be an array that only contains the team ids you want to select. It should look like the following:
$scope.teamCategory.assignedTeams = [1,2,3];
The values 1, 2, 3 should be the teams ids you want selected.
I got it to work. The Restful-Service should not populate the response - then the selectFields are correctly set.
Thanks to your help!
Related
(Updated code)
Hi all i want to filtering items for count and quality using the filter functionality in meanjs app. then i tried many ways but unable to get the solution if any one knows the solution please help me.....
here is my plunker sample
Count All
<div class="col-md-2 form-group form-group-default">
<label>Quality</label> <select data-ng-model="searchtable.quality" id="quality" ng-options="item.quantity as item.quantity for item in descriptionyarnqualitys" class="form-control" placeholder="Quality"required><option value="">All</option></select>
</div>
The quality property is a sub property of colorshades and not of the order itself. Use searchtable.colorshades.quality model name and it works
dynamically extract the 'quality' value from the order list:
$scope.getDescriptionyarnqualitys = function() {
var qualities = {};
angular.forEach($scope.sryarnorders, function(order) {
angular.forEach(order.colorshades, function(shade) {
qualities[shade.quality]=shade.quality;
});
})
return qualities;
};
In the HTML you can call the function to extract the available qualities:
<select data-ng-model="searchtable.colorshades.quality" id="quality" ng-options="name for (name, value) in getDescriptionyarnqualitys()" class="form-control" placeholder="Quality" required>
Hope this help.
How can I get the object associated to the selected option inside within a dropdown (select)?
Here's my html:
<select ng-model="selSeason" ng-options="season as season.name for season in seasons"></select>
Every season is an object with several properties and I'd need to get the object associated to the selected object (and not only its text or value).
I know ng-repeat has something like (to select name of the 5th season):
element(by.repeater('season in seasons').row(4).column('name'));
Is there something similar for by.options() selector?
Thanks
You can use by.options with evaluate():
var seasonNames = element.all(by.options('season in seasons')).evaluate("season.name");
seasonNames.then(function (values) {
console.log(values); // array of season names is printed
});
You can also filter out the selected option with filter():
var selectedSeasonName = element.all(by.options('season in seasons')).filter(function (option) {
return option.getAttribute("selected").then(function (selected) {
return selected;
});
}).first().evaluate("season.name");
selectedSeasonName.then(function (value) {
console.log(value); // selected season name is printed
});
What you are looking for is the custom by.selectedOption locator.
element(by.selectedOption('model_name'))
For a better description, read this: https://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/
I ended up evaluating not the selected option but the ng-model associated to the select:
HTML
<select ng-model="selSeason" ng-options="season as season.name for season in seasons"></select>
JS
element(by.model('selSeason')).evaluate('selSeason').then(function(season){
console.log(season.name);
});
Your binding looks good, you can read all the properties easily by using your ng-model variable 'selSeason', see this example
<select ng-model="user"
ng-options="x as x.name for x in users track by x.id"
class="form-control"
ng-required="true">
<option value="">-- Choose User --</option>
</select>
var id = $scope.user.id;
var name = $scope.user.name;
var role = $scope.user.role
For more detail check this
I can seem to figure this one out even with the help of other posts. It is only happening in chrome. The error is coming at
angular.extend($scope.selectedCompany, $scope.companyId);
$scope.companies = {};
$scope.companies = Company.query(function () { });
$scope.selectedCompany = $sessionStorage.$default($scope.companies[1]);
$scope.selectCompany = function () {
$rootScope.active3 = $scope.companyId;
angular.extend($scope.selectedCompany, $scope.companyId);
var id = $rootScope.active3
$http.get('/api/apiCompany/' + id)
.success(function (result) {
$scope.CompanyName = result.CompanyName
console.log($scope.CompanyName);
});
};//
View
<label>Company Name</label>
<select class="form-control" ng-model="companyId" ng-change="selectCompany()"
ng-options="company.CompanyId as company.CompanyName for company in companies">
{{company.CompanyName}}
</select>
Here is what the return json looks like
[{"$id":"1","CompanyId":1,"CompanyName":"Black_Elk","Documents":null},{"$id":"2","CompanyId":2,"CompanyName":"Saratoga","Documents":null},{"$id":"3","CompanyId":3,"CompanyName":"Three_Rivers","Documents":null},{"$id":"4","CompanyId":4,"CompanyName":"Transparent_Energy","Documents":null}]
angular.extend expects objects (See here) and it seems like $scope.companyId is just a number. So your view should look more like this:
<label>Company Name</label>
<select class="form-control" ng-model="companyId" ng-change="selectCompany()"
ng-options="company as company.CompanyName for company in companies">
{{company.CompanyName}}
</select>
Note the change from company.CompanyId to just company. This should set the ng-model: companyId (should probably be company) to the selected company object. See ng-options doc for details, paying particular attention to the behavior of the select as label for value in array syntax
Hope that helps
I have a multiple select that is connectted to the model. I would like to add an additional option that's not part of the model and handle the click event. Is that possible and how?
Language:
<select multiple name="Language_Custom"
ng-model="model.Language_Custom"
ng-required="true"
ng-options="pn.Value as pn.Label for pn in Language_Custom_PossibleValues">
</select>
Create a function that returns a copy of your Language_Custom_PossibleValues array and appends your additional option to it. This lets you add an option without changing the underlying model.
$scope.getLanguages = function(){
var languages = [];
angular.forEach($scope.Language_Custom_PossibleValues, function(item){
languages.push(item);
});
languages.push({Value: 0, Label: 'Extra Option'});
return languages;
}
Now use that function as the source in the ng-options:
Language:<select multiple name="Language_Custom"
ng-model="model.Language_Custom"
ng-required="true"
ng-options="pn.Value as pn.Label for pn in getLanguages()"
ng-change="changeLanguage()"></select>
You also need a changeLanguage function that is called when the selected item in the list changes:
$scope.changeLanguage = function(){
if($scope.model.Language_Custom.indexOf(0) > -1)
alert('do somthing here');
}
Plunker
Here is the solution I used:
<div>
Language:<select multiple name="Language_Custom" ng-model="model.Language_Custom" ng-required="true">
<option ng-click="selectAllMultiValues(model, 'Language_Custom', Language_Custom_PossibleValues)">Select All</option>
<option ng-repeat="pn in Language_Custom_PossibleValues" ng-model="p.Value">{{pn.Label}}</option>
</select>
</div>
Let's say that I have list of countries and each country has a list of states/regions. So there are two selects. First to select country, and when country changes I want to trigger binding of the states select. How do you link these two controls to trigger binding of the states select when country changes?
<select id="countries"
data-ng-model="vm.permanentAddress.countryCode"
data-ng-options="country.code for country in vm.form.countries">
</select>
<select data-ng-model="vm.permanentAddress.stateCode"
data-ng-options="state.value for state in vm.getStatesForCountry(vm.permamentAddress.countryCode)">
</select>
UPDATE:
I was probably not explicit in my question as to what I want to do. I do not want to create any new properties that are then watched by angular for a change. I just want to tell anuglar, hey something has changed, go ahead and re-evaluate the binding for this control.
Is it not possible?
In your controller have something like this:
$scope.setStateOptions = function(country){
$scope.stateOptions = /* whatever code you use to get the states */
}
Then your html can be:
<select id="countries"
data-ng-model="vm.permanentAddress.countryCode"
data-ng-options="country.code for country in vm.form.countries"
data-ng-change="setStateOptions(country)">
</select>
<select
data-ng-model="vm.permanentAddress.stateCode"
data-ng-options="state.value for state in stateOptions">
</select>
May be you should use the jquery chanied select plugin:
http://jquery-plugins.net/chained-selects-jquery-plugin
I have used it for 4 select list chained and it worked fine.
Thx
Here is a working example. You just need to use the ng-change to change the model you have set for the states
You can take advantage of the dynamic nature of JavaScript to bind the key from the first list to the second list. Then you only have to set a default value on the change. If you remove the $watch it will still work, the second select will just default to empty when you switch the category.
Here's my data set-up and watch:
app.controller("myController", ['$scope', function($scope) {
$scope.data = ['shapes', 'colors', 'sizes'];
$scope.data.shapes = ['square', 'circle', 'ellipse'];
$scope.data.colors = ['red', 'green', 'blue'];
$scope.data.sizes = ['small', 'medium', 'large'];
$scope.category = 'colors';
$scope.$watch('category', function () {
$scope.item = $scope.data[$scope.category][0];
});
And here's the HTML:
<div ng-app="myApp" ng-controller="myController">
<select id="categories"
data-ng-model="category"
data-ng-options="category for category in data"></select>
<select id="item"
data-ng-model="item"
data-ng-options="item for item in data[category]"></select>
{{category}}: {{item}}</div>
You can, of course, change this to host complex objects and use keys or other identifiers to switch between the lists. The full fiddle is here: http://jsfiddle.net/jeremylikness/8QDNv/