Angularjs ng-repeat error - javascript

Using Angularjs I can't do ng-repeat. First ng-repeat is working fine next is not working fine
Html code
<div class="col-xs-12" ng-app="myAns" ng-controller="myCtrl">
<table class="table">
<tr><td ng-repeat="fullname in team1_name">{{fullname}}</td></tr>
<tr><td ng-repeat="strike in team1_strike">{{strike}}</td></tr>
<tr><td ng-repeat="wickets in team1_wickets">{{wickets}}</td></tr>
</table>
</div>
Js code
<script>
var app = angular.module('myAns', []);
app.controller('myCtrl', function($scope, $http, $timeout) {
$timeout(function() {
$http({
url: 'cricketAnswerSuggestionApi.php',
method: "POST",
withCredentials: true,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
}).then(function (response) {
$scope.team1_name = response.data.team_1.fullname;
$scope.team1_strike = response.data.team_1.strike_rate;
$scope.team1_wickets = response.data.team_1.wickets;
});
});
});
</script>
JSON response link
https://jsfiddle.net/rijo/aapfa0sL/
Kindly anyone help how to print this value using angularjs ... Thanks for all

Because you have some duplicate data
Use track by $index for team1_strike and team1_wickets
Try this,
<div class="col-xs-12" ng-app="myAns" ng-controller="myCtrl">
<table class="table">
<tr>
<td ng-repeat="fullname in team1_name">{{fullname}}</td>
</tr>
<tr>
<td ng-repeat="strike in team1_strike track by $index">{{strike}}</td>
</tr>
<tr>
<td ng-repeat="wickets in team1_wickets track by $index">{{wickets}}</td>
</tr>
</table>
DEMO

Related

How to refresh ng-repeat table in AngularJS onclick button?

I can not update the value of the fields in the table with ng-repeat in any way onclick of a JS function, not even with a $ scope.apply () or with a timeout.
This is my HTML Code :
<div class="container">
<table class="table" id="table">
<thead class="table-bordered">
<th ng-repeat="(column_name,v) in response[0];">{{column_name}}<br>
<b>Class:</b>
<a ng-click="chooseClass(column_name)" id="{{column_name + 1}}">
{{kls_dict[column_name][0]}}
</a>
<br>
<b>Transfs:</b>
<a ng-click="chooseTrf(column_name)" id="{{column_name + 2}}">
{{kls_transfs[kls_dict[column_name][0]][0]}}
</a>
</th>
</thead>
<tbody>
<tr ng-repeat="row in response">
<td ng-repeat="value in row">{{value}}</td>
</tr>
</tbody>
</table>
</div>
And this is my JS function called in another HTML button component :
$scope.save_params = function (old_transformation, object) {
console.log("Enter save_params");
console.log("trfs", old_transformation)
console.log(object)
console.log('class', $rootScope.old_class)
console.log('columns_name', $rootScope.show_column_name)
to_send = {
'class': $rootScope.old_class,
'column_name': $rootScope.show_column_name,
"trfs": old_transformation,
"params": object
}
$rootScope.spm.close();
$http({
url: "/send_parameters",
method: "POST",
headers: {'Content-Type': 'application/json'},
data: JSON.stringify(to_send)
}).success(function (data) {
console.log(data)
}).error(function () {
console.error('Errore durante invio dei parametri');
$("#warning-alert").text("Errore durante l'invio dei parametri, riprovare o controllare i parametri specificati");
$("#warning-alert").fadeTo(2000, 500).slideUp(500, function () {
$("#warning-alert").slideUp(500);
});
});
};
I have already specify the AngularJS controller. Thanks everyone :)

how to get all data using select all checkbox in table?

Hi I am trying to get all data at a time when I will click on
checkbox, but data not coming but when i click one by one data id
coming. But my problem is how to get all data in checkbox all in
single click.
This is HTML code
<div id="wrapper" class="wrapper">
<div ng-include="'views/partials/navigator.html'"></div>
<div class="page-content-wrapper">
<div ng-include="'views/partials/header.html'"></div>
<div class="row">
<div class="col-md-12">
<h3>Student Information</h3>
<table id="example" class="table">
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Siblling</th>
<th>select all <input type="checkbox" id="slctAllDuplicateStd"/></th>
</tr>
<tr ng-repeat="data in vm.data">
<td>{{data.name}}</td>
<td>{{data.mobileNumber}}</td>
<td>{{data.isMigrated}}</td>
<td><input type="checkbox" ng-model="data.selected" class="duplicateRow" /></td>
</tr>
<tr>
<tr>
<button class ="button" ng-click="vm.process()">Process</button>
</tr>
</table>
<table class="table">
<tr>
<td colspan="4">
<pagination ng-if="renderpagination" page-number='{{vm.pageNumber}}' page-count="{{vm.pageCount}}" total-records="{{vm.totalRecords}}" api-url="duplicate-student"></pagination>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
This is javascript code
(function() {
angular
.module('vidyartha-coordinator')
.controller('StudentDuplicateAccountController', StudentDuplicateAccountController);
StudentDuplicateAccountController.$inject = ['$scope', 'ApiService', '$routeParams', '$http', '$location', '$timeout'];
function StudentDuplicateAccountController($scope, ApiService, $routeParams, $http, $location, $timeout) {
var vm = this;
//console.log($routeParams)
var page = $routeParams.page || 1;
// vm.data = [];
ApiService.getAll('student-duplicate-account?pageCount=5&pageNumber=' + page).then(function(response) {
//console.log("response::"+JSON.stringify(response));
vm.data = response.data.records;
vm.pageNumber = response.data.pageNumber;
vm.totalRecords = response.data.totalRecords;
vm.pageCount = response.data.pageCount;
$scope.renderpagination = true;
});
$("#slctAllDuplicateStd").click(function () {
$(".duplicateRow").prop('checked', $(this).prop('checked'));
// console.log('data:::'+JSON.stringify(data));
});
vm.process = function() {
vm.duplicateArray = [];
angular.forEach(vm.data, function(data){
if (data.selected) {
console.log("true")
vm.duplicateArray.push(data.tenantId);
vm.duplicateArray.push(data.mobileNumber);
vm.duplicateArray.push(data.schoolId);
vm.duplicateArray.push(data.classId);
}
});
console.log(vm.duplicateArray)
}
}
})();
I need all data at a time we i do check and press process button.
So please tell me where i should add some condition.
Am not sure why you are mixing jquery here you can do it as follow
vm.selectAll =function(){
angular.forEach(vm.data, function(data){
data.selected=true;
}
then in your checkbox
<th>select all <input type="checkbox" ng-click="vm.selectAll()"/></th>

failing to store data in local storage on table data change

New to using Angular local storage and I am unable to store data in local storage after data in the table changes.
I have read their instructions and have got their demo working in my own environment, but that is watching for change when a user types a character into an input field. I need it to watch for change in the <tr>/<td> and then store it in local storage.
When I log the value that is passed to the function it returns `null'. The data that populates the table is dynamic, changing depending on what item a user clicks on. Any idea why the data that is loaded into the table isn't being stored?
UPDATE
Included the service in which I gather the data on ng-click. The id displays in the table cell but:
I have had to use an <input> inside the table cell
No data is binded to the cell at the moment, but it needs to be
When I refresh the page, the table headings are displayed, but the data still disappears
Storing each individual item isn't the most efficient approach
I will label the two html templates I have. First one (list-patents.htm) is the table which displays the items. When a user clicks on an item, a second template (patent-item.htm) below the table loads into ng-view displaying relevant information.
var app = angular.module('myApp', ['ngRoute', 'ui.router', 'LocalStorageModule']);
app.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', 'localStorageServiceProvider', function($stateProvider, $locationProvider, $urlRouterProvider, localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('demoPrefix')
$urlRouterProvider
.when('', '/patents/list-patents')
.when('/', '/patents/list-patents')
.when('/patents', '/patents/list-patents')
.when('/transactions', '/transactions/current-transactions')
.otherwise('/patents/list-patents');
$stateProvider
.state("patents", {
url: "/patents",
templateUrl: "templates/patents/patent-nav.htm",
controller: "patentListCtrl"
})
.state("patents.list", {
url: "/list-patents",
templateUrl: "templates/patents/list/list-patents.htm",
controller: "patentListCtrl"
})
.state("patents.list.item", {
url: "/patent-item",
templateUrl: "templates/patents/list/patent-item.htm",
params: {
//load of params
},
controller: "patentItemCtrl"
})
}];
app.factory('loadPatentItemService', ['$http', '$timeout', function($http, $timeout) {
var factory = {};
var selectedItem = null;
factory.select = function(item) {
factory.storeSelect = [];
selectedItem = item;
factory.storeSelect.push(selectedItem)
factory.getPatent();
return [selectedItem];
}
}])
app.controller('patentItemCtrl', ['$scope', 'patentTabService', 'patentCheckboxService', 'localStorageService', 'loadPatentItemService', function($scope, patentTabFactory, patentCheckboxService, localStorageService, loadPatentItemService){
var testid = loadPatentItemService.storeSelect[0].id;
$scope.$watch('itemStorage', function(){ //watch for change, value passed to function
localStorageService.set('itemStorage', testid); //set value of property (what user typed in)
$scope.localStorageDemoValue = localStorageService.get('itemStorage');
});
$scope.$watch(function(){
return localStorageService.get('itemStorage');
}, function(){
$scope.itemStorage = testid;
});
}])
list-patents.htm
<div class="row">
<div class="col-md-12">
<table>
<thead>
<tr>
<td class="align-middle">Application No. </td>
<td class="align-middle">Client Ref</td>
<td class="align-middle">Cost now</td>
<td class="align-middle">Cost band end</td>
<td class="align-middle">Cost next</td>
<td class="align-middle">Renewal Date</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in patents">
<td ng-click="select(x)"><a ui-sref="patents.list.item({id: x.id, patentApplicationNumber: x.patentApplicationNumber, clientRef: x.clientRef, renewalStatus: x.renewalStatus, currentRenewalCost: x.currentRenewalCost, costBandEndDate: x.costBandEndDate, renewalCostNextStage: x.renewalCostNextStage, renewalDueDate: x.renewalDueDate, shortTitle: x.shortTitle, primaryApplicantName: x.primaryApplicantName, patentPublicationNumber: x.patentPublicationNumber, title: x.title, filingDate: x.filingDate, epoPatentStatus: x.epoPatentStatus})">{{x.applicationNumber}}</a></td>
<td ng-bind="x.clientRef"></td>
<td ng-bind="x.currentRenewalCost">$</td>
<td ng-bind="x.costBandEndDate"></td>
<td ng-bind="x.renewalCostNextStage"></td>
<td ng-bind="x.renewalDueDate"></td>
</tr>
</tbody>
</table>
<div ui-view></div>
</div>
</div>
patent-item.htm
<div class="col-md-6 text-xs-center" ng-controller="patentItemCtrl">
<h2>Application Number</h2>
<table class="table table-striped">
<thead>
<tr class="font-weight-bold">
<td>applicationNumber</td>
<td>clientRef</td>
<td>renewalStatus</td>
<td>costBandEndDate</td>
<td>renewalCostNextStage</td>
<td>renewalDueDate</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in patentItem">
<td><input type="text" ng-model="itemStorage" placeholder="Start typing..." readonly></td>
<td><input type="text" ng-model="x.clientRef" placeholder="Start typing..." readonly></td>
<td ng-bind="x.renewalStatus"></td>
<td ng-bind="x.costBandEndDate"></td>
<td ng-bind="x.renewalCostNextStage"></td>
<td ng-bind="x.renewalDueDate"></td>
</tr>
</tbody>
</table>
</div>

Angular js post/get in nested ng-repeat

I have a table of info generated by ng-repeat.
I want to add a feature to each row of table which gives user ability to see more detail of that specific record. I added another ng-model which gets the key of that row and asks server for more detail.
But controller cannot read this ng-model. my code is as below:
HTML:
<html ng-app = "myApp">
<head>
...
</head>
<body>
...
<div ng-controller = "AppCtrl">
...
<content>
<div class="general_detail">
<div ng-model = "docParam.docNo"></div>
<div class = "dialog" ng-repeat = 'doc in doclist'>
<table class = "detail">
<tbody>
...
<tr>
...
<td style="text-align: right">
<div ng-model = "docDetail.docNo"></div>
<a href="" ng-click="docDetail.docNo = doc.NO; docDetailP()" >More...</a>
</td>
<td>
<div ng-repeat = 'd in detailView'>
<p>
Rev : {{d.REV_NO}}
</p>
</div>
</td>
</tr>
...
</tbody>
</table>
</div>
</div>
</content>
...
</body>
</html>
Controller:
$scope.docDetailP = function() {
$http.post('/docQuery', $scope.docDetail);
docDetailG();
};
var docDetailG = function() {
$http.get('/docDetails').then(function(response) {
$scope.detailView = response.data;
});
};
Thanks in advance for your solutions.
These are the errors which you made,
<div ng-model = "docParam.docNo"></div>
ng-model will work for form elements
why do you assign docDetail.docNo = doc.NO; and then call the method. Instead you can pass as a parameter
Change the way of posting the value $http.post('/docQuery', $scope.docDetail);.
Have a look at the modified code.
HTML
<content>
<div class="general_detail">
<div ng-model = "docParam.docNo"></div>
<div class = "dialog" ng-repeat = 'doc in doclist'>
<table class = "detail">
<tbody>
...
<tr>
...
<td style="text-align: right">
<div ng-model = ""></div>
<a href="" ng-click="docDetailP(doc.NO)" >More...</a>
</td>
<td>
<div ng-repeat = 'd in detailView'>
<p>
Rev : {{d.REV_NO}}
</p>
</div>
</td>
</tr>
...
</tbody>
</table>
</div>
</div>
</content>
Your controller should be like
$scope.docDetailP=function (number) {
$http({
method: 'POST',
url: '/docQuery',
headers: {
'Content-Type': 'application/json'
},
data: number
})
.success(function (data, status, headers, config) {
successcallback(data);
})
.error(function (data, status, headers, config) {
$log.warn(data, status, headers, config);
})
$scope.docDetailG();
}
Be careful that my solution assumes that the web service endpoint recieves a number.

How to use ng-repeat

I have the following data that I want to use ng-repeat on:
{"data":[{"id":1,"namn":"Bryan","efternamn":"Karlsson"},{"id":2,"namn":"Kalle","efternamn":"Kula"},{"id":3,"namn":"Fisk","efternamn":"Fisksson"},{"id":4,"namn":"Daniel","efternamn":"Fisksson"}]}
Im trying to use it like this:
<div ng-controller="Test">
<tr ng-repeat="namn in test">
<td>{{namn}}</td>
</tr>
</div>
I have no idea why. Is it because of the "data" in the JSON-string?
Here is my controller:
as.controller('Test', function($scope, $http, $rootScope)
{
$http.get($rootScope.appUrl + '/nao/test/test')
.success(function(data, status, headers, config) {
$scope.test = data;
});
});
<div ng-controller="Test">
<tr ng-repeat="record in test.data">
<td>{{record.namn}}</td>
</tr>
</div>
<div ng-controller="Test">
<tr ng-repeat="namn in test.data">
<td>{{namn}}</td>
</tr>
</div>

Categories