I have some data set up like this:
$scope.data = [
{
weekDay: {
monday: [{
time: ''
}],
tuesday: [{
time: ''
}],
wednesday: [{
time: ''
}],
thursday: [{
time: ''
}],
friday: [{
time: ''
}],
saturday: [{
time: ''
}],
sunday: [{
time: ''
}]
}
}];
If I set up an ng-repeat like this...
<p ng-repeat="day in data.weekDay">{{day}}</p>
All I see is:
{"time":""}
{"time":""}
{"time":""}...
Why can't I see the parent key (individual days of the week)? How would I be able to use the days of the week in my repeater? (e.g. as a title in an h3 tag)
You cannot access weekDay property like data.weekDay as $scope.data is an array. Access it as data[0].weekDay.
<p ng-repeat="(day, timeObj) in data[0].weekDay">
{{day}}
</p>
Otherwise change your data like this (which makes more sense I guess)
$scope.data = {
weekDay: {...}
};
and access it as data.weekDay in ng-repeat
Jsfiddle
In the json the week day is an index, not a value. For example the monday it would be like below:
$scope.data = [
{
weekDay: {
dayname: 'monday',
timevalue : [{
time: ''
}],
... Rest of values ...
}
}];
And the html like below
<p ng-repeat="day in data.weekDay">{{dayname}}</p>
Related
I have tried to use ng-options in this json array
$scope.new_user = [
{
id_usuario: 0,
usuarioNome: '',
usuarioAD: '',
perfil: [{ master: "Não", id: 0 }, { master: "Sim", id: 1 }],
acesso: [{ restringir: "Não", id: 0 }, { restringir: "Sim", id: 1 }]
}];
<select ng-options="perfil as perfil.master for perfil in new_user" ng-model="perfil"></select>
What I'm doing wrong?
Thanks all
You should check:
<select ng-model="perfil" ng-options="perfil as perfil.master for perfil in new_user[0].perfil"></select>
You ng-model is what is selected.
You should have something like this :
<select ng-options="perfil as perfil.usuarioNome for perfil in new_user" ng-model="selectedPerfil"></select>
To avoid a blank anwser in your selected you should set selectedProfil in your controller :
$scope.selectedPerfil = $scope.new_user[0];
I would like to have a column in my angularjs ui-grid that displays a datetime eg"dd/MMM/yyyy hh:mm:ss".
I have found heaps of documentation on using date fields, but there seems to be nothing for datetime fields. When I use the following columnDefs, the TimeDown field renders blank.
Has anyone had any success with datetime columns?
Thanks in advance.
Damien.
$scope.gridOptions = {
enableRowSelection:true,
columnDefs: [
{ name: 'IncidentRef',displayName:'Incident', width:'20%' },
{ name: 'Areas' },
{ name: 'TimeDown', type:'datetime',cellFilter: 'datetime:"dd MMM yyyy hh:mm"'},
{ name: 'TotalNumberOff', displayName: 'Total off', width: '10%' }
]
};
Thanks S. Divya, that reference helped. The problem was the type 'datetime'. It should be 'date'. Here is the working code:
$scope.gridOptions = {
enableRowSelection:true,
columnDefs: [
{ name: 'IncidentRef',displayName:'Incident', width:'20%' },
{ name: 'Areas' },
{ name: 'TimeDown', type:'date',cellFilter: 'date:"dd MMM yyyy hh:mm"'},
{ name: 'TotalNumberOff', displayName: 'Total off', width: '10%' }
]};
I am using unique filter to display JSON data.
This is my JSON data:
data= [
{
itemId: "100",
name: "x001",
date: "2016-01-16T16:17:38.928-05:00"
},
{
itemId: "102",
name: "x002",
date: "2016-01-16T16:05:20.928-05:00"
},
{
itemId: "103",
name: "x003",
date: "2016-01-15T10:10:01.715-05:00"
},
{
itemId: "104",
name: "x004",
date: "2016-01-15T12:15:01.715-05:00"
},
{
itemId: "105",
name: "x005",
date: "2016-01-14T12:15:25.928-05:00"
}
]
I am trying to display itemswith no repeated date, so that my output will be:
x001
x003
x005
How do I use unique filter which filters only date value (not consider Time stamp in date field)
here is my HTML code:
<div ng-repeat="item in result | unique:'date'">
{{name}}
</div>
See if this helps: How to make ng-repeat filter out duplicate results
Basically says:
you must include filters as an additional reference in your module angular.module('yourModule', ['ui', 'ui.filters']);
I'm doing a POC for AngularJS and Kendo UI and I need to know how to save updated data on a kendo grid. I have inline editing enabled but can't hook into kendo UI to get the updated data. I created a fiddle (http://jsfiddle.net/aMz7V/14/) but can't get the jsfiddle to work (sorry this is my first time creating a fiddle), so I have pasted the code below:
JavaScript (controller code):
var myApp = angular.module('myApp', ['kendo.directives']);
myApp.controller("gridCtrl", function($scope) {
$scope.assignments = {};
$scope.assignments.dataSource = new kendo.data.DataSource({
data: [
{ StudentName: "John Smith", HomeWork: 9, HomeWork1: 12 },
{ StudentName: "Kodjo Adu", HomeWork: 5, HomeWork1: 15 },
{ StudentName: "Patrick smith", HomeWork: 10, HomeWork1: 19 },
{ StudentName: "Richard lomax", HomeWork: 8, HomeWork1: 18 },
{ StudentName: "Aglade Bone", HomeWork: 7, HomeWork1: 20 }
],
schema: {
model: {
fields: {
StudentName: { type: "string" },
HomeWork: { type: "number" },
HomeWork1: { type: "number" },
}
}
},
pageSize: 3,
});
$scope.assignments.columns = [
{ field: 'StudentName', title: 'Student Name' },
{ field: 'HomeWork', title: 'Home Work / 10' },
{ field: 'HomeWork1', title: 'Home Work / 20' }
];
});
HTML:
<div ng:app="myApp">
<div ng-controller='gridCtrl'>
<div kendo-grid k-data-source="assignments.dataSource" k-selectable="'row'"
k-pageable='{ "refresh": true, "pageSizes": true }'
k-columns='{{assignments.columns}}' k-sortable="true" k-editable="true" k-toolbar="['save','cancel']"></div>
</div>
</div>
So i figured it out, to handle to the save changes event i needed to do this
k-on-save-changes="saveChanges(kendoEvent)"
and just add the saveChanges function to the $scope in the controller.
My code is here in jsFiddle, and below is the c/p of that code. My question is how to get just the text Mon and not ["Mon"] when I click on the Monday option, and also how to get Mon, Thu when I multi-select Monday and Thursday (ofc, you get the point: Tue, Wed, Sat when Tuesday, Wednesday and Saturday options are selected). I must be missing something obvious so please steer me in the right direction.
html:
<div ng-app ng-controller="Controller">
<select multiple="multiple" ng-model="day" ng-options='day.id as day.name for day in days'></select>
{{day}}
</div>
js:
function Controller($scope) {
$scope.days = [
{
name: "Monday",
id: "Mon"
},
{
name: "Tuesday",
id: "Tue"
},
{
name: "Wednesday",
id: "Wed"
},
{
name: "Thursday",
id: "Thu"
},
{
name: "Friday",
id: "Fri"
},
{
name: "Saturday",
id: "Sat"
},
{
name: "Sunday",
id: "Sun"
}
];
}
Here's an example that transforms the array to a String and displays it as a string directly in the page:
JS:
$scope.selectedDaysToString = function() {
return $scope.day.join(', ');
}
HTML:
{{selectedDaysToString()}}
And here is an example that generates a list containing all the selected days:
HTML:
<ul>
<li ng-repeat="d in day">{{d}}</li>
</ul>