I need to use angular in order to get data from a web endpoint to fill this table. I have a list created with random names, but I need it to filled with data from a link instead. I still need to create the social media links as well.
Either way, can someone show me how to do it keeping in mind that I don't know much about angular at all. thank you.
html:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS </title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript" src="folder/main.js"></script>
<script src="http://code.angularjs.org/1.4.8/angular.js"></script>
<script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body ng-app="MyForm">
<div ng-controller="myCtrl">
<h3>List students</h3>
<div class="container-fluid">
<pre>Click header link to sort, input into filter text to filter</pre>
<hr />
<table class="table table-striped">
<thead>
<tr>
<th>Edit</th>
<th>
ID
</th>
<th> Name </th>
<th>Social Media </th>
</tr>
</thead>
<tbody>
<tr>
<td>Filter =>></td>
<td> <input type="text" ng-model="search.name" /></td>
<td> <input type="text" ng-model="search.age" /> </td>
<td><input type="text" ng-model="search.gender" /> </td>
</tr>
<tr ng-repeat="user in students | orderBy:predicate:reverse | filter:paginate| filter:search" ng-class-odd="'odd'">
<td>
<button class="btn">
Edit
</button>
</td>
<td>{{ user.name}}</td>
<td>{{ user.age}}</td>
<td>{{ user.gender}}</td>
</tr>
</tbody>
</table>
<pagination total-items="totalItems" ng-model="currentPage"
max-size="5" boundary-links="true"
items-per-page="numPerPage" class="pagination-sm">
</pagination>
</div>
</div>
</body>
</html>
js:
<script>
var app = angular.module('MyForm', ['ui.bootstrap', 'ngResource']);
app.controller('myCtrl', function ($scope) {
$scope.predicate = 'name';
$scope.reverse = true;
$scope.currentPage = 1;
$scope.order = function (predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
$scope.students = [
{ name: 'Kevin', age: 25, gender: 'boy' },
{ name: 'John', age: 30, gender: 'girl' },
{ name: 'Laura', age: 28, gender: 'girl' },
{ name: 'Joy', age: 15, gender: 'girl' },
{ name: 'Mary', age: 28, gender: 'girl' },
{ name: 'Peter', age: 95, gender: 'boy' },
{ name: 'Bob', age: 50, gender: 'boy' },
{ name: 'Erika', age: 27, gender: 'girl' },
{ name: 'Patrick', age: 40, gender: 'boy' },
{ name: 'Tery', age: 60, gender: 'girl' }
];
$scope.totalItems = $scope.students.length;
$scope.numPerPage = 5;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.students.indexOf(value);
return (begin <= index && index < end);
};
});
</script>
the data looks like this:
{"id":"11","name":"A Cooperativa","full_address":"Rua Bar\u00e3o de Viamonte 5, 2400-262 Leiria","location":"Leiria","council":"Leiria","country":"Portugal","lat":"39.7523042","lng":"-8.7825576","type":"various","facebook":"https:\/\/www.facebook.com\/pages\/A-Cooperativa-MerceariaTasca\/1559630810945570","facebook_id":"","gmaps":"https:\/\/www.google.pt\/maps\/place\/R.+Bar%C3%A3o+de+Viamonte+5,+2410+Leiria\/#39.7523042,-8.7825576,17z\/data=!3m1!4b1!4m2!3m1!1s0xd2273a29462db11:0x49a3f9a45cd9eb80","tripadvisor":"http:\/\/www.tripadvisor.com\/Restaurant_Review-g230085-d8154189-Reviews-A_Cooperativa-Leiria_Leiria_District_Central_Portugal.html","zomato":"","website":"","email":"cooperativa.tasca#hotmail.com","telephone":"912635324","active":"1","updated":"2015-08-17 09:01:05"}
I'm not sure if I did get this right, but:
You want to get the students from a web endpoint as json?
Then you would write something like this in angular:
app.controller('myCtrl', function ($scope, $http) {
...
$scope.students = [];
$scope.totalItems = 0;
$http.get('https://www.domain.com/api/resource')
.then(function success(response) {
$scope.students = response.data;
$scope.totalItems = $scope.students.length;
}, function failed(reason) {console.log(reason);})
...
});
But you should use separated files, services etc.
Related
I'm trying to do strict and progressive search on same fields in 2 different ways. That is when filter through drop down it should to a strict search and through input search it should do a progressive search. I tried to do it using <tr ng-repeat="x in names | filter:{name:name||dropdownFieldName:true, country:country}"> but is giving some error, Its not working.
Please check the bellow code and help me to solve this issue
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<select id="fieldDropdownHtml" ng-model="fieldSelected" ng-options="x.name for x in names" ng-change="searchOnField()">
<option value=""></option>
</select>
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr>
<td><p><input type="text" ng-model="name" ng-disabled="disablese"></p>
<td><p><input type="text" ng-model="country"></p>
</td>
</tr>
<tr ng-repeat="x in names | filter:{name:name||dropdownFieldName, country:country}">
<!--tr ng-repeat="x in names | filter:{name:name||dropdownFieldName:true, country:country}" -->
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.disablese = false;
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Jani1',country:'England'},
{name:'Jani',country:'Norway'}
];
$scope.searchOnField = function() {
var e = document.getElementById("fieldDropdownHtml");
var strUser = e.options[e.selectedIndex].text;
angular.forEach($scope.names, function(dsElement) {
if (dsElement.name === strUser) {
$scope.dropdownFieldName = dsElement.name;
console.log($scope.dropdownFieldName);
}
if(document.getElementById('fieldDropdownHtml').selectedIndex == 0){
$scope.dropdownFieldName= undefined;
}
if(document.getElementById('fieldDropdownHtml').selectedIndex != 0){
$scope.disablese = true;
$scope.name = "";
}
else{
$scope.disablese = false;
}
});
}
});
</script>
</body>
</html>
Additional to Allabakash answer, you can use this code to your controller to make it simpler and minimize vanilla JavaScript codes:
angular
.module('myApp', [])
.controller('namesCtrl', function ($scope) {
$scope.disablese = false;
$scope.names = [
{ name: 'Jani', country: 'Norway' },
{ name: 'Carl', country: 'Sweden' },
{ name: 'Margareth', country: 'England' },
{ name: 'Hege', country: 'Norway' },
{ name: 'Joe', country: 'Denmark' },
{ name: 'Gustav', country: 'Sweden' },
{ name: 'Birgit', country: 'Denmark' },
{ name: 'Jani1', country: 'England' },
{ name: 'Jani', country: 'Norway' }
];
$scope.searchOnField = function () {
if ($scope.fieldSelected) {
$scope.dropdownFieldName = $scope.fieldSelected.name;
$scope.name = null;
$scope.disablese = true;
} else {
$scope.dropdownFieldName = undefined;
$scope.disablese = false;
}
};
});
You can achieve this by separating filters like below.
ng-repeat="x in names | filter:{name:name||dropdownFieldName}: disablese | filter: { country:country }"
Hope this helps.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<select id="fieldDropdownHtml" ng-model="fieldSelected" ng-options="x.name for x in names" ng-change="searchOnField()">
<option value=""></option>
</select>
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr>
<td><p><input type="text" ng-model="name" ng-disabled="disablese"></p>
<td><p><input type="text" ng-model="country"></p>
</td>
</tr>
<tr ng-repeat="x in names | filter:{name:name||dropdownFieldName}: disablese | filter: { country:country }">
<!--tr ng-repeat="x in names | filter:{name:name||dropdownFieldName:true, country:country}" -->
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.disablese = false;
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Jani1',country:'England'},
{name:'Jani',country:'Norway'},
{name:'Jani',country:'Harway'}
];
$scope.searchOnField = function() {
var e = document.getElementById("fieldDropdownHtml");
var strUser = e.options[e.selectedIndex].text;
angular.forEach($scope.names, function(dsElement) {
if (dsElement.name === strUser) {
$scope.dropdownFieldName = dsElement.name;
console.log($scope.dropdownFieldName);
}
if(document.getElementById('fieldDropdownHtml').selectedIndex == 0){
$scope.dropdownFieldName= undefined;
}
if(document.getElementById('fieldDropdownHtml').selectedIndex != 0){
$scope.disablese = true;
$scope.name = "";
}
else{
$scope.disablese = false;
}
});
}
});
</script>
</body>
</html>
I want to take the value of the filter input, is that possible? I have this table
with that code
<td data-title="'Transaccion'" filter="{id_transaccion: 'text'}" sortable="'id_transaccion'">
<span editable-text="pago.id_transaccion" e-name="id_transaccion" e-form="rowform" e-required="">{{pago.id_transaccion}}</span>
</td>
I have the filter attr, and I tested everything trying to get the value of the field transacction of the filter, but nothing works, anyone knows how to get it?
You can access the filters object with the method filter() of the instance of NgTableParams. If you get your table data with 'getData' instead of 'dataset' (as in the example below), everytime you change a filter value the function 'getData' will be executed and you can access your updated filter object there and make any data manipulation you want. Look at the code of the snippet below:
(function() {
"use strict";
var app = angular.module("myApp", ["ngTable"]);
app.controller("demoController", demoController);
demoController.$inject = ["NgTableParams", "$filter"];
function demoController(NgTableParams, $filter) {
var self = this;
var simpleList = [{
name: 'ww',
age: 234,
money: 45,
country: 'pan'
}, {
name: 'xx',
age: 24,
money: 55,
country: 'col'
}, {
name: 'yy',
age: 454,
money: 82,
country: 'cr'
}, {
name: 'zz',
age: 345,
money: 34,
country: 'mex'
}];
self.tableParams = new NgTableParams({
// initial filter
filter: {
name: "w"
}
}, {
getData: getData
});
function getData(params) {
/*****************************
* LOOK HERE!!!!!
******************************/
// The filter object
var filterObj = params.filter();
self.ngTableFilters = filterObj;
// Filtering the list using the filter object...
var filteredList = $filter('filter')(simpleList, filterObj);
return filteredList;
}
}
})();
(function() {
"use strict";
angular.module("myApp").run(setRunPhaseDefaults);
setRunPhaseDefaults.$inject = ["ngTableDefaults"];
function setRunPhaseDefaults(ngTableDefaults) {
ngTableDefaults.params.count = 5;
ngTableDefaults.settings.counts = [];
}
})();
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
<div ng-app="myApp" class="container-fluid">
<div class="row" ng-controller="demoController as demo">
<div class="col-xs-12">
<h3>ngTable directive</h3>
<table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="row in $data">
<td data-title="'Name'" filter="{name: 'text'}">{{row.name}}</td>
<td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
<td data-title="'Money'" filter="{money: 'number'}">{{row.money}}</td>
</tr>
</table>
</div>
<div class="col-xs-12">
<h3>Filters:</h3>
<pre>{{ demo.ngTableFilters | json }}</pre>
</div>
</div>
</div>
This is my code http://plnkr.co/edit/oxtojjEPwkKng9iKkc14?p=preview
And I want to save object of sport and punctuation in an array, if there are one or more sports selected save it in the array like this:
likes[
{sport: 'futball', points: 1}, {sport: 'tennis', points: 1}
]
thanks!
You have to keep practicing your English a little bit more (you can ask me on the comment section in spanish if you are strugling)
I think what you are trying to do is to have a single select to be able to choose the sport and score,
Html:
<body ng-app="myapp">
<div class="main-container" ng-controller="main" ng-init="darr.dept=dept2">
<div class="client-area">
<label fo.table-container tabler="txt">Score</label>
<input type="text" id="name-txt" placeholder="Assign the score" ng-model="name">
<br />
Sport
<select ng-model="dept" ng-options="deptOpt.value as deptOpt.name for deptOpt in deptList"></select>
<br />
<button ng-click="add()">Add Item</button>
<table id="tab">
<thead>
<tr id="trow">
<th>Score</th>
<th>Sport</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ar in arr">
<td>{{ar.name}}</td>
<td>{{ar.dept}}</td>
<td>
<button ng-click="del($index)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
js:
var app = angular.module("myapp", []);
app.controller('main', function ($scope) {
$scope.arr = [];
$scope.deptList = [{
name: 'Football',
value: 'football'
}, {
name: 'Tennis',
value: 'Tennis'
}, {
name: 'Baseball',
value: 'baseball'
}];
$scope.dept = "football";
$scope.name = "";
$scope.add = function () {
this.arr.push({
name: this.name,
dept: this.dept
});
};
$scope.del = function (ind) {
this.arr = this.arr.splice(ind, 1);
};
$scope.editStudent = function(student) {
console.log(student);
};
});
https://jsfiddle.net/azweig/v5kbsudy/1
In the following code, when I click on the "Delete All Expired" button, why does it only delete 3 of the 4 customer objects where status=expired?
<html ng-app="mainModule">
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="mainController" style="padding: 20px 0">
<div class="col-lg-4">
<table class="table-striped table-bordered table table-hover">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Status</th>
</tr>
<tr ng-repeat="customer in customers| orderBy: 'lastName'">
<td>{{customer.firstName}}</td>
<td>{{customer.lastName}}</td>
<td ng-click="switchStatus(customer)" ng-class="{'text-danger': customer.status == 'expired'}" class="prohibitSelectionClickable">{{customer.status}}</td>
</tr>
</table>
<button ng-click="deleteAllExpired()">Delete all expired</button>
</div>
<script>
var mainModule = angular.module('mainModule', []);
function mainController($scope) {
$scope.customers = [
{id: 1, status: 'expired', firstName: 'Joe', lastName: 'Thompson'},
{id: 2, status: 'expired', firstName: 'Hank', lastName: 'Howards'},
{id: 3, status: 'expired', firstName: 'Clara', lastName: 'Okanda'},
{id: 4, status: 'active', firstName: 'Thomas', lastName: 'Dedans'},
{id: 5, status: 'expired', firstName: 'Zoe', lastName: 'Frappe'}
];
$scope.deleteAllExpired = function () {
angular.forEach($scope.customers, function (customer, index) {
if (customer.status == 'expired') {
$scope.customers.splice(index, 1);
}
});
};
}
</script>
</body>
</html>
Most probably because splice() mutates the array, and angular.forEach() uses invalid indexes. Better implementation IMO:
$scope.deleteAllExpired = function () {
var newCustomers = [];
angular.forEach($scope.customers, function (customer) {
if (customer.status !== 'expired') {
newCustomers.push(customer);
}
});
$scope.customers = newCustomers;
};
You may even get a performance gain, not so many mutations (it will probably be negligible for small datasets though).
It is because the array you iterate changes (due to deleting) during the iterations and will not go through all the items. Change the method to this:
$scope.deleteAllExpired = function () {
var i = $scope.customers.length;
while (i--) {
var customer = $scope.customers[i];
if (customer.status == 'expired') {
$scope.customers.splice(i, 1);
}
}
};
I have gone through a plunker link given below, which is passing 2 static data from JSON, I want to use ng-repeat and show all the data, and the result should change accordingly.
Plunker Link is : (http://plnkr.co/edit/5WF6FxvwocVBqhuvt4VL?p=preview)
code is given below
<!DOCTYPE html>
<html data-ng-app="App">
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body data-ng-controller="TestController">
<table id="hotels">
<tr>
<th>Hotel Name</th>
<th>Star Rating</th>
<th>Hotel type</th>
<th>Hotel Price</th>
</tr>
<tr data-ng-repeat="hotel in hotels | filter:search.type1 | filter:search.type2">
<td>{{hotel.name}}</td>
<td>{{hotel.star}}</td>
<td>{{hotel.type}}</td>
<td>{{hotel.price}}</td>
</tr>
</table>
<br/>
<h4>Filters</h4>
<input type="checkbox" data-ng-model='search.type1' data-ng-true-value='luxury' data-ng-false-value='' /> Luxury
<input type="checkbox" data-ng-model='search.type2' data-ng-true-value='double suite' data-ng-false-value='' /> Double suite
</body>
</html>
script is given below
// Code goes here
var iApp = angular.module("App", []);
iApp.controller('TestController', function($scope)
{
$scope.search=[];
$scope.hotels = [
{
name: 'the taj hotel',
star: 5,
type: 'luxury',
price: 5675
},
{
name: 'vivanta Palace',
star: 5,
type: 'luxury',
price: 8670
},
{
name: 'aviary',
star: 4,
type: 'double suite',
price: 3000
},
{
name: 'dummy',
star: 4,
type: 'dummy',
price: 33333100
},
{
name: 'good guest',
star: 3,
type: 'double suite',
price: 3500
},
{
name: 'the ramada',
star: 3,
type: 'luxury',
price: 7500
}
];
});
I think that you want something like this:
PLUNKER
Your HTML:
<table id="hotels">
<tr>
<th>Hotel Name</th>
<th>Star Rating</th>
<th>Hotel type</th>
<th>Hotel Price</th>
</tr>
<tr data-ng-repeat="hotel in hotels | filter:filertHotelTypes">
<td>{{hotel.name}}</td>
<td>{{hotel.star}}</td>
<td>{{hotel.type}}</td>
<td>{{hotel.price}}</td>
</tr>
</table>
<br/>
<h4>Filters</h4>
<label ng-repeat="hotelType in hotelTypes">
<input type="checkbox" value="{{hotelType}}" ng-checked="hotelTypefilter.indexOf(hotelType) > -1" ng-click="toggleSelection(hotelType)">
{{hotelType}}
</label>
Your controller:
$scope.hotelTypefilter=[];
$scope.hotelTypes = ['luxury','double suite','dummy'];
$scope.toggleSelection=function toggleSelection(hotelType) {
var idx = $scope.hotelTypefilter.indexOf(hotelType);
if (idx > -1)
$scope.hotelTypefilter.splice(idx, 1);
else
$scope.hotelTypefilter.push(hotelType);
};
$scope.filertHotelTypes = function(value, index){
return $scope.hotelTypefilter.length==0 || $scope.hotelTypefilter.indexOf(value.type)>-1;
}