<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="----"
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;
}
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();
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 am using this code in my controller:
$scope.$watch('option.selectedPageType', function () {
if ($scope.isNumber($scope.option.selectedPageType)) {
localStorageService.add('selectedPageType', $scope.option.selectedPageType);
}
})
getPageTypes: function ($scope) {
$scope.option.pageTypes = [
{ id: 0, type: 'Edit Basic' },
{ id: 1, type: 'Edit Standard' },
{ id: 2, type: 'Report' }
];
$scope.option.selectedPageType = parseInt(localStorageService.get('selectedPageType'));
},
and in my HTML:
<select data-ng-model="option.selectedPageType"
data-ng-options="item.id as item.type for item in option.pageTypes">
<option style="display: none" value="">Select Page Type</option>
</select>
Instead of using the "Select Page Type" option. How can I make it so my code defaults to the value in local storage or if there is nothing there then to one of the values I have in my option.pageTypes list ?
Have your localStorageService return null if there is nothing stored. If it does exist, have the service return the integer
Then in controller:
/* assume want first item in array */
$scope.option.selectedPageType = localStorageService.get('selectedPageType') || $scope.option.pageTypes[0].id
Try using ng-init on the <select ...>:
<select data-ng-model="option.selectedPageType"
data-ng-options="item.id as item.type for item in option.pageTypes"
data-ng-init="option.selectedPageType=DEFAULT_VALUE">
See this fiddle: http://jsfiddle.net/CaeUs/5/
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";
};
});