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>
Related
i ust use ng-options in a select element in angular js. and in select select i just wants to add a extra options at the beginning of options.my code ===>
<div class="form-group">
<select class="form-control select2" ng-options="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
</select>
</div>
that is not working for me ? i dont know why.then i search on net and found some solution like =>
angularJS - add a Static option with ng-options
Add two extra options to a select list with ngOptions on it
Angular ng-options - Is there a way to add an option when the model contains a value not present in the options list?
after see above solutions i tried =>
<div class="form-group">
<select class="form-control select2" ng-options="" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
<option ng-repeat="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id">{{(o.fullName+' ('+o.email+')')}}</option>
</select>
</div>
after doing this this is also showing something like =>
but that is also not working for me i dont know why? can anybody help me ???
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 AngularJS, there is a requirement to show a dropdown with a selected value:
- When user selects a different value we should show a warning message and shouldn't proceed with update (save button disable).
- When user reverts to the original value, the message should hide and able to update (save button enable)
<select ng-model="vm.sldetails.AgencyGroupID" onchange=""
ng-options="a.AgencyGroupID as a.AgencyGroupName for a in vm.agencygroups">
<option value="">--Select--</option>
</select>
<label ng-show="">Warning message</label>
Instead of calling an event in controller, can we achieve directly in Onchange event?
<div class="col-md-2">
<select class="form-control" ng-model="vm.sldetails.AgencyGroupID"
ng-options="a.AgencyGroupID as a.AgencyGroupName for a in vm.agencygroups">
<option value="">--Select--</option>
</select>
</div>
HTML:
<label class="col-md-2 control-label text-align-left" id="lblWarningMessage" ng-if="vm.sldetails.AgencyGroupID==='your value'">Warning message</label>
In label tag,your value should be replaced by ur compare value
I guess you could try something like this:
<select ng-model="vm.sldetails.AgencyGroupID" ng-change="vm.selectChanged()"
ng-options="a.AgencyGroupID as a.AgencyGroupName for a in vm.agencygroups">
<option value="">--Select--</option>
</select>
<label ng-show="vm.showWarning">Warning message</label>
And in js:
vm.selectChanged = function(){
if(vm.sldetails.AgencyGroupID !== 'the initial value'){
vm.showWarning = true;
}else{
vm.showWarning = false;
}
}
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>
I have a select element with ng-options to populate options and <option value="">Select</option> as a static default option. I want to show another item in options list - Other, if selected, renders a textbox for user to enter other value. I tried adding another static option with value="-1" but it didn't work.
I would try following:
<div ng-init="arr = [{name:'A', val:1},{name:'B', val:2},{name:'C', val:2}]">
<select ng-model="v">
<option ng-repeat="o in arr" value="o.val">{{ o.name }}</option>
<option>Other</option>
</select>
<input type="number" ng-model="otherval" ng-show="v == 'other'"/>
</div>
or,
<div ng-init="arr = [{name:'A', val:1},{name:'B', val:2},{name:'C', val:2}]">
<select ng-model="v" ng-options="o.val as o.name for o in arr.concat([{name:'Other',val:'other'}])">
</select>
<input type="number" ng-model="otherval" ng-show="v == 'other'"/>
</div>