Currently I am using select for dropdown. I would like to change this as multiselect dropdown. But when I declare the multiselect dropdown I am getting error saying "unknown attribute Options"
The current code which is just a dropdown without multiselect.
<select class="form-control"> <option ng-repeat="item in CETIGroupList" value="{{item}}">{{item}}</option>
</select>
What I wrote for multiselect is
<div ng-dropdown-multiselect="" options="CETIGroupList" ></div>
Please help me creating a multiselect dropdown.
Thanks
include loadsh.js , bootstrap css , AngularJS Dropdown Multiselect in your app. Inject angularjs-dropdown-multiselect in your app
angular.module('sampleApp', ['angularjs-dropdown-multiselect'])
in your HTML page
<div ng-dropdown-multiselect="" options="example13data" selected-model="example13model" ></div>
in your Controller
$scope.example13model = [];
$scope.example13data = [{
id: 1,
label: "David"
}, {
id: 2,
label: "Jhon"
}, {
id: 3,
label: "Lisa"
}, {
id: 4,
label: "Nicole"
}, {
id: 5,
label: "Danny"
}];
Check out this fiddle : https://jsfiddle.net/ebinmanuval/8Ltae8pb/
Related
I am new to angular JS. I have a dropdown box where static options with values are present.
Based on condition I have to select the default value which matches the value from Database. How can it be achieved?
model="TemplateObj.IsActive" has the int value 0,1 or 2 from DataBase.
<label class="">STATUS</label>
<select class="form-control input-sm" style="border: none" required ng-model="TemplateObj.IsActive" >
<option value="2">In Development</option>
<option value="1">Active</option>
<option value="0">InActive</option>
</select>
Use ng-options directive with array of statuses. The syntax may look a bit complicated for beginner, but you'll learn it someday: value as title for element in array
JS:
$scope.statuses = [{
title: 'In Development',
value: 2
}, {
title: 'Active',
value: 1
}, {
title: 'Inactive',
value: 0
}];
HTML:
<select ng-model="TemplateObj.IsActive" ng-options="status.value as status.title for status in statuses"></select>
Here is jsfiddle with working example.
An option would be to make use of the ng-options directive.
The documentation is here and there are quite a few examples you can guide from.
Try ngOptions instead of normal HTML select.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.status = [{
title: 'In Development',
value: 2
}, {
title: 'Active',
value: 1
}, {
title: 'Inactive',
value: 0
}];
$scope.TemplateObj = {
"IsActive": 1
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-model="TemplateObj.IsActive" ng-options="option.value as option.title for option in status"></select>
</div>
I have this ng-select element:
<body ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-model="selectedItem">
<option value="-1" selected>- manual -</option>
<option ng-repeat="(key, value) in items">{{value.Name}}</option>
</select>
</body>
Here is controller:
$scope.selectedItem = null;
$scope.items = [{Name: 'one', Id: 30 },
{Name: 'two', Id: 27 },
{Name: 'threex', Id: 50 }];
Here is working PLUNKER.
Inside of ng-select I have two options the static(-manual-) and the options generated by ng-repeat element.
My problem is: when user make selection of the option generated by ng-repeat the
$scop.selectedItem get the Name of the selected item, while I need to set the Id of the selected element.
For example:
If in the plunker above user select from ng-select element two the $scop.selectedItem will get two the name of the item while, I need $scop.selectedItem to get 27 the Id of the selected item.
Any idea how can I make $scop.selectedItem to get the Id of the selected item?
Have a look at the ng-options directive. You can pass a list comprehension like expression to extract what you need.
For example:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
https://docs.angularjs.org/api/ng/directive/ngOptions
As Delapouite said, you should use ng-options. I've updated your plunkr to implement this.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [{name: '- manual -', id: -1 },
{name: 'one', id: 30 },
{name: 'two', id: 27 },
{name: 'threex', id: 50 }];
$scope.selectedItem = $scope.items[0];
});
<select
ng-model="selectedItem"
ng-options="item.name for item in items track by item.id"
></select>
Try this
<option ng-repeat="(key, value) in items" key="{{value.Id}}" value="{{value.Id}}">{{value.Name}}</option>
All that I have done is I have set key and value = {{value.Id}} and the selectedItem will pick it up.
Here's the UPDATED PLNKR
I would suggest to use ng-options and to push your default value (manual) in $scope.items.
I used ng-init to set the default value of your select to - manual -.
<body ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-options="i.Id as i.Name for i in items" ng-init="selectedItem = items[0].Id"></select>
selected item: {{selectedItem}}
</body>
$scope.items = [{Name:'- manual -', Id: -1},
{Name: 'one', Id: 30 },
{Name: 'two', Id: 27 },
{Name: 'threex', Id: 50 }];
Here is a working Plnkr.
I am creating typeahead for dropdown. I used angularjs-typeahead-dropdown.min . But its not working. Below is my code
<head>
<script src="src/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="Typeahead.js"></script>
<script src="src/angularjs-typeahead-dropdown.min.js"></script>
<title></title>
</head>
<div class="container">
<typeahead-dropdown id="ex1" ng-model="ex1model" options="ex1data" config="ex1config"></typeahead-dropdown>
</div>
in js file
$scope.ex1model = [];
$scope.ex1data = [{ id: 1, label: "Tony" },
{ id: 2, label: "Larita" },
{ id: 3, label: "Brian" },
{ id: 4, label: "Andrew" },
{ id: 5, label: "Bruno" },
{ id: 6, label: "Adrian" },
{ id: 7, label: "Stuart" },
{ id: 8, label: "Stephen" },
{ id: 9, label: "Peter" },
{ id: 10, label: "Alexander" }];
$scope.ex1config = { modelLabel: "id", optionLabel: "label" };
This is not working. Nothing comes in html page. Please tell me how to implement typeahead for dropdown. Is there any other way. I should not use jquery
You can use UI Bootstrap's Dropdown on an input box as follows
<div uib-dropdown>
<input type="text" ng-model="searchKey" uib-dropdown-toggle>
<ul uib-dropdown-menu>
<li ng-repeat="data in ex1data | filter:searchKey">
{{data.label}}
</li>
</ul>
</div>
Check the documentation for UI Bootstrap dropdown here
i would recommend to use select2
this link will make u learn how to use it from scratch
select2 for beginner
this link will make you realise why to use it
just have a look
Examples for select2
I am struggling with the following piece of code.
<body ng-controller="MainCtrl">
<h1>Select something below</h1>
<select id="s1" ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
<h3>The selected item:</h3>
<pre>{{selectedItem | json}}</pre>
<h3>The inner html of the select:</h3>
<pre id="options" class="prettify html"></pre>
</body>
and in js
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }];
$scope.selectedItem = { id: 3, name: 'blah' };
});
I have a selected item by default. But it doesn't show up in the selection while the page loads.
I have provided my code in the following link
http://plnkr.co/edit/FlESsL?p=preview
In the given example the dropdown should by default select the item blah.
TIA
Mobin
The first thing you need to do is update your angularjs version, then you can simply follow the angular select examples.
In the provided link they use track by to display the correct object, I took the liberty of editing their example plunker and added your code Here it is!
as you can see, the only thing I added to your code was track by item.id
Try this:
<select id="s1" ng-model="selectedItem" ng-options="item.id as item.name for item in items"></select>
and:
$scope.selectedItem = 3;
Before putting question did you go through - https://docs.angularjs.org/api/ng/directive/ngOptions
Just make below change in your controller -
$scope.selectedItem = $scope.items[0];
I have a ui in which based on the selection of one drop down another dropdown should be disabled. Both these dropdowns are generated using ng-repeat . Below is the code sample
<tr data-ng-repeat="abc in xyz.divisionViewList" >
<select
data-ng-model="abc.selectedAppRole"
ng-init="abc.selectedAppRole =abc.selectedAdRole"
id="{{abc.applicationId}}_{{abc.divisionId}}" name="{{abc.selectedAppRole}}">
<option value="null">Select/Deselect a role</option>
<option data-ng-repeat="roleDetail in abc.roleDetails" data-ng-selected="{{abc.adRole == abc.selectedAdRole}}"
value="{{abc.adRole}}"> {{abc.roleDesc}} </option>
</select>
</tr>
As this is a dynamic generated drop downs based on ng- repeat, i want to put validations based on selection on one drop down. Please let me know how can i put this validation so that i can disable and enable any dropdown based on selection of the other.
I am really stuck on this.
Use ng-disabled and use model value of one of the dropdowns to disable/enable the other.
Example app:
angular.module('app', []).controller('MyController', function($scope){
$scope.dropdownSelections = {};
$scope.dropdownA = [
{value: 1, label: 'Item A1'},
{value: 2, label: 'Item A2'},
{value: 3, label: 'Item A3'},
{value: 4, label: 'Item A4'}
];
$scope.dropdownB = [
{value: 1, label: 'Item B1'},
{value: 2, label: 'Item B2'},
{value: 3, label: 'Item B3'},
{value: 4, label: 'Item B4'}
];
$scope.dropdownC = [
{value: 1, label: 'Item C1'},
{value: 2, label: 'Item C2'},
{value: 3, label: 'Item C3'},
{value: 4, label: 'Item C4'}
];
});
Example template code:
<div ng-controller="MyController">
<div>Dropdown selections: {{dropdownSelections}}</div>
<div>
<legend>Dropdown A</legend>
<select name="A" id="A" ng-model="dropdownSelections.dropdowA" ng-options="item.value as item.label for item in dropdownA"></select>
</div>
<div>
<legend>Dropdown B</legend>
<select name="B" id="B" ng-model="dropdownSelections.dropdowB" ng-options="item.value as item.label for item in dropdownB" ng-disabled="dropdownSelections.dropdowA !== 2"></select>
</div>
<div>
<legend>Dropdown C</legend>
<select name="C" id="C" ng-model="dropdownSelections.dropdowC" ng-options="item.value as item.label for item in dropdownC" ng-disabled="dropdownSelections.dropdowB !== 3"></select>
</div>
</div>
DropdownB will be enabled when DropdownA has option 2 selected. DropdownC will be enabled when DropdownB has option 3 selected. Of course this is only basic example, the code is not perfect, but demonstrates the idea.
I've created working example in this JSFiddle.
More information about ng-disabled can be found in this doc.