I am new to angularjs. I want to add a placeholder to my dropdown.
I am not hard coding my dropdown values, it's coming from some where. Can you tell me where i did mistake.
<div class="row form-group">
<label class="col-md-3">Action<span style="color: #b94a48">*</span></b></label>
<div class="col-lg-3 col-md-7" style="padding: 0px;">
<div class="dropdown select" style="width: 100%;">
<select name="wlOrdActType" class="dropdown multiple" placeholder="-- Please Select --"
ng-model="wlOrdActType"
ng-options="obj.name as obj.name for obj in ordertypeList"
style="width: 100%;">
<option></option>
</select>
</div>
</div>
</div>
Here every thing is working. But placeholder is not place on the dropdown
<option value="" disabled selected>Please Select</option>
You can do something like this:
<select ng-model="wlOrdActType" ng-options="obj.name as obj.name for obj in ordertypeList">
<option value="" selected="selected">Choose one</option>
</select>
Could also try this:
<select required class="form-control" ng-model="myModel"
ng-options="item as item.title for item in list">
<option value="" label="-- Select option --" disabled selected="selected">
</option>
</select>
While having the model set to an empty string in the controller.
$scope.myModel = "";
I am using Angular v1.6.6. So, check for older version's compatibility. I believe the below code should work v1.5 onwards.
$scope.ordertypeList = ordertypeListFromApiCall; // Get the collection from API
$scope.ordertypeList.splice(0,0, {'id' : '', 'name' : 'Select Order Type...' } );
$scope.wlOrdActType = $scope.ordertypeList[0];
And in the HTML,
<select class="form-control" ng-model="wlOrdActType" required ng-options="ordertype.name disable when ordertype.id == '' for ordertype in ordertypeList track by ordertype.id">
</select>
In the itemSelected function, make sure that the id of $scope.wlOrdActType is not empty
Related
I am using AngularJS. I have a select tag. The tag's value is bound by ng-model. The ng-model variable has a value (coming from server). That value does not show up in the select dropdown tag. It shows up in a normal text box though.
How can I get the ng-model value ('blue' for below example) show up in the dropdown?
Please refer - http://jsfiddle.net/9w5XT/2446/
<select ng-model="blisterPackTemplateSelected"
data-ng-options="blisterPackTemplate as blisterPackTemplate.name for
blisterPackTemplate in blisterPackTemplates">
<option value="">Select Account</option>
</select>
<hr>
<input type="text" ng-model="blisterPackTemplateSelected" />
It should be
<select ng-model="blisterPackTemplateSelected"
data-ng-options="blisterPackTemplate.name as blisterPackTemplate.name for
blisterPackTemplate in blisterPackTemplates">
Check this fiddle
I think you must have the same model in array which you use in dropdown like this which you use for selected.
<div ng-app="App" >
<div ng-controller="ctrl">
<select ng-model="blisterPackTemplateSelected"
data-ng-options="blisterPackTemplate.name as blisterPackTemplate.name
for blisterPackTemplate in blisterPackTemplates">
<option value="">Select Account</option>
</select>
<hr>
<input type="text" ng-model="blisterPackTemplateSelected" />
</div>
</div>
var app=angular.module('App', []);
function ctrl($scope){
$scope.itemList=[];
$scope.blisterPackTemplateSelected = 'blue'
$scope.blisterPackTemplates=[{id:1,name:"a"},{id:2,name:"b"},{id:4,name:"c"},{id:3,name:"blue"}]
}
Here using JQuery Select 2 Autocomplete Dropdown with multiple selection.
When it is use by single it is working fine,like this
But When it is use by more than one Auto complete Not Working ,like this
<div class="col-lg-6" ng-repeat="locationtype in allLocationTypes">
<b><label ng-bind="locationtype.Type"></label></b>
<div class="form-group">
<select id="LocationMapID" multiple="multiple" class="form-control" placeholder="Select Location" style="width:100%">
<option value="" disabled="disabled">--Select Location--</option>
<option ng-repeat="location in allLocations | filter :filterLocations(locationtype.ID) " value="{{location.ChildLocationID}}">{{location.ParentLocation + '-' + location.ChildLocation}}</option>
</select>
</div>
</div>
I have faced this issue before
to resolve this I have set Uniq Id for each select2 box
<div class="col-lg-6" ng-repeat="locationtype in allLocationTypes">
<b><label ng-bind="locationtype.Type"></label></b>
<div class="form-group">
<select id="LocationMapID_{{locationtype.Type}}" multiple="multiple" class="form-control" placeholder="Select Location" style="width:100%">
<option value="" disabled="disabled">--Select Location--</option>
<option ng-repeat="location in allLocations | filter :filterLocations(locationtype.ID) " value="{{location.ChildLocationID}}">{{location.ParentLocation + '-' + location.ChildLocation}}</option>
</select>
</div>
</div>
So my problem is as follows, i have this HTML
<div class="col-sm-4">
<p><span>Teste A/B:</span></p>
<label class="label-radio">
<input type="radio" class="radio" name="ab-test" value="true" ng-model="isTestAvailable"> Sim </label>
<label class="label-radio">
<input type="radio" class="radio" name="ab-test" value="false" ng-model="isTestAvailable"> Não </label>
</div>
<div class="col-sm-4">
<p><span>Nº de testes:</span></p>
<select class="form-control" ng-model="tests.number">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
What i'm trying to do is make it so that when the user changes the select to another value i generate the given amount of test inputs via ng-repeat
<div ng-if="isTestAvailable == 'true'" ng-repeat="test in tests">
<hr>
<div class="row">
<div class="col-sm-12">
<h3>Test {{$index}}</h3>
<p><span>Specifications:</span></p>
<textarea id="teste1" class="form-control" onkeyup="resizeTextarea('test1')" data-resizable="true"></textarea>
</div>
</div>
<hr>
</div>
My controller contains this $watch
$scope.$watch("tests.number", function(newVal, oldVal) {
$scope.tests = [{}];
var i = parseInt(newVal);
for(var x = i; x <= newVal; x++) {
$scope.tests.push({});
}
});
that i tried to use in order to change the amount of test objects when the value changes, i tried using a simple variable as well and doing ng-repeat("i in tests.number") instead but that didn't work, what can i do so that the ng-repeat works with my given select option value?
I suggest to you, to use another variable instead of tests.number because you override it in your watcher.
Please check this plunker : https://plnkr.co/edit/XnV9MKjIYe1YOL4hR6Le?p=preview
I use another variable and bind ng-change instead of watch
<select class="form-control" ng-model="testNumber" ng-change="changeTestNumber()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I have few selects that looks like that:
<div class="row">
<div class="col-lg-4">
<label class="control-label" for="ModelSelect">Model </label>
<select ng-disabled="markedDic['make']!=true" class="form-control col-md-2" id="ModelSelect"
name="model" ui-select2
ng-model="carDetails.model">
<option ng-if="!carDetails.model" value="">[SELECT]</option>
<option ng-repeat="(model, value) in modelsDic" value="{{ model }}">{{ model}}</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<label class="control-label" for="VolumeSelect">Engine </label>
<select ng-disabled="markedDic['model'] != true" class="form-control col-md-2" id="VolumeSelect"
name="volume" ui-select2
ng-model="carDetails.volume">
<option ng-if="!carDetails.volume" value="">[SELECT]</option>
<option ng-repeat="(volume, value) in volumesDic" value="{{ volume }}">{{ volume }}</option>
</select>
</div>
</div>
As you can see, in every select the ng-disabled it dependent on markedDic[]
and the first option is following the same pattern
<option ng-if="!carDetails.volume" value="">[SELECT]</option>
When the form just loads, everything is fine, the default value is [SELECT] and then the rest of the values are the others.
But when I change in my javascript for example
carDetails.volume = "";
it makes the selected value in the select to be "" but still lets [SELECT] to be an option in the list.
While what I meant was that [SELECT] will be the option that is being showed as the selected value after my change in the js code.
What am I doing wrong?
Inside ng-if checking for not null and undefined can solve the problem. Try this because !"" will return truthy value.
ng-if="carDetails.model !== null && "carDetails.model !== undefined"
ng-if="carDetails.volume !== null && "carDetails.volume !== undefined"
I have created one dropdown by using rest API in angular JS.
<div class="form-group">
<label for="address" class="col-lg-4 col-md-4 col-sm-4 control-label">Country</label>
<div class="col-lg-7 col-md-7 col-sm-7 col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<select ng-model="selectCountry" class="selectpicker" ng-options="item.name for item in countryList">
<option value="">Select Country</option>
</select>
</div>
</div>
My controller
angular.module('myWebApp').controller('signInController',function ($scope){
alert("sign clicked" + $scope.selectCountry);
});
But my '$scope.selectCountry' is showing [object] [object]. Please help.
I can't see what your countryList array looks like but your ng-options most likely needs to be:
item.countryId as item.name for item in countryList
value / name / entry / array
So in your case, since you didn't specify the value, the value became the whole object.
https://docs.angularjs.org/api/ng/directive/select