I have to generate a table from JSON data in angular, where the table should have the structure like in this fiddle. Where the table should have columns till the no. of days in a month where month is given as input, Now the data corresponding to that student on that particular date should be displayed in each row.
Sample json is:
{
"start_date":"2016-01-01 9:30:00",
"end_date":"2016-01-01 17:00:00",
"details":"Logged",
"name":"XXX"
},
{
"start_date":"2016-03-02 10:30:00",
"end_date":"2016-03-02 12:00:00",
"details":"Logged",
"name":"XXX"
},
{
"start_date":"2016-03-03 10:30:00",
"end_date":"2016-03-03 12:00:00",
"details":"Logged",
"ename":"XXX"
}
code
<!doctype HTML>
<html ng-app="myApp">
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-controller="MyCtrl">
Select student to get data :
<input type="text" value="" ng-model="search" id="search"/>
<select id="monthSel" ng-model="selMonth">
<option value="01">January</option>
<option value="02">February</option>
<option selected="selected" value="03" >March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<table border="1">
<tr >
<th>Name</th>
<th ng-repeat="data in jsonData | FilterByMonth:selMonth">{{data.start_date|dateFormat}}</th>
</tr>
<tr ng-repeat="stud in students| filter:search">
<td>{{stud}}</td>
<td ng-repeat="data in jsonData |filter:{ename:search} | FilterByMonth:selMonth ">{{data.start_date|time}} {{data.end_date|time}}</td>
</tr>
</table>
<script>
</script>
</body>
</html>
controller
var app = angular.module('myApp', [ ]);
app.controller('MyCtrl', function($scope,$http) {
$scope.events = [];
$scope.scheduler = { date : new Date() };
$http.get("data.json")
.success(function(response) {
$scope.jsonData = response;
$scope.students= $scope.jsonData.map(function(a) {return a.ename;});;
$scope.students= $scope.students.reduce(function(a,b){if(a.indexOf(b)<0)a.push(b);return a;},[]);
}).error(function(response){
alert("error"+angular.toJson(response));
});
});
app.filter('dateFormat', function($filter)
{
return function(input)
{
if(input == null){ return ""; }
var _date = $filter('date')(new Date(input), 'dd/MM/yyyy');
return _date.toUpperCase();
};
});
app.filter('time', function($filter)
{
return function(input)
{
if(input == null){ return ""; }
var _date = $filter('date')(new Date(input), 'HH:mm:ss');
return _date.toUpperCase();
};
});
app.filter('FilterByMonth', function ($filter) {
return function (items, month) {
var filtered = [];
// var _date = $filter('date')(new Date(input), 'dd/MM/yyyy');
for (var i = 0; i < items.length; i++) {
var item = items[i];
var _date = new Date(item.start_date);
if ( _date.getMonth()+1 == month) {
filtered.push(item);
}
}
return filtered;
};
});
Try this at the td's :
<!doctype HTML>
<html ng-app="myApp">
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-controller="MyCtrl">
Select student to get data :
<input type="text" value="" ng-model="search" id="search"/>
<select id="monthSel" ng-model="selMonth">
<option value="01">January</option>
<option value="02">February</option>
<option selected="selected" value="03" >March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<table border="1">
<tr ng-repeat="stud in students| filter:search">
<td data-title="{{data.start_date}}">{{stud}}</td>
<td data-title="{{data.start_date}}" ng-repeat="data in jsonData |filter:{ename:search} | FilterByMonth:selMonth ">{{data.start_date|time}} {{data.end_date|time}}</td>
</tr>
</table>
<script>
</script>
</body>
Do it with the data-title, it will add automatically the th with the value that you want, if it dont work, inject ngTable, maybe you'll need it to run that code, here you have a full example --> ngTable Example
Related
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 have tried the following code and failed to get the select option working.
HTML:
<select class=" form-control input-sm" ng-model="formCompletionData.myFilter" ng-change="myFilterChange(formCompletionData.myFilter)">
<option value="">--select--</option>
<option ng-repeat="filter in myfilter" ng-selected="filter.isDefault==true" value="{{filter.filtername}}">{{filter.myfiltername}}</option>
</select>
Angular Code:
$scope.formCompletionData={};
This is the json reponse for $scope.myfilter:
so $scope.myfilter looks like this:
[ {
"_id":"598d8d9998ebb08100fdc272",
"createdBy":"58A559634025FD4867EDAB81",
"myfiltername":"Test",
"filtername":"5A30DA2EB2D0FB046899AED3",
"groupname":"",
"status":"",
"isDefault":true,
"customerId":"SMRTsspd" }, {
"_id":"598da8ec98ebfdceb09d9f4c",
"createdBy":"58A559634025FD4867EDAB81",
"myfiltername":"test2",
"filtername":"5A30DA2EB2D0FB046899AED3",
"groupname":"59DDE8584B28AFFC49E47C89",
"status":"0",
"isDefault":false,
"customerId":"SMRTsspd" }, {
"_id":"598da8fd98ebfdceb09d9f4d",
"createdBy":"58A559634025FD4867EDAB81",
"myfiltername":"test66",
"alluser":false,
"filtername":"594CCAB14B289B198AC85360",
"groupname":"5926C668B7A2B94251CA2EC6",
"status":"1",
"isDefault":false,
"customerId":"SMRTsspd" } ]
In my code below, it is working fine.
angular.module("App", [])
.controller("DemoController", function($scope) {
$scope.formCompletionData = {};
$scope.myfilter = [{
"_id":"598d8d9998ebb08100fdc272",
"createdBy":"58A559634025FD4867EDAB81",
"myfiltername":"Test",
"filtername":"5A30DA2EB2D0FB046899AED3",
"groupname":"",
"status":"",
"isDefault":false,
"customerId":"SMRTsspd" }, {
"_id":"598da8ec98ebfdceb09d9f4c",
"createdBy":"58A559634025FD4867EDAB81",
"myfiltername":"test2",
"filtername":"5A30DA2EB2D0FB046899AED3",
"groupname":"59DDE8584B28AFFC49E47C89",
"status":"0",
"isDefault":false,
"customerId":"SMRTsspd" }, {
"_id":"598da8fd98ebfdceb09d9f4d",
"createdBy":"58A559634025FD4867EDAB81",
"myfiltername":"test66",
"alluser":false,
"filtername":"594CCAB14B289B198AC85360",
"groupname":"5926C668B7A2B94251CA2EC6",
"status":"1",
"isDefault":true,
"customerId":"SMRTsspd"}];
$scope.selectFilter = function(filter) {
$scope.formCompletionData.myFilter=filter;
return true;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="App">
<div ng-controller="DemoController">
<select class="form-control input-sm" ng-model="formCompletionData.myFilter" ng-change="myFilterChange(formCompletionData.myFilter)">
<option value="">--select--</option>
<option ng-repeat="filter in myfilter" ng-selected="filter.isDefault==true && selectFilter(filter.filtername)" value="{{filter.filtername}}">{{filter.myfiltername}}</option>
</select>
</div>
</body>
Im trying to create a dependent drop-down list box using json.For example: if the car brand selected is "bmw" then the car model drop-down must display only "suv" from the list and other two options shouldn't be displayed.Likewise for "Mercedes" it should display only "suv" and "coupe" in the car model. And also please explain what is the use of json? also how it effect the code.
my.html
Car Brand:
<select name="carname" ng-model="userSelect" required>
<option value="">--Select--</option>
<span ng-show="valdate.carname.$error.required">Car name</span>
<option ng-repeat="ManufactureBrand in a" ng-bind="ManufactureBrand" >
{{ManufactureBrand}}
</option>
</select>
<br/>
<br/> Car Model:
<select name="carmodel" ng-model="selectCar" required>
<option value="">--Select--</option>
<span ng-show="valdate.carmodel.$error.required">Car name</span>
<option ng-repeat="CarName in b" ng-bind="CarName">
{{CarName}}
</option>
</select>
<br/>
<input type="submit" ng-click="checkselection()" ng-disabled="valdate.carname.$invalid && valdate.carmodel.$invalid">
script.js
app.factory('Brandtest', function () {
var brand = {};
brand.sample = ['Bmw', 'Mercedes', 'Honda'];
brand.car = ['Suv', 'Sedan', 'Cope'];
{
return brand;
}
});
app.controller('selectDropdown', ['$scope', 'Brandtest', function ($scope, Brandtest) {
$scope.a = Brandtest.sample;
$scope.b = Brandtest.car;
$scope.list=[];
$scope.carlist=[];
$scope.checkselection = function () {
if ($scope.userSelect != "" && $scope.userSelect != undefined &&
$scope.selectCar != "" && $scope.selectCar != undefined )
{
$scope.list.push($scope.userSelect);
$scope.carlist.push($scope.selectCar);
}
Thanks in advance.
Here is the working plunkr
You have to modified you code as below
your factory should be like this
app.factory('Brandtest', function () {
var brand = {};
brand.sample =[
{
"id": 0,
"carName": "BMW"
},
{
"id": 1,
"carName": "Mercedes"
},
{
"id": 2,
"carName": "Honda"
}
];
brand.car =[
{
"id": 0,
"carType": "Suv",
"parentId": 0
},
{
"id": 1,
"carType": "Sedan",
"parentId": 1
},
{
"id": 2,
"carType": "Cope",
"parentId": 2
}
];
{
return brand;
}
});
In your HTML modify the code like below
<body ng-controller="selectDropdown">
Car Brand:
<select name="carname" ng-model="userSelect" ng-options="p.carName for p in a" required>
<option value="">--Select--</option>
<span ng-show="valdate.carname.$error.required">Car name</span>
</select>
<br/>
<br/> Car Model:
<select name="carmodel" ng-model="selectCar" ng-options="c.carType for c in b | filter:{parentId: userSelect.id}" required>
<option value="">--Select--</option>
<span ng-show="valdate.carmodel.$error.required">Car name</span>
</select>
<br/>
<input type="submit" ng-click="checkselection()" ng-disabled="valdate.carname.$invalid && valdate.carmodel.$invalid">
<table>
<tr>
<th>Car Name</th>
<th>Car Model</th></tr>
<tr ng-repeat="carz in list track by $index">
<td>{{carz.carName}}</td>
<td>{{carlist[$index].carType}}</td>
</tr>
</table>
</body>
You have to maintain some co-relation between the 2 dropdowns. Better would be to have a single json object and use ng-options for populating the second dropdown based on value selected in first dropdown. Run the demo program below and you will get the point.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>Select a car:</h1>
<select ng-model="x" ng-options="x for (x, y) in cars"></select>
<h1 ng-if="x">Category: </h1>
<select ng-if="x" ng-model="y" ng-options="y for y in x"></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
"car01" : ["Ford", "BMW", "NISSAN"],
"car02" : ["Fiat", "Infinity"],
"car03" : ["Volvo", "Toyota"]
}
});
</script>
</body>
</html>
I'm an angular newbie and am working on a small project and have come across a weird problem with ng-controller. When I use the controller within my partial view, the customer's name does not get passed into the value property.
However, if I inject the customersFactory (which has a function that makes an http request to the database to get all customers) into the ordersController, everything works fine.
My routeProvider code:
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'ordersController',
templateUrl: 'partials/orders.html'
})
.when('/customers', {
controller: 'customersController',
templateUrl: 'partials/customers.html'
})
.otherwise({
redirectTo: '/'
})
});
myApp.factory('ordersFactory', function($http) {
var orders = [];
var factory = {};
factory.getOrders = function(callback) {
$http.get('/orders').success(function(data) {
orders = data;
callback(orders);
})
}
factory.addOrder = function(data) {
return $http.post('/add/order', data);
}
factory.deleteOrder = function(id) {
return $http.delete('/delete/order/' + id);
}
return factory;
});
myApp.factory('customersFactory', function($http) {
var customers = [];
var factory = {};
factory.getCustomers = function(callback) {
$http.get('/customers').success(function(data) {
customers = data;
callback(customers);
})
}
factory.addCustomer = function(data) {
return $http.post('/add/customer', data);
}
factory.removeCustomer = function(customer_id) {
return $http.delete('/delete/customer/' + customer_id);
}
return factory;
});
myApp.controller('ordersController', function($scope, ordersFactory) {
var getOrders = function() {
ordersFactory.getOrders(function(data) {
$scope.orders = data;
});
}
getOrders();
$scope.addOrder = function() {
console.log($scope.order);
ordersFactory.addOrder($scope.order);
$scope.order = {};
getOrders();
}
$scope.deleteOrder = function(id) {
ordersFactory.deleteOrder(id);
getOrders();
}
});
myApp.controller('customersController', function($scope, customersFactory) {
var getCustomers = function() {
customersFactory.getCustomers(function(data) {
$scope.customers = data;
})
}
getCustomers();
$scope.addCustomer = function() {
customersFactory.addCustomer($scope.customer);
$scope.customer = {};
getCustomers();
}
$scope.removeCustomer = function(customer_id) {
customersFactory.removeCustomer(customer_id);
getCustomers();
}
});
Here's the orders.html partial page.
<h2>Add New Order</h2>
<form>
<label for="name">Customer</label>
<select name="name" ng-model="order.name" ng-controller="customersController">
<option ng-repeat="customer in customers" value="{{customer.name}}">{{ customer.name }}</option>
</select>
<label for="quantity">Order</label>
<select name="quantity" ng-model="order.quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="product" ng-model="order.product">
<option value="Nike Shoes">Nike Shoes</option>
<option value="Black Belts">Black Belts</option>
<option value="Ice Creams">Ice Creams</option>
<option value="Candies">Candies</option>
<option value="Waffles">Waffles</option>
</select>
<input type="submit" value="Order" ng-click="addOrder()">
</form>
<table>
<thead>
<tr>
<td>Customer Name</td>
<td>Product</td>
<td>Quantity</td>
<td>Date</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders">
<td>{{ order.name }}</td>
<td>{{ order.product }}</td>
<td>{{ order.quantity }}</td>
<td>{{ order.date }}</td>
<td>Remove</td>
</tr>
</tbody>
</table>
Can anyone please explain why this is the case? My initial guess is that it has something to do with not explicitly assigning $scope.customers but I am under the impression that as soon as ng-controller is detected, it executes all of the "self-executing functions" which would then assign the data to $scope.customers. Thanks in advance.
Use ng-model in place of value and instead of <option> tag use ng-options in select tag it is fast as compare the <option> tag
<select name="name" ng-model="order.name" ng-controller="ordersController" ng-options="customer as customer in customers" />
Use the ngOptions directive instead. The documentation can be found here: https://docs.angularjs.org/api/ng/directive/ngOptions
<select name="name" ng-model="order.name" ng-options="customer as customer.name for customer in customers track by customer.name" ng-controller="ordersController">
Try ng-model="customer.name" instead of value="{{customer.name}}"
Thanks so much for your feedback. I think I've figured out the root of my issue(s).
I am not using ng-options to iterate over an array full of objects.
I am calling the ordersController in the routeProvider but am overriding it with customersController which is causing ng-model="order.name" to not be passed into the scope.
Any pointers on what I can do to fix #2? Does "ng-controller='customersController' have to come before the tag in order for "ng-options" to display the options correctly?
i'm new in angular js , and i'm trying to search in a my table , using a selectbox.
I want that my search will be based on two xriterion: ( what i will write on the input item , and on what i will select )
for exemple if i will select ( search by name ) , i should search just based on name:
here is my code :
<div ng-controller="mycontrolleur">
<input type='text' ng-model="searchT">
<select ng-model="choix">
<option value='nom'>search by name</option>
<option value='cin'>search by CIN</option>
</select>
<table border="1">
<tr><td>Nom</td><td>CIN</td></tr>
<tr ng-repeat="x in students|filter:searchT|orderBy:choix">
<td>{{x.nom}} </td><td>{{x.cin}}</td></tr>
</table>
</div>
<script src='angular.min.js'></script>
<script>
var app=angular.module('searchApp',[]);
app.controller('mycontrolleur',function($scope)
{
$scope.students=[{nom:'marwen',cin:11155},
{nom:'mounir',cin:15885},
{nom:'maryem',cin:25155},
{nom:'ahmed',cin:77555},
{nom:'amel',cin:88155}
];
});
</script>
thank you for your help guys :)
You can use a filter like this one :
app.filter('filterByCustomProp', function($filter) {
return function(source, prop, searchValue) {
if (!searchValue) return source;
if (!prop) return $filter('filter')(source, searchValue); //search on name & CIN
return source.filter(function(item) {
return (item[prop].toString().indexOf(searchValue) > -1);
});
};
});
Then you can call :
<tr ng-repeat="x in students|filterByCustomProp:choix:searchT|orderBy:choix">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="searchApp" ng-controller="mycontrolleur">
<input type='text' ng-model="searchT">
<select ng-model="choix">
<option value='nom'>search by name</option>
<option value='cin'>search by CIN</option>
</select>
<table border="1">
<tr>
<td>Nom</td>
<td>CIN</td>
</tr>
<tr ng-repeat="x in students|filterByCustomProp:choix:searchT|orderBy:choix">
<td>{{x.nom}}</td>
<td>{{x.cin}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('searchApp', []);
app.filter('filterByCustomProp', function($filter) {
return function(source, prop, searchValue) {
if (!searchValue) return source;
if (!prop) return $filter('filter')(source, searchValue); //search on name & CIN
return source.filter(function(item) {
return (item[prop].toString().indexOf(searchValue) > -1);
});
};
});
app.controller('mycontrolleur', function($scope) {
$scope.students = [{
nom: 'marwen',
cin: 11155
}, {
nom: 'mounir',
cin: 15885
}, {
nom: 'maryem',
cin: 25155
}, {
nom: 'ahmed',
cin: 77555
}, {
nom: 'amel',
cin: 88155
}];
});
</script>
Hello you can use filter by object. For example:
ng-repeat="client in clients | filter: {name: 'Brett', designation: '1'}"