How to use ng-repeat - javascript

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>

Related

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>

how to reload the dynamic table every 1 second in the controller in angular js?

I'm fetching data from api and populating in the table i need to relaod the table only in every 1 second , i tried using $timeout but im getting error saying -
$scope.tableParams.reload();//TypeError: Cannot read property 'reload' of undefined
code
<div align="center">
<div ng-app="myApp" ng-controller="customersCtrl">
<table ng-table="tableParams">
<tr>
<td>device id</td>
<td>device unique id</td>
<td>access status</td>
<td>current time</td>
</tr>
<tr>
<td>{{ access.id }}</td>
<td>{{ access.devid }}</td>
<td><img ng-src="{{statusValues[access.status]}}" /></td>
<td>{{ access.CurrentTime }}</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http, $timeout) {
$http.get("http://example.com/get")
$scope.reloadTable = function () {
$timeout(function () {
$scope.tableParams.settings().$scope = $scope;
$scope.tableParams.reload();
$scope.reloadTable();
}, 1000)
};
$scope.reloadTable();
});
</script>
Hi Your trying to reload the params using reload method, but it seems that reload() method is working with $route concept to update the url, based on params.
and insted of $timeout , try with $interval,
I've done some modification here, Plesae take a look and This may helpful
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http, $interval) {
$scope.fn = function(){
$http.get("https://jsonplaceholder.typicode.com/posts")
.then(function(data){
console.log(data.data)
$scope.Tdata = data.data;
})
}
$interval(function () {
$scope.fn()
}, 1000)
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller="customersCtrl">
<div align="center">
<div ng-app="myApp" ng-controller="customersCtrl">
<table ng-table="tableParams">
<tr>
<td>device id</td>
<td>device unique id</td>
<td>access status</td>
<td>current time</td>
</tr>
<tr ng-repeat="d in Tdata">
<td>{{ d.id }}</td>
<td>{{ d.title }}</td>
<td><img ng-src="{{}}" /></td>
<td>{{ d.body }}</td>
</tr>
</table>
</div>
</div>
</div>
just add the following code line into my code after tableParams instance creation.
$scope.tableParams.settings().$scope = $scope;
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http, $timeout, $interval) {
getData = function(){
$http.get("http://example.com/get")
.success(function(data) {
$scope.tableParams.settings().$scope = $scope;
$scope.reloadTable();
})
.error(function(data, status) {
console.error(status);
})
}
$interval(function (){
getData();
}, 1000);
</script>

Angularjs ng-repeat error

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

Angularjs - How can i show my Json that the element retrieve from 2 array?

I'm trying to show the value of my Json element,
"Baru20151","Lama20151","Baru20152","Lama20152",
but i have no idea how to.
The element is retrieve from 2 array,
in "Baru20151" elements, "20151" is retrieved from "isimasa" array in my Json file.
HTML :
<div ng-app="myApp" ng-controller="RegistrationCtrl">
<h4 style="text-align:center">REGISTRASI MAHASISWA PENDAS</h4>
<table class="table table-striped table-bordered table-hover">
<tr>
<td ng-repeat-start="Isimasa in myDataIsimasa" align="center">Baru</td>
<td align="center">Lama</td>
</tr>
<tr ng-repeat="Pendas in DataPendas" >
<td ng-repeat-start="Isimasa in DataIsimasa" align="center">{{Pendas.Baru{{Isimasa.masa}}}}</td>
<td align="center">{{Pendas.Lama{{Isimasa.masa}}}}</td>
</tr>
</table>
</div>
Controller:
<script>
var app = angular.module('myApp', []);
app.controller('RegistrationCtrl', function($scope, $http) {
$http.get("json.json").then(function (response) {
$scope.DataPendas = response.data.pendas;
$scope.DataIsimasa = response.data.isimasa;
$scope.Data = response.data;
});
});
</script>
Json :
{"name":"ACEH",
"isimasa":[{"masa":"20151"},{"masa":"20152"}],
"column":9,
"pendas":[
{"kode":"121","prodiname":"PGPAUD", "Baru20151":22,"Lama20151":0,
"Baru20152":22,"Lama20152":20}
]}
Try this..
Controller:
<script>
var app = angular.module('myApp', []);
app.controller('RegistrationCtrl', function($scope, $http) {
$http.get("json.json").then(function (response) {
$scope.DataPendas = response.data.pendas;
//console.log($scope.DataPendas);
$scope.DataIsimasa = response.data.isimasa;
var isimasa = $scope.DataIsimasa;
console.log(isimasa);
$scope.Data = response.data;
$scope.constructJson = constructJson;
function constructJson(theKey, jsonKey, jsonObj){
console.log(theKey, jsonKey);
var newKey = theKey + jsonKey;
var newValue = jsonObj[newKey];
console.log(newValue);
return newValue;
}
});
});
</script>
HTML:
<div ng-app="myApp" ng-controller="RegistrationCtrl">
REGISTRASI MAHASISWA PENDAS
<table class="table table-striped table-bordered table-hover">
<tr ng-repeat-start="Isimasa in DataIsimasa">
<td>{{Isimasa.masa}}
<div ng-repeat="Pendas in DataPendas">
Baru{{Isimasa.masa}} : {{ constructJson("Baru",Isimasa.masa, Pendas ) }}<br/>
Lama{{Isimasa.masa}} : {{ constructJson("Lama",Isimasa.masa, Pendas ) }}
</div>
</td>
</tr>
<tr ng-repeat-end>
</tr>
</table>

My Angular view is not updated with data form server

I am using Angularjs and i make a call form server to retrieve data. Data are successfully retrieved but my view is not updated. I don't understand why. Here are the code i use.
Angularjs and html code :
<div class="row custom-margin" ng-controller="ListCtlr" ng-init="initData()">
<form class="form-inline" role="form" id="formId" name="formId">
<div class="form-group">
<label for="searchInput">Data to search</label>
<input ng-model="searchInput" placeholder="Enter term to search">
</div>
<button type="submitSearch" class="btn btn-primary" ng-click="search()">Go</button>
</form>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr class="info">
<th colspan="4" class="centertext">Name</th>
<th colspan="3" class="centertext">Age</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in persons">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Controller code :
function ListCtlr($scope, $http, $location,$filter) {
$scope.formId = {searchInput: ''};
$scope.search = function () {
var url='server/search/'+this.searchInput;
$http.get(url)
.success(function (data) {
$scope.persons = data;
})
.error(function(data){
$scope.error = data;
});
};
}
When i inspect the data retrieved form server i get the following JSON data :
[{"name":"John","age":12},{"name":"Mary","age":25},{"name":"Garry","age":28}]
What's missing please ?
Change
<tr ng:repeat="person in persons">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
to
<tr ng-repeat="person in persons">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
The problem is that your ListCtlr controller is placed on a div that does not contain your ng-repeat.
To solve this, create an outer div, put the ng-controller on that div:
<div ng-controller="ListCtlr">
... (place contents of your html here) ...
</div>
This ensures that ListCtlr's scope includes the ng-repeat.
Note: Be sure to remove the ng-controller="ListCtlr" defined in your inner div.

Categories