I have this tempScale object defined in my controller:
$scope.tempScale = {
scaleType : [],
deviations : [],
intervals : 0
};
Which connects to my html:
<select id="scales" ng-model="tempScale.scaleType" class="form-control">
<option value="Manually Calculated" ng-selected="true">Manually Calculated</option>
<option value="Automatically Calculated">Automatically Calculated</option>
</select>
I added in the ng-selected=true so that manually calculated would be the first and selected option (basically a default option 1), however, when I run the page, my HTML looks like:
<select id="scales" ng-model="tempScale.scaleType" class="form-control ng-valid ng-dirty ng-touched">
<option value="? undefined:undefined ?"></option>
<option value="Manually Calculated" ng-selected="true" selected="selected">Manually Calculated</option>
<option value="Automatically Calculated">Automatically Calculated</option>
</select>
Why are those ng classes appearing on load, and where is this undefined option value coming from? It's not a loop, so I'm baffled.
You do not need ng-selected. Set the model from the controller as $scope.tempScale.scaleType='Manually Calculated';.
One cannot set a default selected item when using ng-model directive with select element. The select element is bind to model field, which data is undefined. What value select should display? Yes, undefined. You try to pass data via markup, it is not an Angular way.
Just keep your data in JS model, not in HTML markup.[Ref]
Plunker demo
Related
I have the following dropdown. I want to set All Patients as the default value.
<select [(ngModel)]="searchModel.careprovider">
<option [value]="0">All Pateints</option>
<option *ngFor="let user of practiceUsers" [value]="user._id.$oid">
{{user.dn}}
</option>
</select>
My model is declared this way:
searchModel: any = { location: null, practice: null, name: '', careProvider: 0 };
I set the practiceUsers this way:
this._practice.getUsers(this.searchModel.practice).subscribe(result => {
this.practiceUsers = result;
this.searchModel.careProvider = 0;
});
No matter how I change it I always just get a blank option as the default. I've tried adding an object to the this.practiceUsers array after it is loaded, then setting the model value. I've tried setting the model value with and without quotes to see if a number or string made a difference. Everything I try still results in the default being the blank option.
In Angular 1 I would have used ng-options, but that is no longer available for Angular 2, and every example I find shows to use the ngFor for dropdowns.
Object attributes are case sensitive, in your object, attribute is called careProvider, but in your template, you are using searchModel.careprovider with lowercase p. I think you also have to use NgValue directive instead of value because you are using NgModel directive. So, this should work: it is not working
<select [(ngModel)]="searchModel.careProvider">
<option [ngValue]="0">All Pateints</option>
<option *ngFor="let user of practiceUsers" [ngValue]="user._id.$oid">
{{user.dn}}
</option>
</select>
Try to use [selected] attribute. I solved similar problem this way:
<select>
<option *ngFor="let option of options" value="{{option.id}}" [selected]="option === selectedOption">
{{option.name}}
</option>
</select>
I hope this helps a little
<select class="form-control" id="policeid_country_id" name="policeid_country_id" formControlName="policeid_country_id">
<option [ngValue]="null">Select</option>
<option [ngValue]="country.id" *ngFor="let country of countries">{{country.country}}</option>
</select>
As the title says I get an empty option in my HTML when I'm using ng-repeat instead of ng-options. The reason I'm using ng-repeat instead of ng-options is to be able to set a class on every option depending on it's value. I tried using a directive with ng-options but I did not achieve desired result. The problem is not that the default selected value is not set as you can see from the generated HTML. I have a suspicion that the empty option comes from the select ng-model but I'm not sure.
My HTML looks like this:
<select ng-model="selectedProduct.code" ng-init="selectFirstProduct()" ng-change="getArticle()" size="8">
<option ng-selected="{{product.code == selectedProduct.code}}" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product )" value="{{product.code}}">{{product.name}}</option>
</select>
This results in HTML to look like this:
<select ng-model="selectedProduct.code" ng-change="getArticle()" size="8" class="ng-pristine ng-valid">
<option value="? string:200230 ?"></option>
<!-- ngRepeat: product in productsForPriceList -->
<option ng-selected="true" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product)" value="200230" class="ng-scope ng-binding" selected="selected">Product 1</option>
<option ng-selected="false" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product)" value="300025" class="ng-scope ng-binding">Product 2</option>
<option ng-selected="false" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product)" value="300206" class="ng-scope ng-binding">Product 3</option>
I'm using ng-init="selectFirstProduct()" to set selectedProduct.code to the first value in the list. However if I omit this code and set selectedProduct.code when I'm getting the list the result is still the same.
I'm using Umbraco version 7.3.5 back end with Angularjs version 1.1.5.
Initialize selectedProduct.code and it will eliminate the blank option from the list.
Initialize the Object
$scope.selectedProduct = {};
Set A default to the List
$scope.productsForPriceList.YourObjectKey.IsDefault = true;
Add this line code to Controller to initialize your option
$scope.selectedProduct.code = $filter('filter')($scope.productsForPriceList, {IsDefault: true})[0];
You need to add the dependency $filter to the controller
I have a number of items that get their data from a Json object and populate it using angular.
<select ng-model="MyCtrl.cargoList">
<option ng-repeat="cargo in MyCtrl.cargoList">{{ cargo.name }}</option>
</select>
And whenever I load the form, I get something like this in my console:
<select ng-model="MyCtrl.cargoList">
<option value="? object:25 "?></option>
<option value="">Gloves</option>
<option value="">Jacket</option>
<option value="">Shoes</option>
</select>
I can get the values to appear just fine, but I can't seem to get rid of the very first option. I don't mind the select box showing the very first element in the list, but I don't want it to be a blank line. How do I get rid of it?
You need to select 1st option by default on ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name" & ng-model name should not be same as that of your cargoList.
Markup
<select ng-model="MyCtrl.selectedCargo" ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name">
<option ng-repeat="cargo in MyCtrl.cargoList" value="cargo.name">{{ cargo.name }}</option>
</select>
Demo Plunkr
Use ngOption <option>
The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select> element using the array or object obtained by evaluating the ngOptions comprehension expression.
I have used following expression
label for value in array
HTML
<select ng-model="MyCtrl.cargo" ng-options="cargo.name for cargo in MyCtrl.cargoList">
</select>
and In your controller set model value as first element of list
this.cargo = this.cargoList[0]
Also note: You can use MyCtrl.cargoList as model as well as array So you should use another variable to hold the model value.
Use ng-options instead of ng-repeat
<select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList"></select>
You can fine tune the labels/values further if you like, check the documentation here - https://docs.angularjs.org/api/ng/directive/ngOptions
You can ng-init, or set the first value to defualt, something like
MyCtrl.selectedListItem = MyCtrl.cargoList[0]
So if you want a function to detect you have changed the value of the select you would use ng-change like so :
<select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList" ng-change="selectChanged"></select>
In your controller
$scope.selectChanged = function(){
//apply your logic
};
I've made a simple angular.js example which shows my problem: example
I want to set the start value of the select element to a specific value.
<select name="i" id="i" ng-model="selectedItem">
<option ng-repeat="i in items" value="{{i}}">{{i}}</option>
</select>
The options and the select element get rendered perfectly. But, like in the example, when i set the value in my controller to 6, the selected value on the page is still the first element.
scope.selectedItem = 6;
There are 2 simple buttons which just change the selected value. When you press them the selection change without problems.
EDIT: i updated the jsfiddle and removed unused code and renamed code to make things a bit more clear
EDIT2: I missed to ask if it is possible to fix the second select element too? The different is that this array contains objects instead of numbers.
<select name="o" id="o" ng-model="selectedItem">
<option ng-repeat="o in objects" ng-value="{{o.ID}}">{{o.Text}}</option>
</select>
You should not use ngRepeat to render option elements, it's not supposed to work properly with select and options. Use ngOptions which will work as expected with ngModel:
<select name="i" id="i"
ng-model="selectedItem"
ng-options="i for i in items">
</select>
For the second selectbox which has ngModel bound to ID property of the objects in array, it will be:
<select name="o" id="o"
ng-model="selectedItem"
ng-options="obj.ID as obj.Text for obj in objects">
</select>
Demo: http://jsfiddle.net/d3jf7ueq/9/
I'm new using angularjs and the angular user interface. I'm interested in the tag.
This is my html:
<select id="part1" ui-select2 ng-model="params.id" style="width: 200px;">
<option value="">Provinsi</option>
<option ng-repeat="v in prov" value="{{v.id}}" title="{{v.text}}"
ng-selected="v.id == params.id">{{v.text}}</option>
</select>
<select id="part2" ui-select2 ng-model="params2.id" style="width: 200px;" ng-disabled="true">
<option value="">Kabupaten</option>
<option ng-repeat="y in kab" value="{{y.id}}" title="{{y.text}}"
ng-selected="y.id == params.id">{{y.text}}</option>
</select>
and this my app.js :
$http.get('json/provinsiData.json').success(function(datax) {
$scope.prov = datax;
});
//part2 data
$http.get('json/acehData.json').success(function(datay) {
$scope.kab = datay;
});
$scope.params = {}
$scope.params2 = {}
As you can see select part2 is disabled.
How can I create an event change that works like the condition below?
if selected option of part1 is index 0
then select part2 disabled = false and load json part2 data.
The angular-js select supports the ng-change attribute which may call any javascript method defined in scope.
Example:
However your best bet may be just to evaluate an $scope expression in your ng-disabled= attribute, e.g. ng-disabled="params.id == 'X'".
With Angular, we usually aren't looking for events to trigger changes. Instead, when the model changes, the view should update to reflect those changes.
In this case, the second element should be enabled (not disabled) depending on a value in the model. When the model value connected to the first select menu satisfies some condition, enable the second menu. Yes, technically there's an event, but we don't need to care about it, all that matters are the model's values.
Here's a simplified example of how this might work:
<select ng-model="selection.item">
<option value="">Clothing</option>
<option ng-repeat="item in clothes">{{ item }}</option>
</select>
<select ng-model="selection.size" ng-disabled="!selection.item">
<option value="">Size</option>
<option ng-repeat="size in sizes">{{ size }}</option>
</select>
The second select menu's ng-disabled attribute is a simple expression which basically evaluates to "disable me if selection.item does not have a value". That could just as easily be a more complex expression or a function.
Here's a plunkr based on the code above