The following is my code:
<input required class="input form-control" type="text" ng-model="select.mySelect" list="bloodgroups" placeholder="Select Blood Group">
<datalist id="bloodgroups" >
<option ng-repeat="bloodgroup in bloodgroups"> {{bloodgroup.bloodgroups}}
</datalist>
JS
$scope.options = [{ name: "a", id: 1 }, { name: "b", id: 2 }];
$scope.selectedOption = $scope.options[1];
HTML
<select data-ng-options="o.name for o in options" data-ng-model="selectedOption"></select>
Additional example:
This is in the case of retrieving data (GET) from an external source (url). Something.thisismydata is from factory.
For ng-model="select.mySelect" something like this:
$scope.showDataOnSelect = function() {
var url = "http://example.com/api";
Something.thisismydata(function(data) {
$scope.thisismydata = data;
$scope.select.mySelect = $scope.thisismydata[0].id;
}, url);
}
$scope.showDataOnSelect();
Related
I am using jquery, bootstrap multi-select dropdown. I want to populate multi-select dropdown (talukas) on selectionChange event of other normal (single-select) dropdown (city). I am not able to figure out why the multi select dropdown populates on initial load of a controller and why not on selection change of other dropdown. Can you please help me. Thank you.
Scenario - 1 => This works fine
<div ng-controller="tempController" ng-init="initializeController()" ng-cloak>
<select id="multiSelect" name="multiSelect" multiselect=""
multiple="" ng-model="selectedTalukas" ng-options="option.talukaId as
option.label for option in talukas"></select>
</div>
// .js
$scope.selectedTalukas = [];
$scope.initializeController = function () {
$scope.talukas = [
{ talukaId: 1, label: 'Taluka1' },
{ talukaId: 2, label: 'Taluka2' },
{ talukaId: 3, label: 'Taluka3' }
]
}
Scenario - 2 => This DO NOT works fine - WHY
<select id="city" class="form-control select2" name="ddlCity" ng-model="c" ng-options="c as c.name for c in city | orderBy:'name'"
ng-change="selectedCityChange(c)" >
</select>
<select id="multiSelect" name="multiSelect" multiselect=""
multiple="" ng-model="selectedTalukas" ng-options="option.talukaId as
option.label for option in talukas"></select>
$scope.selectedCityChange = function (selectedValue) {
if (selectedValue !== undefined) {
$scope.selectedCity = selectedValue;
$scope.selectedCityId = selectedValue.cityId;
$scope.ajaxPost(selectedValue.cityId,
'/api/Taluka/getTalukasForSelectedCity',
$scope.selectedCityChangeComplete,
$scope.selectedCityChangeError);
}
};
$scope.selectedCityChangeComplete = function (response) {
$scope.talukas = response.data.talukaMasters;
}
I have two arrays:
availableTargets: [ {id: 1, name: "Target 1"}, {id: 2, name: "Target 2"}, {id: 3, name: Target 3" ];
selectedTargets: [];
I create a multiple selectlist:
<select multiple>
<option *ngFor="let target of availableTargets" [value]="target .id" (click)="AddTarget($event)">{{target.name}}</option>
</select>
When a user clicks an option, I want to add the 'Target' to the selectedTarget array and remove it from the availableTargets array.
public AddTarget(event) {
let id = event.target.id;
this.availableTargets = this.availableTargets .filter(function (el) { return el.id != id });
this.selectedTargets.push(event.target.id);
}
My multiple select list does not update after removing an element from the availableTarget array. How do I trigger this?
You can do that by simply using index
Template side :
<select multiple>
<option *ngFor="let target of availableTargets; let i = index;" [value]="target .id" (click)="AddTarget(i)">{{target.name}}</option>
</select>
Component Side :
public AddTarget(index) {
this.selectedTargets.push(this.availableTargets[index]);
this.availableTargets.splice(index, 1);
}
WORKING DEMO
<select id="e1" style="width:100%" ui-select2 tabindex="-1" ng-init="GetAllAgent()" ng-model="Agent" ng-options="ctr as ctr.AgentName for ctr in ListAgent track by ctr.AgentId" ng-change="GetSubAgentList(Agent.AgentId)">
<option value=""> </option></select>
when it is in edit mode,could not set the default value using the below code
angular.forEach($scope.ListAgent, function (value, index) {
if (value.AgentId == HR.AgentId) {
$scope.Agent = $scope.ListAgent[index];
}
})
$scope.ListAgent= [{ AgentId: "0", AgentName:"Ann" }, { AgentId: "1", AgentName:"Muh" }];
and
HR.AgentId=1
First off, ui-select2 does not support ng-options: https://github.com/angular-ui/ui-select2/issues/252
Further, ui-select2 does not work with ng-repeat: https://github.com/angular-ui/ui-select2/issues/162
The solution is to use input:
<input ui-select2="select2Options" ng-model="Agent"/>
where select2Options is:
$scope.select2Options = {
data:$scope.ListAgent
}
The list should have structure: [{id,text}] so $scope.ListAgent will be
$scope.ListAgent= [{ id:0, text:"Ann" }, { id:1, text:"Muh" }];
Demo Plunker
For place holder add data-placeholder="----"
I need to set the option value yo id for the rendered select tag, using the following example I can set the option value as 0, 1, ,2.
Any idea what am I doing wrong here?
http://jsfiddle.net/GFF6P/1/
function ctrl($scope) {
$scope.devices = [{
name: "pc1",
id: 10
}, {
name: "pc2",
id: 20
}, {
name: "pc3",
id: 30
}];
$scope.selectedDevice = $scope.devices[0];
}
<div ng-app ng-controller="ctrl">
<select data-ng-model="selectedDevice" name="devices" data-ng-required="true" data-ng-options="device.name for device in devices"></select>
</div>
View
<select data-ng-model="selectedDevice"
name="devices"
data-ng-required="true"
data-ng-options="device.id as device.name for device in devices">
</select>
Controller
$scope.selectedDevice = $scope.devices[0].id;
Updated Fiddle
I have an object
$scope.colleges = [{"CollegeCode":"40","CollegeName":"College1"},
{"CollegeCode":"35","CollegeName":"College2"},
{"CollegeCode":"32","CollegeName":"College3"},
{"CollegeCode":"15","CollegeName":"College4"}]
I'm populating a select element with it's contents
<select ng-model="collegeSelection" ng-options="c as c.CollegeName for c in colleges" name="selectCollege"></select>
It renders on the page like so
<select class="ng-pristine ng-valid" name="selectCollege" ng-options="c as c.CollegeName for c in colleges" ng-model="collegeSelection" style="" selected="selected">
<option value="?" selected="selected"></option>
<option value="0">College1</option>
<option value="1">College2</option>
<option value="2">College3</option>
<option value="3">College4</option>
etc....
I'm also binding this select to collegeSelection and when an item is selected the object look like this
$scope.collegeSelection = {"CollegeCode":"32","CollegeName":"College"}
When someone clicks edit on the page, the college I want selected by default comes from the userToUpdate object.
$scope.userToUpdate = {
Id: 1,
FirstName: 'John',
LastName: 'Doe',
CollegeCode: '35,
CollegeName: 'College2',
Active: true
};
When an edit button and the userToUpdate object is populated, I would like the college in the select element to be set to the college in the user object. How could one make this happen? FYI, the value in the rendered select does not match the CollegeCode. It seems angular uses the index from the colleges object. Thanks
Try this one
<select ng-model="collegeSelection" ng-options="c.CollegeCode as c.CollegeName for c in colleges" name="selectCollege"></select>
<span>{{collegeSelection}}</span>
<input type="button" ng-click="switch()" name="switch" value="switch" />
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function ($scope, $filter) {
$scope.colleges = [{ "CollegeCode": "40", "CollegeName": "College1" },
{ "CollegeCode": "35", "CollegeName": "College2" },
{ "CollegeCode": "32", "CollegeName": "College3" },
{ "CollegeCode": "15", "CollegeName": "College4" }
]
$scope.switch = function () {
$scope.collegeSelection = "32";
};
});