api return status which is assign to $scope.status it come dynamically
$scope.status = [{"planStatus":"Completed","records":2},{"planStatus":"Partial","records":22},{"planStatus":"Active","records":24},{"planStatus":"Merged","records":6}]
This is my html code where i created select box using ng-repeat
<select ng-options="sta.planStatus as sta.planStatus for sta in status" ng-model="plan.planStatus" class="form-control">
<option class="selectoption" value="">Select Status</option>
</select>
I am creating a select box, 5 option show in my select box
I want to remove one option(like Active) from html? How can i do it. it is possible to do without change api response
You can use angular filters to remove the options. To remove the option where planStatus is 'Active', try this.
ng-options="sta.planStatus as sta.planStatus for sta in status | filter: optionsFilter"
In Controller:
$scope.optionsFilter = function (option) {
if (option.planStatus == 'Active') {
return false;
}
return true;
}
Related
I have a select box which is populating from database. In the browser, I can see the select box template with all data from DB but not able to see the select box in the UI in a table.
Controller.js:
$scope.GetCvSRCDetails = function() {
$scope.loader.loading = true;
crudFactory.getDataList("getcvsrcadetailalerts", "null")
.success(function (rcdata) {
$scope.cvsRCDetails = rcdata;
});
};
$scope.GetCvSRCDetails();
crudfactory.js
getDataList: function (ctrName, objId) {
url = serviceBase + "api/" + ctrName + "/" + objId;
return $http.get(url);//, authService.setHeader($http));
},
HTML
<td>
<select data-ng-options="rc.RCL1 for rc in cvsRCDetails"
data-ng-model="col">
</select>
</td>
On the basis of this, I need to populate another select box, but first I am not able to see the first Select box.
Thanks.
I resolved this issue with using below code.
<select ng-model="col" material-select>
<option ng-repeat="rc in cvsRCDetails">{{rc.RCL1}}</option>
</select>
I just added material-select in select tag.
Thanks,
Bharat
I have a dropdownlist -
<select ng-model="contact.type" id="select_{{$index}}" ng-change="changedValue()" class="searchCriteria">
<option>Policy Number</option>
<option>Insured Name</option>
</select>
I want to get the selected item using angularjs. So far I have tried
$scope.changedValue = function () {
alert($(".searchCriteria option:selected").html());
}
among other things. But each time the alert shows "undefined". How do I get the selected option text?
You can just use the $scope variable,
$scope.changedValue = function () {
alert($scope.contact.type);
}
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
This is my select tag
<select id="selectPrimaryObject" class="form-control" ng-change="getPrimaryRelations()" ng-model="relation.from">
<option id="md-option" ng-repeat="item in primaryObjectsList" value="{{item.id}}">{{item.name}}</option>
</select>
And my protractor code is
element.all(by.id('selectPrimaryObject')).each(function (values, index) {
values.click(); // select the <select>
browser.driver.sleep(5000); // wait for the renderings to take effect
element.all(by.id('md-option')).click(); // select the first md-option
browser.driver.sleep(5000); // wait for the renderings to take effect
});
It is selecting last item from dropdown, but I want each item to be selected one by one.
Find the options by repeater, click every option with the help of each():
var selectElement = element(by.id('selectPrimaryObject'));
selectElement.click();
var options = selectElement.all(by.repeater('item in primaryObjectsList'));
options.each(function (option) {
option.click();
});
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>