I have to make a selectbox where i can select a name, after i selected the name i have to show 2 values, the dateOfBirth and dateOfBirth with the filter so you can see the age (for example 19 years old)
But my problem is that it shows all the values from dateOfBirth.
For better understanding watch this: http://jsfiddle.net/9obhfm5c/1/
Template:
<div ng-app="mainApp">
<div ng-controller="ExampleController">
the birthday of
<select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect">
<option ng-repeat="option in data.availableOptions" value="{{option.dateOfBirth}}">
{{option.vn}}
</option>
</select>
is {{data.repeatSelect}} and is <span ng-model="data.repeatSelect" ng-repeat="option in data.availableOptions | filter:data.repeatSelect">{{ option.dateOfBirth | ageFilter }}</span> years old
<br/><br/>
</div>
JavaScript code:
var mainApp = angular.module("mainApp", []);
mainApp.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
repeatSelect: null,
availableOptions: [
{vn:'Mike', an:'Johnson', dateOfBirth: '1996-03-11'},
{vn:'Curry', an:'Muisjes', dateOfBirth: '1992-03-11'},
{vn:'Jan', an:'Peters', dateOfBirth: '1995-03-11'}
],
};
}]);
mainApp.filter('ageFilter', function () {
function calculateAge (birthday) {
var date = new Date(birthday);
var ageDifMs = Date.now() - date.getTime();
var ageDate = new Date(ageDifMs);
return Math.abs(ageDate.getUTCFullYear() - 1970);
}
return function (birthdate) {
return calculateAge(birthdate);
};
});
You can see that it outputs all the years (192320) and when you select 1 name it displays a proper value, but i want it first to be emptied and after the select that it shows the age.
I don't know if it's good for you, but you can hide the while nothing is selected.
You can do this by adding ng-show="data.repeatSelect != null".
http://jsfiddle.net/arielcessario/9hfvkL32/
<div ng-controller="ExampleController">
the birthday of
<select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect">
<option ng-repeat="option in data.availableOptions" value="{{option.dateOfBirth}}">
{{option.vn}}
</option>
</select>
is {{data.repeatSelect}} and is <span **ng-show="data.repeatSelect != null"** ng-model="data.repeatSelect" ng-repeat="option in data.availableOptions | filter:data.repeatSelect">{{ option.dateOfBirth | ageFilter }}</span> years old
<br/><br/>
</div>
Related
I have a list of names and activities displayed with ng-repeat which shows tabular data (shortened for brevity). The list box populates and I can show which SchoolDayID was previously stored and the value for this updates if you change the selection in the drop-down. When the form loads it does not select any value in the drop-down list. For the ng-select I have tried several variations, none of which worked. I am several days into this and have no idea what I am doing wrong or failing to understand. How do I get each drop down per row to select the correct item?
I have tried:
<select ng-model="selectedSchoolDayID" ng-init="selectedSchoolDayID = a.SchoolDayID" ng-options="x.ID as x.code for x in AMListData" >
</select>
and even:
<select class="form-group">
<option id="selectedSchoolDay" name="selectedSchoolDay" value="{{AMListData[0].ID}}" selected="{{AMListData[0].ID}} == {{a.SchoolDayID}}">{{AMListData[0].code}}</option>
<option id="selectedSchoolDay" name="selectedSchoolDay" value="{{AMListData[1].ID}}" selected="{{AMListData[1].ID}} == {{a.SchoolDayID}}">{{AMListData[1].code}}</option>
<option id="selectedSchoolDay" name="selectedSchoolDay" value="{{AMListData[2].ID}}" selected="{{AMListData[2].ID}} == {{a.SchoolDayID}}">{{AMListData[2].code}}</option>
</select>
Data for list box:
$scope.AMListData = participationSvc.amlist();
// from participationSvc:
'amlist': function listSelectionsController($scope) {
return [
{ ID: '0', code: 'PM Programming' },
{ ID: '1', code: 'AM Programming' },
{ ID: '2', code: 'Supplemental' }
];
},
HTML/AngularJS part:
<div ng-repeat="a in selectedAttendees | orderBy : a.LastName">
<!-- there could be many rows, once per name of person. each row should have a drop-down of its own -->
<div class="row">
<div>{{a.LastName}}</div>
...
<select class="col-md-5" id="SchoolDay" name="SchoolDay" ng-model="a.SchoolDayID">
<option data-ng-repeat="x in AMListData" name="SchoolDay" value={{x.ID}} ng-selected="{{(x.ID == selectedSchoolDay) ? true: false}}" >{{x.code}}</option>
</select>
<!-- Show me current selection and drop-down list data -->
<b> Selected ID: {{a.SchoolDayID}}</b>
<br />
<ul>
<li ng-repeat="x in AMListData">{{x.ID}} {{x.code}}</li>
</ul>
</div>
</div>
You can use default value in controller
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedSchoolDayID" ng-options="x.ID as x.code for x in AMListData" >
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.a={
//SchoolDayID:'2'
};
$scope.selectedSchoolDayID=$scope.a.SchoolDayID || '1';//'1' is Default Value
$scope.AMListData=[
{ ID: '0', code: 'PM Programming' },
{ ID: '1', code: 'AM Programming' },
{ ID: '2', code: 'Supplemental' }
];
});
</script>
</body>
</html>
I want to order date. But doesn't work correctly. Date format is dd-mm-yyyy. Just order dd format doesn't check mm and yyyy. How can I solve?
JS
$scope.sortOptions = [
{
name:'Date desc',
sortCategory:'-anndate'
},
{
name:'Date asc',
sortCategory:'anndate'
}
];
HTML
<select ng-model="selectedSortType" class="custom-select">
<option value="" selected="">Select type</option>
<option value='{{opt.sortCategory}}' ng-repeat="opt in sortOptions track by $index">{{opt.name}}</option>
</select>
<div ng-repeat="i in res| orderBy:selectedSortType">
<div>{{i.anndate}}</div>
</div>
var app = angular.module('app', [])
.controller('appController', appController);
appController.$inject = ['$scope', '$window'];
function appController($scope, $window) {
$scope.title = "date sorting example";
$scope.sortOptions = [{
name: 'Date desc',
sortCategory: '2018-07-15 '
},
{
name: 'Date desc',
sortCategory: '2018-07-12 '
},
{
name: 'Date asc',
sortCategory: '2018-07-13'
}
];
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="appController">
<p>Ascending Order</p>
<div ng-repeat="i in sortOptions | orderBy:'sortCategory'">
<p>{{i.sortCategory}}</p>
</div>
<select ng-model="selectedSortType" class="custom-select">
<option value="" selected="">Select type</option>
<option value='{{opt.sortCategory}}' ng-repeat="opt in sortOptions | orderBy:'sortCategory'">{{opt.sortCategory}}</option>
</select>
<p>Descending Order</p>
<div ng-repeat="i in sortOptions | orderBy:'-sortCategory'">
<p>{{i.sortCategory}}</p>
</div>
<select ng-model="selectedSortType" class="custom-select">
<option value="" selected="">Select type</option>
<option value='{{opt.sortCategory}}' ng-repeat="opt in sortOptions | orderBy:'-sortCategory'">{{opt.sortCategory}}</option>
</select>
</div>
Try this..
Since the date in res object is in string format the filter is applying on dd value.
For entire date filter you need to convert the anndate to Date() object
Place the following code in the line below assigning res value in controller
angular.forEach($scope.res,function(item){ item.anndate = new Date(item.anndate); });
Then in html replace with below line
<select ng-model="selectedSortType" class="custom-select">
<option value="" selected="">Select type</option>
<option value='{{opt.sortCategory}}' ng-repeat="opt in sortOptions track by $index">{{opt.name}}</option>
</select>
<div ng-repeat="i in res| orderBy:selectedSortType">
<div>{{i.anndate| date : 'dd/MM/yyyy'}}</div>
</div>
I would like know how to add 80 years old years from current year to select box by using ng-repeat. I already done looping for months and days and those are working fine. I want know how to do it for years according above recoverment.
JS Code:
app.filter('range', function() {
return function(input, min, max) {
min = parseInt(min);
max = parseInt(max);
for (var i=min; i<=max; i++)
input.push(i);
return input;
};
});
HTML Code:
<select class="custom-select" required ng-model="bd">
<option selected disabled ng-selected="true">Days</option>
<option ng-repeat="n in [] | range:1:31" value="{{n}}">{{n}}</option>
</select>
<select class="custom-select" required ng-model="bm">
<option selected disabled ng-selected="true">Months</option>
<option ng-repeat="n in [] | range:1:12" value="{{n}}">{{n}}</option>
</select>
<select class="custom-select" required ng-model="by">
<option selected disabled ng-selected="true">Year</option>
<option ng-repeat="n in [] | range:new Date().getFullYear()-80:new Date().getFullYear()" value="{{n}}">{{n}}</option>
</select>
I think the easiest would to do another filter:
app.filter('yearRange', ['$filter', function($filter) {
return function(input, range) {
$filter('range')(input, new Date().getFullYear()-range, new Date().getFullYear());
}
}]);
Call it with:
<option ng-repeat="n in [] | yearRange: 80" value="{{n}}">{{n}}</option>
Alternatively, you can create the current year as a $scope variable, and call it in your filter.
Controller:
$scope.currentYear = new Date().getFullYear();
HTML:
<option ng-repeat="n in [] | range: $scope.currentYear-80:$scope.currentYear" value="{{n}}">{{n}}</option>
3rd Alternative. Call $filter from your controller, and initialize the years array there (Make sure it's passed in):
$scope.years = $filter('range')([], new Date().getFullYear()-80, new Date().getFullYear());
Then use:
<option ng-repeat="n in years" value="{{n}}">{{n}}</option>
I have a dropdown show below card information and i want to show is_default= true card show top other cards below.. please help me
<select ng-model="approvedinvoicesCtrl.currentcard.card_id">
<option ng-value="item.card_id" ng-repeat="item in approvedinvoicesCtrl.current_job.cards ">{{item.brand +' '+ item.last_digits}}</option>
</select>
{brand:"Visa",
card_id:"card_19VHhAGdj8iWoXDURuRqNH28",
last_digits : 123123,
is_default:true},
{
brand:"Master",
card_id:"card_19VHhAGdj8iWoXDURuRqNH28",
last_digits : 123123,
is_default:false}
Suggesting you with this
<select>
<option ng-value="item.card_id" ng-repeat="item in dropdownval "
ng-selected=item._default >
{{item.brand +' '+ item.last_digits}}</option>
</select>
LIVE DEMO
I will suggest to use ngOptions on option element instead of ng-repeat.
Note: ngOptions provides an facility for the "option" element which should be used instead of ngRepeat when you want the select model to be bound to a non-string value. This is because an option element can only be bound to string values at present. For more information you can check this link.
Working demo with ngOptions :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.current_job = {
"cards": [
{
brand:"Visa",
card_id:"card_19A",
last_digits : 123123,
is_default:true
}, {
brand:"Master",
card_id:"card_19B",
last_digits : 123123,
is_default:false
}
]
};
for (var i in $scope.current_job.cards) {
if ($scope.current_job.cards[i].is_default == true) {
$scope.topCard = $scope.current_job.cards[i].card_id;
}
}
})
<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-options="item.card_id as item.brand+' '+item.last_digits for item in current_job.cards"
ng-model="topCard">
</select>
</div>
Working demo with ngRepeat :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.current_job = {
"cards": [
{
brand:"Visa",
card_id:"card_19A",
last_digits : 123123,
is_default:true
}, {
brand:"Master",
card_id:"card_19B",
last_digits : 123123,
is_default:false
}
]
};
})
<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="currentcard.card_id">
<option ng-value="item.card_id" ng-repeat="item in current_job.cards" ng-selected="item.is_default">{{item.brand +' '+ item.last_digits}}</option>
</select>
</div>
You should use the ng-init and the ng-options for defaults values like:
<select ng-init="somethingHere = options[1]"
ng-model="somethingHere"
ng-options="option for option in options">
</select>
$scope.options = [
'Brand1',
'Brand2',
'Brand3'
];
You can use orderby
<select ng-model="approvedinvoicesCtrl.currentcard.card_id><option ng-value="item.card_id" ng-repeat="item in approvedinvoicesCtrl.current_job.cards | orderBy:'is_default':false">{{item.brand +''+ item.last_digits}}</option></select>
Here item 'is_default' property is sorted in a reversed order. The 2nd argument can be any order function, so you can sort in any rule.
#link http://docs.angularjs.org/api/ng.filter:orderBy
You may prefer pre-selecting the card (option selected) instead of sorting using the default card at the top.
You can use the ng-selected using the default value if no value is selected in ng-model , otherwise, it selects the value in ng-model.
<select ng-model="currentCard.selected" >
<option
ng-value="item.card_id" ng-repeat="item in cards"
ng-selected="(currentCard.selected==item.card_id) || (!currentCard.selected && item.is_default)">
{{item.brand +' '+ item.last_digits}}
</option>
</select>
or you can use the ng-options approach. In this last case, you can pre-select an option using the ng-model value only.
<select
ng-model="currentCard.selected"
ng-options="item.card_id as item.brand+' '+item.last_digits for item in cards">
</select>
See this fiddle with both examples:
https://jsfiddle.net/hdca55cg/
The second one shows default card if you have previously selected in the model.
I am trying to filter out items which are objects & not null in angular 1.5.6.
I tried all options from this post.
Still cannot make it to work.
Only 'Sally' should be shown in the select
Here is the fiddle
HTML :
<div ng-app="myApp" ng-controller="myCtrl">
<br>
<select ng-model="a" ng-options="detail.name for detail in details | filter:{shortDescription:'!null'} track by detail.name">
</select>
<br>
New
<select ng-model="b" ng-options="detail.name for detail in details | filter:{shortDescription: ''} track by detail.name">
</select>
<br>
All
<select ng-model="c" ng-options="detail.name for detail in details | filter:{shortDescription: '!!'} track by detail.name">
</select>
<br>
Without any filter
<select ng-model="d" ng-options="detail.name for detail in details track by detail.name">
</select>
<!-- -->
</div>
Script :
function myCtrl($scope) {
$scope.details = [{
name: 'Bill',
shortDescription: null
}, {
name: 'Sally',
shortDescription: {'MyName':'A girl'}
}];
}
angular.module("myApp",[]).controller("myCtrl", myCtrl);
The problem is that filter:{shortDescription: ''} matches only primitives but not complex objects and shortDescription in your case is a nested object.
Therefore instead use filter:{shortDescription:{$:''}} like so:
<select ng-model="a"
ng-options="detail.name for detail in details | filter:{shortDescription:{$:''}} track by detail.name">
</select>
Please run this snippet to achieve your goal
function myCtrl($scope) {
$scope.details = [{
name: 'Bill',
shortDescription: null
}, {
name: 'Sally',
shortDescription: {'MyName':'A girl'}
}];
}
angular.module("myApp",[]).controller("myCtrl", myCtrl).filter('descFilter',descFilter);
function descFilter(){
return function(array,key){
var newArr = [];
for(var i = 0; i < array.length; i++){
if (array[i][key] != null){
newArr.push(array[i]);
}
}
return newArr;
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<br>
With Filter:
<select ng-model="a" ng-options="detail.name for detail in details | descFilter:'shortDescription'">
</select>
<br>
Without any filter
<select ng-model="d" ng-options="detail.name for detail in details track by detail.name">
</select>
<!-- -->
</div>
In ngOptions the not null check is know to not work. Instead you can create a custom filter and use that.
Here is an example with a custom filter function.
http://jsfiddle.net/ivankovachev/bue59Loj/
The custom filter function:
$scope.isDescriptionNull = function(item) {
if (item.shortDescription === null) return false;
return true;
}
And how to use it:
<select ng-model="a" ng-options="detail.name for detail in (details | filter:isDescriptionNull) track by detail.name">
You have a little bug in your markup.
The filter expects to get a object property, expression, or comparator.
Official documentation:
{{ filter_expression | filter : expression : comparator : anyPropertyKey}}
So, what you are doing isn't a valid filter
<select ng-model="a"
ng-options="detail.name for detail in details | filter:{shortDescription:'!!'}} track by detail.name">
</select>