I have created an select element as
<label class="item item-select no-border-bottom padding full-width custom-back">
<div class="input-label">Select Time Slot</div>
<select ng-model="addAppointment.timeSlot" name="timeSlot" class="custom-back" ng-disabled="!addAppointment.date" ng-options="timeSlot as timeSlot for timeSlot in availableTimeSlots" required>
</select>
</label>
I would like a option having message No Data in select when ng-options array is empty.
You could add an <option> with ng-if to your select. Here is a contrived example of how this would work.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.options = [];
$scope.selectedOption = undefined;
$scope.addOptions = function() {
var start = $scope.options.length;
for(var i = 1; i <= 5; i++) {
$scope.options.push('Option #' + (start + i));
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-model="selectedOption" ng-options="opt as opt for opt in options">
<option value="" ng-if="options.length === 0">No Data</option>
</select>
<button type="button" ng-click="addOptions()">Add Options</button>
</div>
I am new to angular and i am trying to build basic search + filter functionality
I am able to get search working but i am having difficulty with filter on unique skills (1,2,3 in this example)
I tried using "ng-click" and calling custom function but didn't get any solution
here is my code example :
<html lang="en">
<meta charset="UTF-8">
<title> Exercise</title>
<!--Angular JS-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("app", []);
app.controller('person', ['$scope', function($scope ){
$scope.players = [{"name" : 'commonABC', 'skill' : 1},{"name" : 'commonXYZ', 'skill' : 3},{"name": 'SAMEqwe', 'skill': 1},{"name": 'SAMEjkl', 'skill': 2}]
$scope.search = function(row) {
return (angular.lowercase(row.name).indexOf(angular.lowercase($scope.player_filter) || '') !== -1);
};
}]);
</script>
</head>
<body>
<div ng-app="app">
<div ng-controller="person">
<input type="text" ng-model="player_filter" placeholder="search name">
<select>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<br><br>
<div ng-repeat="player in players | filter: search">
<strong>name is :{{player.name}}</strong
<br>
<strong>and skill is :{{player.skill}}</strong>
<hr>
</div>
</div>
</div>
</body>
</html>
1) Your variable "search" is always empty because you forgot to set it as ng-model to your select list
Replace your select tag with
<select ng-model="search">
2) Set a custom number filter as below
myApp.filter('numFilter', function() {
return function(input, number) {
if(!number) return input;
var tmp = [];
for (var i = 0; i < input.length; i++) {
if (input[i].skill == number) tmp.push(input[i]);
}
return tmp;
}
});
And change your ng-repeat to
<div ng-repeat="player in players | numFilter:search | filter:player_filter">
Working fiddle
I have a select tag which i have loaded the data through angular ng-repeat.
<select ng-model="user.accessRole">
<option ng-selected="{{item.name == user.accessRole.name}}"
ng-repeat="item in accessRoles" value="{{item}}">
{{item.name}}
</option>
</select>
Once I submit this the value I got for accessRole model is as below.
accessRole:"{"id":1,"name":"admin","accessRights":"administrative access"}"
I want this value to be passed without double quotes. That means,
accessRole:{"id":1,"name":"admin","accessRights":"administrative access"}
I tried out this by removing double quotes in value property.(value={{item}})
But it didn't give me the solution.
How can i do this?
It should be like to this.
var app = angular.module('anApp', []);
app.controller('ctrl', function($scope) {
$scope.user = {};
$scope.accessRoles= [{"id":1,"name":"admin","accessRights":"administrative access"}];
$scope.display = function(){
console.log($scope.user);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<div ng-app="anApp" ng-controller="ctrl">
<div class="form-group">
<select ng-options="role as role.name for role in accessRoles" ng-model="user.accessRole" ng-change="display()">
</select>
</div>
</div>
use JSON.parse() to convert string to json object
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.user = {};
$scope.accessRoles= [{"id":1,"name":"admin","accessRights":"administrative access"}]
$scope.submit = function(){
console.log($scope.user)
$scope.user.accessRole = JSON.parse( $scope.user.accessRole)
console.log($scope.user)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-model="user.accessRole">
<option ng-repeat="item in accessRoles" value="{{item}}">
{{item.name}}
</option>
</select>
<button ng-click="submit()">click</button>
</div>
I have in my .html page a dropdown list,
Dropdown:
<select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
<option value="">Select Account</option>
</select>
I want to execute an action when the user select a value. So In my controller I did:
Controller:
$scope.$watch('blisterPackTemplateSelected', function() {
alert('changed');
console.log($scope.blisterPackTemplateSelected);
});
But the changing the value in the dropdownlist doesn't trigger the code : $scope.$watch('blisterPackTemplateSelected', function()
As a result I tried another method with a : ng_change = 'changedValue()' on the select tag
and
Function:
$scope.changedValue = function() {
console.log($scope.blisterPackTemplateSelected);
}
But the blisterPackTemplateSelected is stored into a child scope. I read that the parent can't get access to the child scope.
What is the correct/best way to execute something when a selected value in a dropdown list changes? If it's method 1, what am I doing wrong with my code?
as Artyom said you need to use ngChange and pass ngModel object as argument to your ngChange function
Example:
<div ng-app="App" >
<div ng-controller="ctrl">
<select ng-model="blisterPackTemplateSelected" ng-change="changedValue(blisterPackTemplateSelected)"
data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
<option value="">Select Account</option>
</select>
{{itemList}}
</div>
</div>
js:
function ctrl($scope) {
$scope.itemList = [];
$scope.blisterPackTemplates = [{id:1,name:"a"},{id:2,name:"b"},{id:3,name:"c"}];
$scope.changedValue = function(item) {
$scope.itemList.push(item.name);
}
}
Live example: http://jsfiddle.net/choroshin/9w5XT/4/
I may be late for this but I had somewhat the same problem.
I needed to pass both the id and the name into my model but all the orthodox solutions had me make code on the controller to handle the change.
I macgyvered my way out of it using a filter.
<select
ng-model="selected_id"
ng-options="o.id as o.name for o in options"
ng-change="selected_name=(options|filter:{id:selected_id})[0].name">
</select>
<script>
angular.module("app",[])
.controller("ctrl",['$scope',function($scope){
$scope.options = [
{id:1, name:'Starbuck'},
{id:2, name:'Appolo'},
{id:3, name:'Saul Tigh'},
{id:4, name:'Adama'}
]
}])
</script>
The "trick" is here:
ng-change="selected_name=(options|filter:{id:selected_id})[0].name"
I'm using the built-in filter to retrieve the correct name for the id
Here's a plunkr with a working demo.
Please, use for it ngChange directive.
For example:
<select ng-model="blisterPackTemplateSelected"
ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"
ng-change="changeValue(blisterPackTemplateSelected)"/>
And pass your new model value in controller as a parameter:
ng-change="changeValue(blisterPackTemplateSelected)"
Best practise is to create an object (always use a . in ng-model)
In your controller:
var myObj: {
ngModelValue: null
};
and in your template:
<select
ng-model="myObj.ngModelValue"
ng-options="o.id as o.name for o in options">
</select>
Now you can just watch
myObj.ngModelValue
or you can use the ng-change directive like so:
<select
ng-model="myObj.ngModelValue"
ng-options="o.id as o.name for o in options"
ng-change="myChangeCallback()">
</select>
The egghead.io video "The Dot" has a really good overview, as does this very popular stack overflow question: What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
You can pass the ng-model value through the ng-change function as a parameter:
<select
ng-model="blisterPackTemplateSelected"
data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"
ng-change="changedValue(blisterPackTemplateSelected)">
<option value="">Select Account</option>
</select>
It's a bit difficult to know your scenario without seeing it, but this should work.
You can do something like this
<html ng-app="App" >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
angular.module("App",[])
.controller("ctrl",['$scope',function($scope){
$scope.changedValue = function(item){
alert(item);
}
}]);
</script>
<div >
<div ng-controller="ctrl">
<select ng-model="blisterPackTemplateSelected" ng-change="changedValue(blisterPackTemplateSelected)" >
<option value="">Select Account</option>
<option value="Add">Add</option>
</select>
</div>
</div>
</html>
instead of add option you should use data-ng-options.I have used Add option for testing purpose
I am late here but I resolved same kind of problem in this way that is simple and easy.
<select ng-model="blisterPackTemplateSelected" ng-change="selectedBlisterPack(blisterPackTemplateSelected)">
<option value="">Select Account</option>
<option ng-repeat="blisterPacks in blisterPackTemplates" value="{{blisterPacks.id}}">{{blisterPacks.name}}</option>
and the function for ng-change is as follows;
$scope.selectedBlisterPack= function (value) {
console.log($scope.blisterPackTemplateSelected);
};
You will get selected option's value and text from list/array by using filter.
editobj.FlagName=(EmployeeStatus|filter:{Value:editobj.Flag})[0].KeyName
<select name="statusSelect"
id="statusSelect"
class="form-control"
ng-model="editobj.Flag"
ng-options="option.Value as option.KeyName for option in EmployeeStatus"
ng-change="editobj.FlagName=(EmployeeStatus|filter:{Value:editobj.Flag})[0].KeyName">
</select>
I had the same issue and found a unique solution. This is not best practice, but it may prove simple/helpful for someone. Just use jquery on the id or class or your select tag and you then have access to both the text and the value in the change function. In my case I'm passing in option values via sails/ejs:
<select id="projectSelector" class="form-control" ng-model="ticket.project.id" ng-change="projectChange(ticket)">
<% _.each(projects, function(project) { %>
<option value="<%= project.id %>"><%= project.title %></option>
<% }) %>
</select>
Then in my Angular controller my ng-change function looks like this:
$scope.projectChange = function($scope) {
$scope.project.title=$("#projectSelector option:selected").text();
};
I have tried some solutions,but here is basic production snippet. Please, pay attention to console output during quality assurance of this snippet.
Mark Up :
<!DOCTYPE html>
<html ng-app="appUp">
<head>
<title>
Angular Select snippet
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
</head>
<body ng-controller="upController">
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-3">
<div class="form-group">
<select name="slct" id="slct" class="form-control" ng-model="selBrand" ng-change="Changer(selBrand)" ng-options="brand as brand.name for brand in stock">
<option value="">
Select Brand
</option>
</select>
</div>
<div class="form-group">
<input type="hidden" name="delimiter" value=":" ng-model="delimiter" />
<input type="hidden" name="currency" value="$" ng-model="currency" />
<span>
{{selBrand.name}}{{delimiter}}{{selBrand.price}}{{currency}}
</span>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js">
</script>
<script src="js/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Code:
var c = console;
var d = document;
var app = angular.module('appUp',[]).controller('upController',function($scope){
$scope.stock = [{
name:"Adidas",
price:420
},
{
name:"Nike",
price:327
},
{
name:"Clark",
price:725
}
];//data
$scope.Changer = function(){
if($scope.selBrand){
c.log("brand:"+$scope.selBrand.name+",price:"+$scope.selBrand.price);
$scope.currency = "$";
$scope.delimiter = ":";
}
else{
$scope.currency = "";
$scope.delimiter = "";
c.clear();
}
}; // onchange handler
});
Explanation:
important point here is null check of the changed value, i.e. if value is 'undefined' or 'null' we should to handle this situation.
My code is set up to allow a user to select a sort direction:
<tr data-ng-repeat="row in gdata | orderBy:inverse">
Here's my HTML:
<div class="orderby">
<div class="arrow up"></div>
<div class="arrow down"></div>
<input type="checkbox" data-ng-model="inverse">
</div>
How can I replace this with a in Angular? So far I have coded this:
<select data-ng-model="inverse">
<option value="??">Sort Up</option>
<option value="??">Sort Down</option>
</select>
Can someone tell me am I doing it the right way and how can I set the values ?
Alot depends on the data you are using, and how you want the user to sort, but I created a basic example in this jsFiddle that you can play around with: http://jsfiddle.net/xRkhc/2/
HTML:
<div ng-controller="MyCtrl">
<div ng-repeat="row in gdata | orderBy:sort">
{{row.model}}
</div>
<select ng-model="sort">
<option value="model">Sort Up by Model</option>
<option value="-model">Sort Down by Model</option>
<option value="topSpeed">Sort Up by TopSpeed</option>
<option value="-topSpeed">Sort Down by TopSpeed</option>
</select>
</div>
Controller:
function MyCtrl($scope) {
$scope.sort = "model"; //just to set the default sort in the dropdown, not required
$scope.gdata = [{'model':'M3','topSpeed':'200'},{'model':'Type R','topSpeed':'150'}, {'model':'S2000','topSpeed':'160'},{'model':'NSX','topSpeed':'180'}];
}
When you hardcode the options (as in your code) the model only receives strings or numbers, you must use ng-options (or it's equivalent data-ng-options) instead of hardcoding the options. You specify the options as a member of your model.
Here's a complete example:
<!doctype html>
<html data-ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
var exampleCtrl = function ($scope) {
$scope.sortingDirection = {
'Sort Up' : true,
'Sort Down' : false
};
$scope.inverse = true;
}
</script>
</head>
<body>
<div data-ng-controller="exampleCtrl">
<select data-ng-model="inverse" data-ng-options="value as key for (key, value) in sortingDirection">
</select>
<pre data-ng-bind="inverse | json"></pre>
</div>
</body>
</html>