I want to get the ID of selected option in datalist, using select it is easy but I dont know how to get the ID of the option name.
I made one code snippet at JSBIN
var app = angular.module('app', []);
app.controller('getLocalityId', function($scope) {
$scope.localityList = [{
name: "Rome",
id: 1
}, {
name: "London",
id: 2
}, {
name: "Paris",
id: 3
}];
$scope.fetchId = function(id) {
console.log(id);
};
});
HTML goes like this
<!DOCTYPE html>
<html ng-app='app'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="col-lg-6" ng-controller="getLocalityId">
<label for="locality">Locality</label>
<input class="input form-control" placeholder="Search By Name" list="locality" ng-model="obj.id" ng-change="fetchId(obj.id)" />
<datalist id="locality" name="locality">
<select>
<option ng-repeat=" obj in localityList" value="{{ obj.name }}" selected-value="{{ obj.id }}">{{ obj.id }}</option>
</select>
</datalist>
</div>
</body>
</html>
Use ng-options in your case:
<select ng-model="currentID" ng-options="obj.id as obj.name for obj in localityList"></select>
Demo
Related
I have the following select but I dont have access to the controller or to unique. Is there any way to dedupe the items ?
<select ng-model="searchTerm " size="20" >
<option value=null>Default</option>
<option ng-repeat="g in model.availableItems | orderby :'config.group'" value="{{g.config.group}}">{{g.config.group}}</option>
</select>
Declare "availableItems" as variable in controller and use like this:
g in availableItems
and not
g in model.availableItems
Full Code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.searchTerm = "";
$scope.availableItems = [
{
name: '1',
config: {
group: '2'
}
},
{
name: '4',
config: {
group: '3'
}
},
{
name: '5',
config: {
group: '1'
}
}
];
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="searchTerm" size="20" >
<option value=null>Default</option>
<option ng-repeat="g in availableItems | orderBy:'config.group'" value="{{g.config.group}}">{{g.config.group}}</option>
</select>
<p>Selected item is: {{searchTerm}}</p>
</div>
</body>
</html>
How can I highlight the previously selected value in a dropdown of type multiple in AngularJS?
I want to highlight val: 1, 2 in my dropdown. Scope variable Fruits contains a JSON array of Id, Name and val contains the set of Ids that need to be highlighted.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<label>Multiple</label>
<select ng-model="val" ng-options="x as x.Id for x in Fruits" multiple>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Fruits = [
{
Id: 1,
Name: 'Apple'
},
{
Id: 2,
Name: 'Mango'
},
{
Id: 3,
Name: 'Orange'
}
];
$scope.val = [1,2];
});
</script>
</body>
</html>
Try this one. use track by in the select statement, also if you need to multi select the options, you have to set the array of those objects in the ng-model value instead of the individual ids
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<label>Multiple</label>
<select ng-model="val" ng-options="x as x.Id for x in Fruits track by x.Id" multiple>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.Fruits = [{Id: 1,Name: 'Apple'},
{Id: 2,Name: 'Mango'},
{Id: 3,Name: 'Orange'}];
$scope.val = [{Id: 1,Name: 'Apple'},
{Id: 2,Name: 'Mango'}];
});
</script>
</body>
</html>
with:
<select ng-model="val" ng-options="x.Id as x.Name for x in Fruits" multiple>
</select>
It should work
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<label>With Name: </label>
<select ng-model="val" ng-options="x.Id as x.Name for x in Fruits" multiple>
</select>
<label>With ID: </label>
<select ng-model="val" ng-options="x.Id as x.Id for x in Fruits" multiple>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Fruits = [
{
Id: 1,
Name: 'Apple'
},
{
Id: 2,
Name: 'Mango'
},
{
Id: 3,
Name: 'Orange'
}
];
$scope.val = [1,2];
});
</script>
</body>
</html>
I have 1 drop-down which contains values("Due Date","Tenure","NA". these values come from database) respectively.I have 2 text boxes textbox1 and textbox 2. I want textbox1(i.e DueDate) enabled if Dropdown value selected as "Due Date" & textbox2(i.e.TenureDate) enabled if Dropdown value selected as "Tenure".
<div>
#Html.DropdownListFor(m=>m.Tenure,new{ng_options="c
as c.name for c in duedateddl"})
</div>
<div>
#Html.TextBoxFor(m=>m.DueDate)
#Html.TextBoxFor(m=>m.TenureDate)
</div>
(function(angular) {
'use strict';
angular.module('ngrepeatSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
model: null,
availableOptions: [
{name: 'DueDate'},
{name: 'TenureDate'},
{name: 'NA'}
]
};
}]);
})(window.angular);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="ngrepeatSelect">
<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.name}}">{{option.name}}</option>
</select>
<input type="textBox1" ng-disabled="data.model != 'DueDate'"/>
<input type="textBox2" ng-disabled="data.model != 'TenureDate'"/>
</form>
<hr>
<tt>model = {{data.model}}</tt><br/>
</div>
</body>
</html>
There is object:
$scope.type = {
1 : 'Inside',
2 : 'Outside'
};
HTML ng-options:
<select ng-options="key as value for (key , value) in type" ng-model="selectedType"></select>
I tried:
$scope.selectedType = (UserGlobalService.type == 1) ? $scope.records[1] : $scope.records[2];
Hi this would solve your problem
Index.html
<html lang="en" ng-app='myApp'>
<head>
<title>My AngularJS App</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<!-- Modules -->
<script src="app.js"></script>
</head>
<body ng-controller ='MainController'>
<div>
<select class="form-control" >
<!-- <option ng-value= "{{item}}" >{{item}}</option> -->
<option ng-repeat="option in type" value="{{option.value}}" ng-selected="type.value == option.value">{{option.value}}
</option>
</select>
</div>
</body>
And your JS should be like this.
var myApp = angular.module('myApp', []);
myApp.controller('MainController', ['$scope',
function($scope) {
$scope.type = [{
"id" : 1,
"value" : "Inside"
},{
"id" : 2,
"value" : "Outside"
}];
}
])
I Edited my answer a bit
This is how I would do it:
$scope.types = [
{ id: 1, name: 'Inside' },
{ id: 2, name: 'Outside' }];
$scope.selectedType = $scope.type[0];
HTML:
<select ng-options="t.name for t in types" ng-model="selectedType"></select>
Here's Plunker: http://plnkr.co/edit/uyP5EeOUTQb7n1ymsFuB
I am trying do a dynamic bind a < tabset> based on the selected value of dropdownlist.
Here is my app.js
var app = angular.module('app',['ui.bootstrap']);
app.controller('tabCtrl',function($scope,$http){
$scope.countryList=[{name:'Canada',id:'ca'},{name:'United States',id:'us'}];
$scope.selectedCountry =$scope.countryList[1].id;
$scope.init = function() {
$scope.countries =[{countryName:"ca"},{countryName:"us"}];
$scope.countries[0].tabs=[{title:"CA Title 1"},{title:"CA Title 2"}];
$scope.countries[1].tabs=[{title:"US Title 1"},{title:"US Title 2"}];
};
$scope.switch = function(){
console.log($scope.selectedCountry);
}
});
And this is my jsp page.
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html ng-app="app">
<head>
<script src="<c:url value="/resources/javascript/angular.min.js" />"></script>
<script src="<c:url value="/resources/javascript/ui-bootstrap-tpls-0.12.0.min.js" />"></script>
<script src="<c:url value="/resources/javascript/app.js"/>"></script>
<link href="<c:url value="/resources/style/bootstrap.min.css" />" rel="stylesheet">
<title></title>
</head>
<body>
<br />
<div ng-controller="tabCtrl" >
<!--<select ng-model="selectedCountry" ng-options="c.id as c.name for c in countryList" ng-change="switch()" />-->
<form name="frm" ng-submit="submit()" data-ng-init="init()">
<div ng-repeat="c in countries|filter:{countryName:selectedCountry}">
<tabset>
<tab ng-repeat="t in c.tabs" heading="{{t.title}}">
</tab>
</tabset>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
</body>
</html>
I have two bindings, one is for dropdownlist, one is for tabset.
My problem is if I add < select >, then my tabset does not show up..
Please help.
Thank you
Please make sure that you close select tag
<select ng-model="selectedCountry" ng-options="c.id as c.name for c in countryList" ng-change="switch()"></select>
Working demo below
var app = angular.module('app', ['ui.bootstrap']);
app.controller('tabCtrl', function($scope, $http) {
$scope.countryList = [{
name: 'Canada',
id: 'ca'
}, {
name: 'United States',
id: 'us'
}];
$scope.countries = [{
countryName: "ca"
}, {
countryName: "us"
}];
$scope.selectedCountry = $scope.countryList[1].id;
$scope.init = function() {
$scope.countries[0].tabs = [{
title: "CA Title 1"
}, {
title: "CA Title 2"
}];
$scope.countries[1].tabs = [{
title: "US Title 1"
}, {
title: "US Title 2"
}];
};
$scope.switch = function() {
console.log($scope.selectedCountry);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<div ng-app="app">
<div ng-controller="tabCtrl" data-ng-init="init()">
<select ng-model="selectedCountry" ng-options="c.id as c.name for c in countryList" ng-change="switch()"></select>
<hr/>
<form name="frm" ng-submit="submit()">
<div ng-repeat="c in countries|filter:{countryName:selectedCountry}">
<tabset>
<tab ng-repeat="t in c.tabs" heading="{{t.title}}">
</tab>
</tabset>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
This is because ng-options tracks by object reference by default. If you want to track by id then you should add the following track by clause:
ng-options="c.id as c.name for c in countryList track by c.id"
Then, when you initialize the selectedCountry you need an object with an id property:
$scope.selectedCountry = { id: $scope.countryList[1].id }
Otherwise, your filter ({countryName:selectedCountry}) is not matching anything in the countries array. This causes <tabset> not to render.