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
Related
Not able to add the selected value to the filter in angularjs im getting this error(Error: Unexpected token .)
Inside controller
$scope.search_type_options=[{name:"Name",value:"name"},{name:"Id",value:"id"},{name:"Update By",value:"updated_by"}];
$scope.search_val = function()
{
$scope.fs={$scope.search_type.value:$scope.search_txt};
$scope.filter_dt=$filter('filter')($scope.temp_data,$scope.fs);
}
I need output like
{name:"raj"}
Inside Template
<div class="form-group">
<select name="search_type" ng-model="search_type" ng-options="item as item.name for item in search_type_options">
<option value="">--select search type</option>
</select>
</div>
<div class="form-group">
<input type="text" ng-model="search_txt" class="form-control" placeholder="Search">
</div>
<button type="submit" ng-model="search_btn" ng-click="search_val()"class="btn btn-default">Go</button>
</div>
not sure if this is a correct js syntax
$scope.fs={$scope.search_type.value:$scope.search_txt};
normally it should be written like this
$scope.fs = {};
$scope.fs[$scope.search_type.value] = $scope.search_txt;
If I click on option 1 from dropdown list, a div which is initially hidden should be displayed. And if I click on another option from same dropdown list different div should be displayed and previous div should be hidden. I don't want to use JQuery as I have very less knowledge about it but only AngularJs.
My code is:
<div class="card">
<div class="item item-divider" align="center">
Candidates
</div>
<div class="padding">
<div class="form-group" align="center">
<label for="sel1"></label>
<select class="form-control" id="sel1">
<option>Location 1</option>
<option>Location 2</option>
<option>Location 3</option>
</select>
</div>
</div>
</div>
EDIT
Working example
http://plnkr.co/edit/SKdeAHMmvFB85ym1hfGr?p=preview
You can use ng-model to do this
<select ng-model="location.type" class="form-control" id="sel1" ng-change="changeme()">
<option ng-option value="1">Location 1</option>
<option ng-option value="2">Location 2</option>
<option ng-option value="3">Location 3</option>
</select>
<div ng-if="location.type == '1'">Location 1</div>
<div ng-if="location.type == '2'">Location 2</div>
<div ng-if="location.type == '3'">Location 3</div>
There's only one problem, and that's that empty option at the start. Once changed it's gone.
I was trying to pass the dynamically created model value to my controller. The div and model was created dynamically. But i can't fetch the model value in my controller.
This is the model part.
<div ng-repeat="cnt in countDiv">
<div id="subDiv_{{cnt}}" >
<select ng-model="Id_['{{cnt}}']" ng-change="getDetails(cnt)">
<option value="">Select</option>
<option ng-repeat="Data in details">{{Data.name}}</option>
</select>
</div>
</div>
How can I get this model valueng-model="Id_['{{cnt}}']" in my controller ?
I works for me
<div ng-repeat="cnt in countDiv">
<div id="subDiv_{{cnt}}" >
<select ng-data-model="Id_{{cnt}}"ng-change="getDetails(cnt);">
<option value="">Select </option>
<option ng-repeat="Data in details">{{Data.name}}</option>
</select>
</div>
I have done similar as your for dynamic model .
$scope.inputs = ['foo','bar'];
$scope.filter={
'foo':"Foo",
'bar':"Bar"
}
});
and i implemented using ng-repeat like this
<div ng-repeat="filter in filters">
<input type="text" ng-model= "'Id_'+ filter" />
</div>
If i understood you right, i have made a plunker .This might help you.
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
I have written following code in .js file
var appMod = angular.module('appMod',[]);
appMod.controller('domainCtrl', function($scope) {
$scope.admins = [{"type":["Kerberos","Department","Office"],"office":["NA","Bangalore","NY","NJ"]}];
});
Now i want to select an option from a drop down of type and office.
I have written following code in .html
<label for="typeOfAccess" class="col-sm-2 control-label">Type of Access :</label>
<div class="col-sm-1">
<select name="typeOfAccess" data-ng-model="newDomain.typeOfAccess">
<option data-ng-repeat="typeOfAccess in admin.type" value="typeOfAccess">{{typeOfAccess}}</option>
</select>
</div>
Please suggest what to do.
That is not how you defined options for a select in angularjs.
Please check documentation angularjs docs
This is how it should look like:
<label for="typeOfAccess" class="col-sm-2 control-label">Type of Access :</label>
<div class="col-sm-1">
<select name="typeOfAccess"
data-ng-model="newDomain.typeOfAccess"
data-ng-options="typeOfAccess for typeOfAccess in admin.type">
</select>
</div>
Let me know if it works after making those changes.
Try to use ng-value to save selected option .
I had same problem here once: Display details of selected options in Angularjs
$scope.selection = {
typeOfAccess: null
};
<label for="typeOfAccess" class="col-sm-2 control-label">Type of Access :</label>
<div class="col-sm-1">
<select name="typeOfAccess" data-ng-model="newDomain.typeOfAccess">
<div data-ng-repeat="typeOfAccess in admin.type">
<label><option value="typeOfAccess" ng-value="typeOfAccess" ng-model="selection.typeOfAccess"> </label> </option>
</div>
</select>
</div>
Selected campaign: {{ selection.typeOfAccess }}