I am unable to do a simple sort for my Smart Table Angular module. Shouldn't I just be able to add st-sort="propertyName" to my th?
JS:
var app = angular.module('app', []);
app.controller('SomeController', ['$scope', function($scope) {
$scope.items = [{color:'red'},{color:'blue'}];
}]);
Html:
<html ng-app="app"><body ng-controller="SomeController">
<table st-table="items">
<thead>
<tr>
<th st-sort="color">Color</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{item.color}}</td>
</tr>
</tbody>
</table>
</body></html>
If you click the Colors th, nothing happens and the data does not sort. What am I missing? Live demo here: http://jsbin.com/ganine/2/edit
You should add a smart-table module dependency to you app module like this:
var app = angular.module('app', ['smart-table']);
See working example.
You need to load the smart-table script and add the 'smart-table' module reference to your app module definition.
var app = angular.module('app', ['smart-table']);
You can see my changes in jsbin - http://jsbin.com/bunokerife/3/edit
Related
Please help. I am new at angularjs, I want to bind json data into div as list using angularjs
Sample Data
"[{"T_FORM_CODE":"T12040"},{"T_FORM_CODE":"T18025"},{"T_FORM_CODE":"Q12014"},{"T_FORM_CODE":"R12039"}]"
Json Data :
const HEROES = [
{"T_FORM_CODE":"T12040"},{"T_FORM_CODE":"T18025"},{"T_FORM_CODE":"Q12014"},{"T_FORM_CODE":"R12039"}
];
Template :
<tr *ngFor="let hero of heroes">
<td>{{hero.T_FORM_CODE}}</td>
</tr>
do like this:
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in array">
<td>{{x.T_FORM_CODE}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.array = [{"T_FORM_CODE":"T12040"},{"T_FORM_CODE":"T18025"},{"T_FORM_CODE":"Q12014"},{"T_FORM_CODE":"R12039"}];
});
</script>
you can use ng-repeat.
you can see plunker
<div ng-repeat ="dr in data">
{{dr.column}}
</div>
Plunker
I am using angular in my mvc project.
I have added the following js file and called it MyApp.js
(function () {
//Create a Module
var MyApp = angular.module('MyApp', ['ngRoute']); // Will use ['ng-Route'] when we will implement routing
})();
On my _Layout.cshtml I have added ng-app to the body tag
<body ng-app="MyApp">
.....
Code
.....
</body>
On the view I want to display the angular object I have added:
#Scripts.Render("~/bundles/angular")
<script src="../../Scripts/MyApp.js" type="text/javascript"></script>
<script src="~/Scripts/AngularController/BudgetAndDetails.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('body').on('click', '.CX span', function () {
//When Click On + sign
if ($(this).text() == '+') {
$(this).text('-');
}
else {
$(this).text('+');
}
$(this).closest('tr') // row of + sign
.next('tr') // next row of + sign
.toggle(); // if show then hide else show
});
});
</script>
<div ng-controller="BudgetAndDetails">
<table class="tableData" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th></th>
<th>Budget Name</th>
<th>Year</th>
<th>Month</th>
</tr>
</thead>
<tbody ng-repeat="O in budgetdetails">
<tr ng-class-even="'even'" ng-class-odd="'odd'">
<td class="CX"><span>+</span></td>
<td>{{O.budget.BudgetName}}</td>
<td>{{O.budget.Year}}</td>
<td>{{O.budget.monthname.MonthName1}}</td>
</tr>
<tr class="sub">
<td></td>
<td colspan="5">
<table class="tableData" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>Category</th>
<th>Subcateogry</th>
<th>Amount</th>
</tr>
<tr ng-repeat="a in O.budgetdetails" ng-class-even="'even'" ng-class-odd="'odd'">
<td>{{a.category.CategoryName}}</td>
<td>{{a.subcategory.SubCategoryName}}</td>
<td>{{a.Amount}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
In my bundles I added the following code:
bundles.Add(new ScriptBundle("~/bundles/angular").Include(
"~/Scripts/angular.js",
"~/Scripts/angular-route.js"));
However every time i run the program I get the error
Error: [$injector:nomod] Module 'MyApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.3/$injector/nomod?p0=MyApp
I know I an not misspelling it I read it could be an issue with the order of my scripts. I have tried several alternatives but can't find the problem.
Could someone help me?
You include MyApp.js in your view, not in my_Layout.cshtml.
Try to include it at the same level as your <body>. Angular try to load you app before it is included, which leads to the error. Of course, the part #Scripts.Render("~/bundles/angular") should be in the my_Layout.cshtml too.
I remember that you can have this error if you include twice the same module, make sure you are not inculding twice your MyApp module.
I have also faced same issue and in my case it was just something in controller.
I have found that there is a encoding problem with my JSON. If you face the same issue try to empty your controllers and and see if there is a syntax or encoding error.
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 = [];
Hi I am not able to render table using bootstrap-table and angular. here is my code, I think I need to call bootstrap-table init method in angular ajax call. Can some one guide me on how to do this..?
angular
.module('reports')
.controller(
'ReportCtrl',
[
'$scope',
'$http',
'ngProgress',
function($scope, $http, ngProgress) {
var vm = this;
vm.mdp = {};
vm.mdp.data = [];
vm.mdp.columns = [];
$scope.submit = function() {
var report = $scope.tab;
$http.post('/reports/cmd/getData', {
report : report,
date : createdAfter
}).success(function(data) {
vm.mdp.data = data;
$.each(data[0], function(key, value){
vm.mdp.columns.push(key);
});
}).error(function(error) {
alert(error);
});
};
} ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mdp" class="panel" ng-controller="ReportCtrl as report" ng-show="panel.isSelected('mdp')">
<table data-toggle="table" data-show-columns="true" data-search="true" data-show-export="true" data-pagination="true" data-height="299">
<thead>
<tr>
<th ng-repeat="c in report.mdp.columns" data-field= {{c}} >{{ c }}</th>
</tr>
</thead>
<tr ng-repeat="r in report.mdp.data">
<td ng-repeat="c in report.mdp.columns">{{ r[c] }}</td>
</tr>
</table>
</div>
Integrating Bootstrap Table with Angular is solved here:
https://github.com/wenzhixin/bootstrap-table/issues/165
https://github.com/AkramKamal/bootstrap-table-examples/tree/master/integrate
I have some minor changes in my implementation of this solution which I will upload to Github / JSFiddle shortly. But the links above will allow you to get going.
I am new to angularjs and trying to work with ng-repeat but somehow ng-repeat's key/value is not visible if I am trying to print it in nested tags
working:
<div>
<table>
<tr ng-repeat="prop in array">
<td><span ng-bind-html="prop.field1"></span></td>
</tr>
</table>
</div>
And below code is not working:-
<div ng-repeat="prop in array">
<table>
<tr>
<td><span ng-bind-html="prop.field1"></span></td>
</tr>
</table>
</div>
Updated:
var $app = angular.module('apps', ['ngSanitize']);
$app.controller('cntr', ['$scope', function($scope) {
$scope.guestList = [{
dob: '12/12/12'
}];
}]);
For html to show properly in angular js you have to 'sanitize' it, using the $sce provider from AngularJS. Read here: https://docs.angularjs.org/api/ng/service/$sce
In principle, before you bind your variable to html output, you have to sanitize it like this:
$scope.guest.sanitizedInput = $sce.trustAsHtml($scope.guest.res_addr1);
and html:
<td class="table-column-value res-addr1-value"><span ng-bind-html="guest.sanitizedInput"></span>