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>
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>
The title may be a bit confusing. Please take a look at the code below,
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<input type="text" ng-model="test"><br/>
<div ng-repeat="x in names | filter:test"> {{ x }}</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
</body>
</html>
with these codes i can search for a name from scope.names. But the problem is, i don't want to hide other results while searching for a particular name. Which means, when i search "Gustav", it should be on top of the list without hiding other names. It would be more great if names were sorted by the matching of supplied keyword. Please help in this.
OrderBy is one of the options for the desired effect:
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<input type="text" ng-model="test"><br/>
<div ng-repeat="x in names | orderBy:customOrdering"> {{ x }}</div>
{{ log }}
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.test = "";
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
$scope.customOrdering = function(a) {
return a.indexOf($scope.test) == -1;
//return a.toUpperCase().indexOf($scope.test.toUpperCase()) == -1;
// use that for case insensitive search
}
});
</script>
</body>
</html>
when we selecting the list from dropdown i want to show the different images.If we have option like this Option1, Option2 when selecting the option1 i want show option1.img and selecting the option2 i want show option2.image.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<script>
angular
.module('myApp', [])
// controller here
.controller('myCtrl', function($scope) {
$scope.selectables = [
{ label: 'A', value: 'C:/Users/sp/OneDrive/Pictures/logo.jpg'},
{ label:'B', value:'C:/Users/sp/OneDrive/Pictures/spt logo.jpg'}
];
// this is the model that's used for the data binding in the select directive
// the default selected item
})
</script>
<div ng-controller="myCtrl">
<select
ng-model="selectedItem"
ng-options="S.value as S.label for S in selectables" ng-change="fun()">
</select>
{{selectedItem}}
<img src='{{selectedItem}}'/>
</div>
</body>
</html>
I am write this code but i am not able to showing the option first. Can you anyone please help me how to do that.
Everything is fine in your code it's just you didn't define your module name
ng-app='myApp' the moment I have added it, it worked !
below is the code snippet.
angular
.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.selectables = [{
label: 'A',
value: 'data:image/jpeg;base64,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'
}, {
label: 'B',
value: 'data:image/png;base64,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'
}];
})
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app='myApp' ng-controller="myCtrl">
<select ng-model="selectedItem" ng-options="S.value as S.label for S in selectables" ng-change="fun()">
</select>
<img ng-src='{{selectedItem}}'/>
</div>
</body>
</html>
<select
ng-model="selectedItem"
ng-options="S.value as S.label for S in selectables" ng-change="fun()">
</select>
{{selectedItem}}
<img src='{{selectedItem}}'/>
DEMO
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<script>
angular
.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.selectables = [{
label: '',
value: 'C:/Users/sp/Pictures/111.png'
}, {
label: 'CR00-1511-003352',
value: 'C:/Users/sp/Pictures/222.png'
},{
label: 'ED05-1511-003353',
value: 'C:/Users/sp/Pictures/333.png'
},{
label: 'ED05-1511-003356',
value: 'C:/Users/sp/Pictures/444.png'
},{
label: 'ED05-1511-003360',
value: 'C:/Users/sp/Pictures/666.png'
}, {
label: 'HL01-1511-003364',
value: 'C:/Users/sp/Pictures/777.png'
}];
})
</script>
<div ng-app='myApp' ng-controller="myCtrl">
<select ng-model="selectedItem" ng-options="S.value as S.label for S in selectables" ng-change="fun()">
</select>
<br><br><br>
<img src='{{selectedItem}}'/>
</div>
</body>
</html>
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
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