I am not getting the id value of the option value of selected item of tag.
<div ng-controller="UserCreationCtrl">
<form novalidate="novalidate" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputFirstName">First name:</label>
<div class="controls">
<input type="text" id="inputFirstName" ng-model="doctor.firstName" placeholder="First name"/>
</div>
</div>
<div>
<span class="nullable">
<select ng-model="user.lookupId" ng-options="select as speciality.lookupName for speciality in specialityList" ng-change="selectedSpecilaty()">
<option value="">-- choose speciality --</option>
</select>
</span>
</div>
</form>
</div>
My controller
app.controller('UserCreationCtrl', ['$scope',
function ($scope) {
$scope.specialityList = [
{lookupId : 1, lookupName: 'speciality1'},
{lookupId : 2, lookupName: 'speciality2'},
{lookupId : 4, lookupName: 'speciality6'},
{lookupId : 3, lookupName: 'speciality3'}
];
$scope.user = {firstName: 'first name value', lookupId : 4};
$scope.selectedSpecilaty = function()
{
alert($scope.user.lookupId);
}
}]);
How can i do this. the alert box displying the value as 'undefined'.
ng-options patterns can be confusing to get started with, as there are quite a bunch.
What you wrote right now means:
select as speciality.lookupName for speciality in specialityList
^-- the value to set to ^-- what to display ^-- iteree name ^-- iterables
So the variables you have available in the expression are everythin you have defined on the scope, and the contextual specialty variable. When you select something it'll assign it to select, which is indeed undefined.
What you're looking for is
ng-options="speciality.lookupId as speciality.lookupName for speciality in specialityList"
This will set the value of what ng-model is pointing to to the contextual specialty's lookupId
You have to change the select key that refers to the value key specified in your ng-options. Since your value key is speciality then to bind user.lookupId to your ng-model with the currently selected option's lookupId, you have to change select to specialty.lookupId
So your select's ng-options should be:
<select ng-model="user.lookupId" ng-options="speciality.lookupId as speciality.lookupName for speciality in specialityList" ng-change="selectedSpecilaty()">
<option value="">-- choose speciality --</option>
</select>
Related
I have the following select input in my html which is populated using ng-options. I want to show the selected NAME down below in whereas I want to send the selected ID back to the controller. I get the required id from ng-model="user.category". How can I show the selected name? I also show the names in options.
<select ng-model="user.category" ng-options="category.id as category.name for category in categories" class="form-control" class="select" required>
<option value="{{category.name}}">Select a Category</option>
</select>
<p>Available On : {{user.retailerBranchId}}</p>
<select ng-model="user.category" ng-options="category for category in categories" class="form-control" class="select" required>
<option value="{{category.name}}">Select a Category</option>
</select>
<p>Available On : {{user.category.id}}</p>
If you make retailerBranchId a method you can do it with something like lodash' _.find() (or even native find). You have user.category updating according to your selection, which you say has the id in it, which you can use:
function retailerBranchId() {
return _.get(_.find(this.categories, { id: user.category }), 'name', '');
}
This also fails gracefully; if it can't find any name, or any item that matches the id, it'll return an empty string.
Edit: You would call it in a similar fashion like so:
<p>Available on: {{ user.retailerBranchId() }}</p>
Although really, it's better to use it like this:
<p data-ng-bind="'Available on: ' + user.retailerBranchId()"></p>
Can you try like a below method,
Controller to get selected Category Name:
$scope.getSelectedCategoryDetail=function(selectedCat){
angular.forEach($scope.categories, function(cat){
if(selectedCat===cat.id){
$scope.user.name=cat.name;
}
});
};
Template to have ng-change event:
<select ng-model="user.category" ng-options="category.id as category.name for category in categories" class="form-control" class="select" required>
<option value="{{category.name}}" ng-change="getSelectedCategoryDetail(user.category)">Select a Category</option>
</select>
<p>Category Id : {{user.category}}</p>
<p>Category Name : {{user.name}}</p>
Using Angular 2: Essentially, if attr1 is selected in the first dropdown, I want ops1 to populate the list of the second dropdown, and if attr2 is selected in the first dropdown then ops2 and so on. I tried adding a *ngSwitch to the select and option, but then found out you can only add one * to an element. I also want this to update live. In other words, if the user first selects attr1 then switches to attr2 it should update the second dropdown accordingly
<div class="form-group">
<label for="attribute">Attribute</label>
<select class="form-control" id="attribute" [(ngModel)]="model.attribute" name="attribute" required>
<option *ngFor="let attr of attributes" [value]="attr">{{attr}}</option>
</select>
</div>
<div class="form-group">
<label for="operator">Operator</label>
<select class="form-control" id="operator" [(ngModel)]="model.operator" name="operator" required>
<option *ngFor="let op of operators" [value]="op">{{op}}</option>
</select>
</div>
export class MyModelFormComponent {
attributes = ['attr1', 'attr2'... 'attrN'];
ops1 = ['x', 'y', 'z'];
ops2 = ['A', 'B', 'C'];
...
model = new MyModel();
}
I created a dictionary/object of operators as values and the attributes as the keys. The code for operator looks like this:
<select class="form-control" id="attribute" [(ngModel)]="model.attribute" name="attribute" required>
...
<option *ngFor="let op of operators[model.attribute]" [value]="op">{{op}}</option>
I am using AngularJS 1.3.
In a form with 3 select boxes, from the choosen option of the first one i will show only south or only north select box.
In my try below i got erros like completely disappear the content below.
Wich will be the best way using angularjs to show only one of the two boxes ?
<select name="Type" ng-model="data.Type">
<option value="2">South</option>
<option value="3">North</option>
</select>
<div ng-if="data.Type==3">
<label class="item item-input item-select" >
<div class="input-label">North</div>
<select name="South" ng-model="data.South">
<option value="1">Dallas</option>
<option value="2">Miami</option>
</select>
</label>
</div>
<div ng-if="data.Type==2">
<label class="item item-input item-select" >
<div class="input-label">South</div>
<select name="North" ng-model="data.North">
<option value="1">New York</option>
<option value="2">Boston</option>
</select>
</label>
</div>
Works for me as-is with a very basic controller (see fiddle).
angular.module('app', [])
.controller('someController', function($scope) {
$scope.data = {}
});
The reason you only see one dropdown defaulted to blank is that there is not an initial value specified for the ng-model in this case data.Type. But it does work as in the 'North' and 'South' values are also there and selecting one of them causes the next dropdown to appear.
If you initialise data.Type to '2' in the controller then the dropdown will be defaulted to 'South' and one of the other dropdowns will appear.
You may also want to set initial values for data.North & data.South.
Fiddle with those updates
angular.module('app', [])
.controller('someController', function($scope) {
$scope.data = {
'Type' : 2,
'South' : 1,
'North' : 1
};
});
I currently have this:
<div>
<label for="market-type">Market Type</label>
<select id="market-type" type="text" ng-model="tradingFee.market_type">
<option value="stock">Stock Market</option>
<option value="otc">OTC Market</option>
</select>
</div>
which assigns the selected option's value to tradingFee.market_type. What I wish is to be able to do this plus assign the selected option's text to tradingFee.market_type_human_friendly_text, for example. Only being able to do one of the assignments is not enough. Is this possible somehow?
You could do this, but not with this syntax. use ng-options so that the ng-model holds both value and display name.
In your controller set array of objects:
$scope.marketType = [{id:"stock", displayName:"Stock Market"}, {id:"otc", displayName:"OTC Market"}];
and
<select id="market-type" type="text"
ng-model="tradingFee.market_type"
ng-options="mt.displayName for mt in marketType track by mt.id">
<option value="">--Select--</option>
</select>
Now the ng-model will have both id as well as value. i.e example:
tradingFee.market_type will be {id:"otc", displayName:"Stock Market"} if you select that specific item from the dropdown. With this you do not have to worry about maintaining 2 separate properties for displayName and id.
angular.module('app', [])
.run(function($rootScope) {
$rootScope.marketType = [{
id: "stock",
displayName: "Stock Market"
}, {
id: "otc",
displayName: "OTC Market"
}];
$rootScope.tradingFee = {
market_type: {
id: 'stock'
}
};
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="app">
<select id="market-type" type="text" ng-model="tradingFee.market_type" ng-options="mt.displayName for mt in marketType track by mt.id">
<option value="">--Select--</option>
</select>
{{ tradingFee.market_type }}
</div>
You could just use ng-change on your select to fire a custom event handler that sets the secondary value.
<select id="market-type" type="text" ng-model="tradingFee.market_type"
ng-change="updateSecondary()">
<option value="stock">Stock Market</option>
<option value="otc">OTC Market</option>
</select>
I'm new to angularjs and here is a dumb question
View:
<select id="Select1" ng-model="tld" class="form-control ">
<option value="net" data-id="2">.net</option>
<option value="vn" data-id="3">.vn</option>
</select>
<input type="button" class="btn btn-test" ng-click="checkDomain(newDomain,tld)" value="CheckDomain">
On controller:
I can get the tld value(net or vn) fine, but how can i get the data-id associated with the clicked item in Select ?
Most of the time I have an array bound to the select box, seems like a better approach. But, you could try to have a json object as the value argument, like <option value="{ text: 'net', id: 2 }">.net</option>.