I have the following array that I am using to populate a select dropdown using ng-options but i am not able to set the selected option when the dropdown shows up.
Here is the array of data
{
'vehicle_year_id': 12,
'vehicle_color_id': 522,
'start_date': 'Thu Mar 26 2015 01:22:48 GMT+0000 (UTC)',
'end_date': 'Mon Sep 15 2014 14:37:15 GMT+0000 (UTC)',
'meta': {
'colors': [{ 'id': 522, 'caption': 'Green' }, { 'id': 523, 'caption': 'Blue' }],
'years': [{ 'id': 12, 'year': 2015 }, { 'id': 13, 'year': 2016 }]
},
'quantity': 8,
'duration': 10
},
and the partial code
<select ng-model="details.vehicle_color_id" ng-init="details.vehicle_color_id || details.meta.colors[0].id" class="form-control" ng-options= "color.id as color.caption for color in details.meta.colors track by color.id">
</select>
I can see the list of data in the dropdown list but the selected field doesn't show up at all. What is the proper way to use the option ?
Update:
I just made the following changes
<select ng-model="details.vehicle_color_id" ng-init="details.vehicle_color_id=(details.vehicle_color_id || details.meta.colors[0].id)" class="form-control" ng-options= "color.id as color.caption for color in details.meta.colors" ng-change="getValue($index)">
</select>
and used the getValue() to check the value of the model and it was showing the correct data and also the default value is being selected. I'm curious as to why it's happening this way.
Your ng-init should set value of ng-model scope variable
Markup
<select ng-model="details.vehicle_color_id"
ng-init="details.vehicle_color_id=(details.vehicle_color_id || details.meta.colors[0].id)"
class="form-control"
ng-options="color.id as color.caption for color in details.meta.colors"
ng-change="getValue($index)">
</select>
Working Plunkr
Related
I have a jtable jquery where I get the date from javahibernate pojo change to json and it gets auto change to this format Apr 7, 2020 12:00:00 AM.
In my jtable the display format for the field is set to 'dd-MMM-yyyy' I get the following error:
jTable WARNING: Given date is not properly formatted: Apr 7, 2020
12:00:00 AM
This only happens when the field type is date
start_date: {
title: 'Date',
type: 'date',
displayFormat:'dd-MMM-yyyy',
list: true,
width: '8%'
}
Can anyone help me to get the formatting fixed? I tried the same in pojo but it's not working.
Use moment jquery library.
This is what I have done to change the date format.
date: {
title: 'Date',
display: function(data) {
return moment(data.record.timestamp).format('YYYY-MM-DD');
},
},
I am trying to filter an ng-options dropdown depending of what you select in the previous one. This is what I am trying to achieve
If you choose Internal Tier 1 then show all company tiers
If you choose Internal Tier 2 show all except 1 - Partner Branded
If you choose Internal Tier 3 show only 3b- Answer Branded
This is my actual code.
$scope.companyData = {
Category: 0,
InternalTierId: 0
};
$scope.lookUps = {
companyTier: [
{ Id: 1, Name: '1 - Partner Branded'},
{ Id: 2, Name: '2 - Co-branded'},
{ Id: 3, Name: '3a - Answer Branded'},
{ Id: 4, Name: '3b - Answer Branded'}
],
internalTier: [
{ Id: 1, Name: 'Tier 1' },
{ Id: 2, Name: 'Tier 2' },
{ Id: 3, Name: 'Tier 3' }
]};
And these are the dropdowns. I cannot change the ng-model since I am using that object properties.
<select class="form-control" name="companyinternaltier"
ng-required="true" ng-model="companyData.InternalTierId"
ng-options="item.Id as item.Name for item in lookUps.internalTier">
<option value="">- Select Internal Tier Level -</option>
<select class="form-control" name="companytier" ng-required="true"
ng-model="companyData.Category" ng-options="item.Id as item.Name for
item in lookUps.companyTier | filter: filterTiers()">
<option value="">- Select Branding Tier Level -</option></select>
I put filterTiers() function after the filter word because I think I could create a function to do that but I dont know how to handle it
I appreciate any kind of help. Thanks
You can use ng-change option.See in the Plunker
I want to use a fullcalendar to configure some data that applies to days of the week, but not tied to specific dates. So I want to show a calendar that doesn't include the actual dates in the header, and instead just shows the day of the week
So:
Mon, Tue, Wed, ...
instead of
Mon 2/1, Tue 2/2, Wed 2/3, ...
Use below common configuration for all views..
columnFormat: 'ddd', // Or any moment format as you require to show.
You also can give View-Specific-Options.
$('#calendar').fullCalendar({
views: {
basic: {
columnFormat: 'ddd'
},
agenda: {
columnFormat: 'ddd'
},
week: {
columnFormat: 'ddd'
},
day: {
columnFormat: 'ddd'
}
}
});
This works for me.
I have a table with data columns defined like this:
var table = myEl.DataTable({
paging: false,
searching: true,
info: false,
ordering: true,
autoWidth: false,
columns: [
{data: 'Name', name: 'Name'},
{data: 'Time', name: 'Time'}
]
});
The data that feed this table look like this:
{
Name: "Bob",
Time: "Wed Aug 26 2015 16:09:52 GMT-0500 (Central Daylight Time)",
TimeTwo: "16:09:52"
}
So DataTables stores the entire object and displays Name and Time.
How can I switch the data source as defined in "columns" in initialization to using TimeTwo rather than Time? (after the table gets data fed into it)
Simply: The table loads Name and Time, but how can I switch it to using TimeTwo after initialization? Switch it dynamically?
function switchDataSourceForTime(){
// what to do...?
}
You can make both columns are rendered but only one is shown. Something like this:
<div>
Toggle column:
<input id="btn" type="button" value="change column value"></input>
</div>
<br>
<div>
<table id="table"></table>
</div>
var data =
[
{
Name: "Bob",
Time: "Wed Aug 26 2015 16:09:52 GMT-0500 (Central Daylight Time)",
TimeTwo: "16:09:52"
},
{
Name: "Tom",
Time: "Wed Aug 25 2015 17:41:23 GMT-0500 (Central Daylight Time)",
TimeTwo: "17:41:23"
}
];
var table = $("#table").DataTable({
data: data,
paging: false,
searching: true,
info: false,
ordering: true,
autoWidth: false,
columns: [
{data: 'Name', name: 'Name'},
{data: 'Time', name: 'Time'},
{data: 'TimeTwo', name: 'TimeTwo'}
]
});
table.column("2").visible(false);
$('#btn').on('click', function(e){
e.preventDefault();
var columnTimeTwo = table.column("2").visible(!table.column("2").visible());
var columnTime = table.column("1").visible(!table.column("1").visible());
});
You can see the code running on fiddle
I've got these variables in a service:
months: [
{ label: 'January', value: 1, disabled: true },
{ label: 'February', value: 2, disabled: true },
{ label: 'March', value: 3, disabled: true },
{ label: 'April', value: 4, disabled: false },
{ label: 'May', value: 5, disabled: false },
{ label: 'June', value: 6, disabled: false },
{ label: 'July', value: 7, disabled: false },
{ label: 'August', value: 8, disabled: false },
{ label: 'September', value: 9, disabled: false },
{ label: 'October', value: 10, disabled: false },
{ label: 'November', value: 11, disabled: false },
{ label: 'December', value: 12, disabled: false }
],
currentMonth: 4
my select looks like this:
<select name="goalStartMonth" id="goalStartMonth" class="form-control gb-select" ng-model="startMonth" ng-change="frequencyUpdated()" ng-options="month.value as month.label for month in months"></select>
that works fine to build the <select>, but I want to disable the months before the current month (can't select a month in the past)
Angular docs for ng-options show:
"label disable when disable for value in array"
so I've tried:
<select name="goalStartMonth" id="goalStartMonth" class="form-control gb-select" ng-model="startMonth" ng-change="frequencyUpdated()" ng-options="month.value as month.label disable when month.value < currentMonth for month in months"></select>
That breaks the <select> - no options are rendered.
I also tried:
<select name="goalStartMonth" id="goalStartMonth" class="form-control gb-select" ng-model="startMonth" ng-change="frequencyUpdated()" ng-options="month.label disable when month.value < currentMonth for month in months"></select>
same result.
What am I missing here?
One way to do this is to use an ng-repeat and ng-disabled on an <option> within the <select>, like this:
<select name="goalStartMonth" id="goalStartMonth" class="form-control gb-select" ng-model="startMonth" ng-change="frequencyUpdated()">
<option ng-repeat="month in months" ng-disabled="month.value < currentMonth" >{{month.label}}</option>
</select>
Working JSFiddle here
EDIT
As was mentioned above, this feature was not available until the 1.4.0 beta. Here is a JSFiddle showing it works using the 1.4.0-beta.6 version of AngularJS
I think I know why it's not working. I checked the ng-options documentation from Angular docs and noticed they had an example using that "label disable when disable for value in array" notation.
I tried changing from 1.4.0-beta.6 to 1.3.15 in their example on plnkr and it didn't work anymore.
It seems like it is a version issue.
If you check https://github.com/angular/angular.js/issues/638
you will see that this disable notation was recently added, as this issue was closed on February 18.
You can disable using ngOptions in angular 1.4.1 or above
HTML template
<div ng-app="myapp">
<form ng-controller="ctrl">
<select id="t1" ng-model="curval" ng-options='reportingType.code as reportingType.itemVal disable when reportingType.disable for reportingType in reportingOptions'>
<option value="">Select Report Type</option>
</select>
</form></div>
Controller code
angular.module('myapp',[]).controller("ctrl", function($scope){
$scope.reportingOptions=[{'code':'text','itemVal':'TEXT','disable':false}, {'code':'csv','itemVal':'CSV','disable':true}, {'code':'pdf','itemVal':'PDF','disable':false}];})