I have the following object:
defaults = {
0 : {
id : 10,
value : "string 1"
},
1 : {
id : 22,
value : "string 2"
}
}
I want to iterate over this object and display it as a select box.
<select ng-model="selectedValue" ng-options="obj.id as obj.value for obj in defaults">
<option value="">---Select option-----</option>
</select>
What I'm trying to achieve is to select 'string 2' by default. But it does not work.
The problem I have is the fact the selectedValue is a string:
$scope.selectedValue = "string 2";
From what I learned from the documentation the selectedValue must be the same object. But unfortunately, it is not possible. In my case selectedValue must be a string.
In other words I need to operate with the name of the option only, I don't care about id.
I tried to use ng-repeat. It even works but displays an empty option and I don't think using ng-repeat is a good way to do it.
Any advice will be appreciated greatly.
If you want the selectedValue variable to contain the value, and not the ID, then you should not use obj.id as obj.value, but obj.value as obj.value.
Selected value should be id;
$scope.selectedValue = 22;
See Demo
EDIT:
change template
<select ng-model="selectedValue" >
<option value="">---Select option-----</option>
<option ng-selected="selectedValue == obj.value" value="{{obj.value}}" ng-repeat="obj in defaults">{{obj.value}}</option>
</select>
see Updated Demo
I think you misinterpreted the documentation.
Selected value should refer to a value of the same object, not be an object itself.
Thus, you can set the default value as :
$scope.selectedValue = $scope.defaults[1].value;
That way, the default value will be set - it does not matter if the value is a string or a number.
If you are using ng-repeat with options you need to use on-last-repeat on your options tag. For example
select name="repeatSelect" id="repeatSelect" ng-model="usertypes.SelectedId"
option ng-repeat="option in usertypes.AvailableOptions" value="{{option.Id}}" ng-selected="option.Id === usertypes.SelectedId" on-last-repeat>{{option.Name}}
select
Related
I have two SELECTs on a page. They both load the possible options correctly and the ng-model appears to set properly as the initial value is set based on values in the model when loaded. I want to be able to make sure that the user does not choose a value for both of the SELECTs so I added a function for the ng-click. Inside the function I check if one was initially set that the other model does not now have a value. The problem I am facing is that when I get into the function, the models don't appear to be reflecting what the user has chosen.
I looked at a lot of questions on here and found solutions that indicated that the ng-options probably needed some changes. I have tried what I have seen, but nothing seems to be helping.
Here are the two HTML SELECTs
<select ng-model="example3model" class="form-control input-md" ng-click="checkTags(3)" ng-options="industry as industry.text group by industry.group for industry in industryData track by industry.id" >
<option value="">-- Select Industry --</option>
</select>
<select ng-model="example4model" class="form-control input-md" ng-click="checkTags(4)" ng-options="product as product.text group by product.group for product in productData track by product.id" >
<option value="">-- Select Product --</option>
</select>
Both arrays (industryData and productData) look similar (different actual values) and look like this:
industrydata is an array of about 28 objects like these 3...
{group: "Energy and Natural Resources", id: "5", text: "Chemicals"}
{group: "Consumer Industries", id: "6", text: "Consumer Products"}
{group: "Public Services", id: "7", text: "Defense Security"}
If I look at the model of one of the selects if initially set with values it looks like: (this is for an 'example4model'
Object
group : "Finance"
id : "34"
text : "Governance, Risk, and Compliance"
My function snippet looks like this:
$scope.checkTags = function(curModel) {
if (curModel == 3) {
if ($scope.example4model != null && $scope.example4model.text != '' && $scope.example3model != null) {
$rootScope.showMsg("Remove Product before adding an Industry.");
$scope.example3model = null;
}
} else {
if ($scope.example3model != null && $scope.example3model.text != '' && $scope.example4model != null) {
$rootScope.showMsg("Remove Industry before adding a Product.");
$scope.example4model = null;
}
}
};
If example4model is set initially, and I try to choose a value from the example3model select, I would think when I come into the function, I should see some value in example3model, but it is null. If I change the option chosen for example4model, when I come into the function, it shows the initial value and not the newly selected one.
It seems that somehow the model is not being updated to show the chosen options but I can't figure out why. Based on responses to other questions, I added the 'as' clause and the 'track by' clauses but that didn't help either.
Any help would be appreciated.
So I drew up a sample of your provided snippets in Plunker (bottom of post)...
Have you tried initializing your models with null?
What may be causing the issue on your end (if I understand the issue correctly) is that your models will be undefined before being set using the <select>. And in your checkTags() method, you are checking for "not null".
I suggest declaring your models in your controller like so:
$scope.example3model = null;
$scope.example4model = null;
This should allow your checkTags() if statements to catch the model values before being set. Alternatively, you can change your if statements to check for whether the model is "undefined" instead.
Other Recommendations
I also might recommend changing ng-click to ng-change -- ng-click will fire your checkTags() function whenever the <select> is clicked whereas ng-change just fires it when an option is selected.
In your checkTags() if statements, you can null check with a simple if($scope.example3model) -- check my snippet for those (line 43).
Don't forget to use !== when you are checking a value and looking for a truthy / falsy (bool) evaluation.
Plunker
https://embed.plnkr.co/mUgsqY/
Wrap checkTags() in a $timeout:
// In your HTML
<select ng-model="example3model" ng-click="initiateCheckTags(3)">
<option value="">-- Select Industry --</option>
</select>
// In your Controller
$scope.initiateCheckTags = function(curModel) {
$timeout(function() {
$scope.checkTags(curModel);
}, 100);
}
I have a select element like this
<select class="span3" ui-select2="{minimumResultsForSearch: -1}" ng-model="envelope.roofType">
<option value="">Select..</option>
<option ng-value="roof.id" ng-repeat="roof in roofList">{{roof.type}}</option>
</select>
So basically i'm sending the id corresponding to roofType in my post call.Now in my get call i get the same id back.I'm doing this in my controller.
$scope.envelope = success.records;
Now in my view since ng-model corresponds to envelope object,envelope.roofType is showing the id instead of actual type.
My question is,is there any way to map these id to actual text that should be displayed?
If you want to get the element that corresponds to that id, you can do it with a simple find function:
$scope.envelope = roofList.find(function(element) {
return element.id == success.records ;
});
This will return the element of the array that corresponds to the id, I'm supposing success.records is the id that you wanna map.
i don't know why it is not working when i want to precise a default value in my select:
<select ng-init="action1 = skills[0].name"
ng-model="action1" ng-options="skill.name for skill in skills">
</select>
Even with:
<select ng-init="action1 = action1"
ng-model="action1" ng-options="skill.name for skill in skills">
</select>
In my controller, i automatically load an user after a server request.
$scope.user = dataFromServer;
$scope.action1 = $scope.user.action1;
$scope.skills = $scope.user.skills;
My user have an array "skills". I can choose a skill in my select and i store the item choosen in $scope.action1. But if $scope.user.action1 is already set i want to have my select with this value as default.
I want to use ng-init and ng-options.
Please help ^^
It should be without the .name:
ng-init="action1 = skills[0]"
and the skills array should be fetched before the compilation of the ng-init directive you may use something like:
<select ng-if="skills.length" ng-init="action1 = skills[0]" notice the ng-if
I'm trying to get non-blank elements in my select using filter, but this doesn't work properly.
<select ng-model="selectedSubject.id">
<option value="0">
<%= res.getString("portlet.form.subjectField.default") %>
</option>
<option ng-repeat="sujet in subjects.allSubjects | filter:{name_fr:'!!'}" value="{{sujet.id}}">
{{sujet.name_fr}}
</option>
</select>
filter:{my_field:'!!'} will filter out only null values.
If you want to filter out empty values, or both null and empty, you should use a custom filter
<option ng-repeat="sujet in subjects.allSubjects | filter:notEmptyOrNull" value="{{sujet.id}}">{{sujet.name_fr}}</option>
Controller
$scope.notEmptyOrNull = function(item){
return !(item.name_fr === null || item.name_fr.trim().length === 0)
}
The filter that you are using will only filter the data that contains null values not blank.
To filter out blank data you have to create filter.This question has already been answered on stack overflow. Visit this link.
Angular - Filter to remove blank strings from array
You have to set the model so that angular selects the right option base on the select ngModel
<select ng-model="selectedSubject.id" ng-options="sujet.id as sujet.name_fr in subjects.allSubjects track by sujet.id"></select>
And set the default id on the controller.
$scope.allSubjects = subjects;
$scope.selectedSubject.id = subjects[0].id;
I have problem in getting the option value selected in dropdown with dynamic name and id. here's the html. Note: I will get the SELECTED OPTION VALUE from the dropdown. Not selecting a value on it.
I used many xpath contains but it doesn't works. the "[1]" changes everytime the page reloads.
Do you have any idea what is the correct xpath contains to use on this. BTW, I'm using web driver 2.32
<select name="this.is.dynamic.which.change.every.page.loads[1].select" id="this.is.dynamic.which.change.every.page.loads[1].select"
<option value> - Select </option>
<option value="1"> Option1</option>
<option value="2"> Option2</option>
<option value="3"> Option3</option>
<option value="4"> Option4</option>
<option value="5"> Option5</option>
<option value="6"> Option6</option>
</select>
It's a little bit tricky but my way to do that is :
//get the value
String name = driver.findElement(By.CssSelector(select)).getAttribute("name");
int flag = 0;
//loop for getting your dynamic number
for(int i=1; flag!=0; i++){
if (name.charAt(i).isNumeric()){
String num = name.charAt(i);
flag = 1;
}// end if
}//end for
// now get the value for the selected one
WebElement element = driver.findElement(By.CssSelector(select option:nth-child(num)));
It will probably not work (if you copy/past) because i can't test and i'm at work. But you got an idea to get what you want. Tell me what's up.
You can still use XPath Contains to match the Select then Option to Explicitly match your preferred option.
It will be Something like
//Select[contains(#name,'any frequent prefix')]/option[.='option']
or
//Select/option[.='option']
Hi Use the Select class in WebDriver API
String path = "/Select[contains(#name,'any frequet prefix')]"
Select options = new Select(driver.findElement(By.xpath(path)));
options.getAllSelectedOptions();
System.out.println(options.getAllSelectedOptions());
Can findElement by Tag if it's the Only Select/Dropdown on Page