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>
Related
I'm having an issue with a selection box. When I select the option I can't get the value that I just selected. I read a lot of answers, but none of them seems to work for me. Here is my code.
HTML:
<select class="wide" style="width: 96%;height: 100px;"
ng-options="element as element.type for element in elements"
ng-model="selectedType" >
<option value="">Choose an option</option>
</select>
<p> {{selectedType}} </p>
Controller:
elements:[
{
desc: "example1",
article: "OF",
type: "example1Type"
},
{
desc: "example2",
article: "P-8955625",
type: "example2Type"
}
];
$scope.selectedType = "";
The <p> {{selectedType}} </p> shows nothing.
Thanks in advance
The as its only for the display value, but for the ng-model present the entire selected item.
so you need wirte:
<p> {{selectedType.type}} </p>
https://embed.plnkr.co/bicmN1loBGdcxsWOLv6x/
elements needs to be set in the controller scope. e.g.
app.controller('ExCtrl', function($scope) {
$scope.elements = [{
desc: "example1",
article: "OF",
type: "example1Type"
}, {
desc: "example2",
article: "P-8955625",
type: "example2Type"
}];
});
Also, attach the controller to your view. e.g.
<body ng-controller="ExCtrl">
<select class="wide"
ng-options="element.type for element in elements"
ng-model="selectedType" >
<option value="">Choose an option</option>
</select>
<p>{{selectedType}} </p>
</body>
Et voila!
See the repl
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.
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/
I want to create a select tag with 'selected' value. I am doing this with ng-repeat since I cannot add a custom directive to ng-options. This is the code.
<select class="ng-valid ng-dirty" ng-model="selectedCity">
<option ng-repeat="city in allCities" value="{{city.id}}" after-render-cities>{{city.name}}</option>
</select>
This adds an extra option with value =?string:1? which I searched a lot. Since ng-options solves this issue, I however have to add the directive after-render-cities for each option. How can I solve this issue?
Use this
<select class="ng-valid ng-dirty" ng-model="selectedCity" ng-options="city.id as city.name for city in allCities">
</select>
for selection of first value, write following code in your controller
$scope.selectedCity = $scope.allCities[0].id;
use ng-init for solve value =?string:1?
<select class="ng-valid ng-dirty" ng-model="selectedCity" ng-init='selectedCity=allCities[0].id'>
<option ng-repeat="city in allCities" value="{{city.id}}" after-render-cities>{{city.name}}</option>
</select>
another choice you can use ng-selected fiddle
<option ng-repeat="(key,city) in allCities" ng-selected='key==0' value="{{city.id}}" after-render-cities>{{city.name}}</option>
</select>
You can create a custom directive, using select and ng-options.
Snippet:
JS:
template: "<select ng-options='item.id as item.name for item in list' ng-model='data'></select>",
HTML:
<div select-option list="list" ng-model='data'></div>
Refer to the demo here.
Try this code
Java Script
var app = angular.module('myApp', []);
app.controller('SampleController', function ($scope) {
$scope.Cities = [
{ Id: 1, Name: "New York" },
{ Id: 2, Name: "Colombo" },
{ Id: 3, Name: "Real Madrid" },
{ Id: 4, Name: "Bostan" },
{ Id: 5, Name: "Birmingham" }
];
$scope.City= 3;
});
HTML
<select ng-options="C.Id as C.Name for C in Cities" ng-model="City"></select>
Read This Blog, it has everything explained.
I'm trying to get a text value of an option list using AngularJS
Here is my code snippet
<div class="container-fluid">
Sort by:
<select ng-model="productList">
<option value="prod_1">Product 1</option>
<option value="prod_2">Product 2</option>
</select>
</div>
<p>Ordered by: {{productList}}</p>
{{productList}} returns the value of the option, eg: prod_1. I'm trying to get the text value 'Product 1'. Is there a way to do this?
The best way is to use the ng-options directive on the select element.
Controller
function Ctrl($scope) {
// sort options
$scope.products = [{
value: 'prod_1',
label: 'Product 1'
}, {
value: 'prod_2',
label: 'Product 2'
}];
}
HTML
<select ng-model="selected_product"
ng-options="product as product.label for product in products">
</select>
This will bind the selected product object to the ng-model property - selected_product. After that you can use this:
<p>Ordered by: {{selected_product.label}}</p>
jsFiddle: http://jsfiddle.net/bmleite/2qfSB/
Instead of ng-options="product as product.label for product in products"> in the select element, you can even use this:
<option ng-repeat="product in products" value="{{product.label}}">{{product.label}}
which works just fine as well.
Also you can do like this:
<select class="form-control postType" ng-model="selectedProd">
<option ng-repeat="product in productList" value="{{product}}">{{product.name}}</option>
</select>
where "selectedProd" will be selected product.
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect"> Repeat select: </label>
<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
<option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
</form>
<hr>
<tt>model = {{data.model}}</tt><br/>
</div>
AngularJS:
angular.module('ngrepeatSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
model: null,
availableOptions: [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
]
};
}]);
taken from AngularJS docs