I'm busy trying to learn Angular+Typescript+bootstrap and I've stumbled on a problem I can't solve. I have an ng-repeat in a partial view:
<div>
<h1>Debtors</h1>
<table class="table table-hover">
<thead>
<tr>
<th>Debtor</th>
<th class="col-sm-1"></th>
<th class="col-sm-1"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Debtor in vm.Debtors">
<td>{{Debtor.Name}}</td>
<td><i class="fa fa-pencil fa-fw fa-lg"></i> Edit</td>
<td><i class="fa fa-trash-o fa-fw fa-lg"></i> Delete</td>
</tr>
</tbody>
</table>
With a controller:
module Controllers
{
export class DebtorsController
{
static $inject = ['$scope', '$http', '$modal'];
Debtors: Models.TradePartyModel[];
ModalService: ng.ui.bootstrap.IModalService;
constructor($scope: ng.IScope, $http: ng.IHttpService, $modal: ng.ui.bootstrap.IModalService)
{
this.ModalService = $modal;
$http.get("http://localhost:51263/api/debtors/1")
.success((Debtors) =>
{
this.Debtors = Debtors;
});
}
}
}
The routing is defined as:
$routeProvider.when('/Debtors/ViewDebtors', {
templateUrl: 'App/Views/Debtors/Debtors.html',
controller: Controllers.DebtorsController,
controllerAs: "vm"
});
This works perfectly fine in IE, it displays the table and all of the data, but this doesn't seem to work in FireFox or Chrome. I've checked fiddler and the data is coming back correctly, but the table is not showing.
Any Ideas? Thanks!
Okay, so after a few attempts at fixing this, Chrome decided to spit this error out:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
Enabling CORS on the server fixed my issue. Looks like its working on all browsers now.
Related
Hi Sir,
I would know how i can refresh my List after add , edit or delete operation with AngularJS .
i Post my Controller And my HTML code , it work but i must refresh all page for see the changes in DB. Ty for all request.
CONTROLLER:
angular.module('myApp').controller('controllerFilm', function(service , $scope ) {
var vm = this;
vm.allFilm = function() {
service.allFilm().then(
function(data){//success
vm.allFilm = data; // accounts list
},function(err){//error
console.log("errore di chiamata allFilm");
});
}
HTML:
<div ng-controller="controllerFilm as cf">
<button class="button" ng-click="cf.allFilm()">FILM MANAGER</button>
<br>
<br>
<div class="scroll">
<table class="blueTable">
<thead>
<tr>
<th>ID</th>
<th>TITLE</th>
<th>RELASE YEAR</th>
<th>LENGTH</th>
<th>EDIT</th>
<th>DELETE</th>
</tr>
</thead>
<tbody>
<tr ng-repeat =
"film in cf.allFilm | orderBy : '-filmId' | limitTo : 10">
<th>{{film.filmId}}</th>
<th>{{film.title}}</th>
<th>{{film.relaseYear}}</th>
<th>{{film.length}}</th>
<th align="center"> <button
ng-click="cf.editFilm(film)">EDIT</button></th>
<th align="center"> <button
ng-click="cf.deleteFilm(film)">DELETE</button></th>
</tr>
</tbody>
</table>
PS : i don't post my function edit and delete..
Although changes should automatically be applied as AngularJs has two way binding but sometimes, it does cause this issue. try calling below scope method after setting data to the list.
$scope.$apply();
P.S: This is a way of forcefully executing digest cycle to reflect changes right away.
So I have been able to confirm that data is getting into my angular function, but have been banging my head against the wall trying to get it to the DOM. I am doing everything as simple as I can before I start creating my full crud.
I'm sure I am missing something simple, as I am a newb with Angular and most certainly utilizing $http through asp.net api.
(function () {
angular
.module('appmodule')
.controller('campaignservice', ['$scope', '$http', campaignservice])
function campaignservice($scope, $http) {
$http.get("http://localhost:58291/api/campaigns").then(function (data) {
$scope.campaigns = data;
});
};
})();
and then the html
<div>
<div ng-controller="campaignservice">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Pages </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="campaign in campaigns">
<td>{{campaign.Id}}</td>
<td>{{campaign.Name}}</td>
<td>{{campaign.Pages}}</td>
</tr>
</tbody>
</table>
</div>
Whats my deal?? My brain is bleeding.
From help in the comments I merely needed to make the following amendment.
$scope.campaigns = data.data;
im trying to add a resolve\promise to my project, so when you ask for a page it will load up only after receiving the json from the server.
this is my js code:
'use strict';
angular.module('myApp.show', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/show', {
templateUrl: 'views/show.html',
controller: 'showCtrl',
resolve: {
booksList: function ($http) {
return ($http.get('data/books.json')
.then(function (data) {
return data;
}));
}
}
});
}])
.controller('showCtrl', ['booksList', '$scope', function (booksList, $scope) {
$scope.books = booksList;
$scope.removeRow = function (productIndex) {
if (window.confirm("are you sure?")) {
$scope.books.splice(productIndex, 1);
}
}
}])
but this is what i get:
Error: [$injector:unpr] Unknown provider: booksListProvider <- booksList <- showCtrl
i kinda new to angular, but i followed several tutorials and while it worked in the video - i keep getting errors.
html:
<div class="table-responsive">
<div ng-app="myApp.show" ng-controller="showCtrl"> <!-- ctrl -->
<table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th st-sort="author">Author</th>
<th st-sort="date">Date</th>
<th st-sort="title">Title</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(bookIndex, book) in books">
<td class="col-md-3">{{ book.author }}</td>
<td class="col-md-3">{{ book.date | date }}</td>
<td class="col-md-4">{{ book.title | beutifyTitle }}</td>
<td class="col-md-1"><ng-include src="'views/partials/editBook.html'"></ng-include></td>
<td class="col-md-1"><button class="btn btn-warning" ng-click="removeRow()">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</div
You should be removing ng-controller="showCtrl" from your template. The reason being is, you are assing showCtrl via router already. But as you are again wrote ng-controller over inline template in that case it fails to get booksList resolve provider.
So I have an angular large web application, I have a few pages where I would want to use React to decrease the rendering time of the page (>3000 rows).
While searching for a solution I encountered this react plugin: http://bebraw.github.io/reactabular/
It lets me add a datatable with editing options and more - perfect for my needs.
The problem is that there is no easy way to include it in a prebuilt angular app.
Since I am new to react, I wanted to integrate it to my current angular application and I am searching the web for answers for a long time.
I am looking for a way to integrate it to my current code, that looks like the following:
var contactManager = angular.module('contactManager', ['ngMaterial','ngCookies','ngRoute','loadingOnAJAX','truncate','chart.js','xeditable','datatables','ui.calendar',
'xeditable', 'ngFileUpload','ui.bootstrap','html5.placeholder','luegg.directives','angular-svg-round-progress','ngProgress','ngDraggable'])
.run(function($rootScope, ngProgress, editableOptions) {
editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
$rootScope.$on('$routeChangeStart', function(ev,data) {
ngProgress.start();
});
$rootScope.$on('$routeChangeSuccess', function(ev,data) {
// Close menu on mobiles
ngProgress.complete();
});
})
.config(['$routeProvider','$locationProvider','$controllerProvider', function($routeProvider, $locationProvider, $controllerProvider) {
$routeProvider
.when('/index', {
templateUrl: 'partials/adminPanel.html',
controller: 'GroupPanelCtrl',
resolve: GroupPanelCtrl.resolve
})
.when('/profile/:id', {
templateUrl: 'partials/profile.html',
controller: 'ProfileCtrl'
})
.when('/group/:id/contacts', {
templateUrl: 'partials/group-contacts.html',
controller: 'GroupContactsInfo',
resolve: GroupContactsInfo.resolve
})
and the HTML:
<table datatable="ng" class="table table-bordered table-hover dataTable" role="grid" data-page-length="100">
<thead>
<tr>
<th></th>
<th>{{texts.fullName}}</th>
<th>{{texts.title}}</th>
<th>{{texts.mobile}}</th>
<th>{{texts.email}}</th>
<th>{{texts.department}}</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts track by $index">
<td ng-click="clickContact()">{{img}}
</td>
<td ng-click="clickContact()">
<a>
{{::contact.fullName}}
</a>
</td>
<td ng-click="clickContact()">
{{::contact.title|| ""}}
</td>
<td ng-click="clickContact()">
{{::contact.phoneFormatted}}
</td>
<td ng-click="clickContact()">
<span>
{{::contact.email}}
</span>
</td>
<td ng-click="clickContact()">
{{::contact.department|| ""}}
</td>
<td ng-click="deleteContact(contact, $index)">
<span class="fa fa-trash showOnhover"></span>
</td>
</tr>
</tbody></table>
If you need to call Angular code from a non-Angular app, try https://github.com/bcherny/ngimport. It lets you require/import Angular services from non-Angular files.
I want to show data in a table with angular js. I have tried many code but didn't solve my problem. Please help
Here is my code of View page..
Script code
<script>
var app = angular.module('myApp', []);
app.controller("customersCtrl", function($scope, $http) {
$http.get('<?php echo base_url('items/getRecords'); ?>').
success(function(data, status, headers, config) {
$scope.users = data;
});
});
</script>
HTML Code
<div ng-app="myApp" ng-controller="customersCtrl">
<table class="datatable table table-striped table-bordered" id="example">
<thead>
<tr>
<th>Product Code</th>
<th>Product Name</th>
</tr>
</thead>
<tbody>
<tr class="gradeA" ng-repeat="x in users">
<td style="text-align:center;">{{x.item_code}}</td>
<td style="text-align:center;">{{x.item_name}}</td>
</tr>
</tbody>
</table>
</div>
On Controller
public function getRecords(){
$this->load->model('item_model');
$data=$this->item_model->getTransactionData();
$this->output->set_header('Content-type: application/json');
$this->output->set_output(json_encode($data));
}
And finally on Model
public function getTransactionData(){
$query=$this->db->get('ac_itrans');
return $query->result();
}
Here is Json format of my result:
[{"itrans_id":"17","cocode":"OFLT","yearcode":"OFLT16","vseries":"S","vnum":"1","vdate":"2015-10-06","linenum":"1","item_type":"services","item_code":"26","item_name":"AC Repair"}];
Console log
please read tutorial from here, there is good way to do integrate angularjs with codeigniter php framework.
Apparently, code is correct.
you need to debug to check whether you are getting right JSON format. check this using console.log($scope.user)..instead of data.length.
use devtool to see what it returns. Put that snapshot here.
and don't you need to initialize the user !
$scope.user = [];