I want to show specific elements from objects I receive from a service using ng-repeat. When I use {{account}} it renders all the elements, but when I try for example {{account.idType}} it shows nothing. What's going on?
Here is my HTML
<table>
<thead>
<tr>
<th>List of Accounts</th>
</tr>
</thead>
<tbody ng-repeat="account in accounts" ng-if="account.idType != 0">
<tr>
<td>{{account.idType}}</td>
<td>{{account.linkRel}}</td>
<td>{{account.linkURI}}</td>
<td><input type="button" ng-click="editAccount(account.idType)" value="edit"></td>
</div>
and this is the controller:
rest.controller('accountListCtrl',['$scope','$resource','$location','$parse','$routeParams',
function($scope,$resource, $location, $parse,$routeParams)
{
var Account = $resource('http://localhost\\:8085/WSAT/account/');
$scope.accounts = Account.get();
}]);
the response I get from the service is this:
{"linklist":[{"idType":"0","linkRel":"Get all accounts","linkType":"Sibling","linkURI":"http://localhost:8085/WSAT/account","linkVerb":"GET"},{"idType":"0","linkRel":"Create a new account","linkType":"Sibling","linkURI":"http://localhost:8085/WSAT/account","linkVerb":"POST"},{"idType":"7","linkRel":"try","linkType":"Child","linkURI":"http://localhost:8085/WSAT/account/7","linkVerb":"GET"},{"idType":"9","linkRel":"try234","linkType":"Child","linkURI":"http://localhost:8085/WSAT/account/9","linkVerb":"GET"}]}
Because $resource is asynchronous (It returns a promise).
Replace $scope.accounts = Account.get() by
Account.get().then(function(data){
$scope.accounts=data.result;
});
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.
I just want to load a particular div on some actions in angular js.
<div class="row">
<div class="col-md-12">
<div id = "div_1" class="table-responsive" ng-controller="usercontroller" ng-init="displayData() ">
<table class="table table-hover table-bordered">
<thead align="center">
<tr>
<th>Service Request Number</th>
<th>Name of service request</th>
<th>Date of request</th>
<th>Closure date</th>
<th>Current state</th>
<th>Current owner</th>
<th>Link to share point folder</th>
<th>Schedule variance</th>
<th align="center">Details</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in service track by $index">
<td><span ng-bind="x.id"></span></td>
<td><span ng-bind="x.sales_force_id"></span></td>
<td><span ng-bind="x.submission_date"></span></td>
<td><span ng-bind="x.closure_deadline"></span></td>
<td><span ng-bind="x.item_status"></span></td>
<td></td>
<td></td>
<td></td>
$scope.displayData = function()
{
alert($scope.firstRole);
alert("nishant singh");
if(empIVal == 1 && $scope.firstRole == 'Initiator' ){
alert("i am a initiator");
$http.get("commonGet.jsp?sqlStr=select * from service_request.service_request_data where emp_id="+empHidVal+ " order by id desc")
.then(function(response){
$scope.service = response.data;
});
}
Here I want to load the div again when the displayFunction() is called and response is been returned. Also, the response is JSON object. I am able to call the function using ng-change directive and also able to get the desired JSON object, but I don't know how to load the div again after the response.
wrap your assignment to service variable in timeout so that angular is aware of the changes
$timeout(function(){
$scope.service = response.data;
});
Thus your whole method becomes something like this.
$http.get("commonGet.jsp?sqlStr=select * from service_request.service_request_data where emp_id="+empHidVal+ " order by id desc")
.then(function(response){
$timeout(function(){
$scope.service = response.data;
});
});
}
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 = [];
I am trying to access a the data in a json object using angular but i finding it difficult to this at the moment and hopefully you can help me here.
so i have a function in my controller like this:
var vm = this;
vm.getData = getData;
vm.data = [];
function getData() {
var promise = appService.getAll(vm.query);
promise.then(function(response) {
vm.data = response.data,
console.log(vm.data);
},
function(error) {
$log.error("an error here", error);
});
}
and my view goes something like this:
<div>
<table class="table">
<tr >
<th> Department</th>
</tr >
<tr ng-repeat="n in vm.data">
<td>{{n.sectionName}} </td>
</tr>
</table>
</div>
Everything works .. i retrieve my json object as required .. but its just accessing them is where i am having in issue as the above context in my view is not dispplayed ..
so in my example above i am trying to acess a json with the heaser of "sectionName" and displaying it in my view.
here is a visual of of the json object in my console ...
Thank you for your time
If results is the data you need to display, then you should adjust your markup to be this:
<tr ng-repeat="n in vm.data.results">
<td>{{n.sectionName}} </td>
</tr>
You are looping over the object itself. Instead, you have to loop over the results array inside the object.
<div>
<table class="table">
<tr >
<th> Department</th>
</tr >
<tr ng-repeat="n in vm.data.results">
<td>{{n.sectionName}} </td>
</tr>
</table>
</div>
Part of a project I am working on is listing members, members companies, etc... I used $http within my controller to connect to a JSON file to get everything wired up and test functionality. I am using ng-repeat to populate the page and ng-scope to allow visitors to search the listings.
Everything worked as expected until I wired up Firebase to hold the data. Again, the data populates the page, but now my ng-model is broke and there's no way to search the listings. My Angular skills are still being polished, to say the least, so I'm sure I am having a noob moment. Any chance someone could take a look, I 'de be very grateful. Here is my code.
My Controller
.controller( 'AlliedCtrl', function AlliedCtrl( $scope, $firebase) {
var ref = new Firebase("https://mybase.firebaseio.com/members");
var sync = $firebase(ref);
var syncObject = sync.$asObject();
syncObject.$bindTo($scope, "members");
});
My HTML
<div class="search-sort">
<div class="row">
<div class="col-sm-12 col-xs-12">
<input ng-model="query" placeholder="Search and Sort by Keyword e.g. Accounting, Law, Mobile etc..." class="small">
</div>
</div>
</div>
<table class="table table-condensed table-responsive">
<thead>
<tr>
<th></th>
<th>Member Company</th>
<th>Company Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="m in members | filter:query">
<td style="width:250px"></td>
<td style="width:250px"><b>{{ m.company }}</b><br>{{ m.address }}<br>{{ m.address2 }}<br>{{ m.url }}<br><br>{{ m.name }}<br><em>{{ m.title }}</em><br>{{ m.phone }}<br><a mailto="{{ m.email }}">{{ m.email }}</a><br><br></td>
<td>{{ m.description }}</td>
</tr>
</tbody>
</table>
If you want to use ng-repeat on a collection from Firebase, you have to call $asArray and not $asObject + $bindTo.
So in your controller:
var ref = new Firebase("https://mybase.firebaseio.com/members");
var sync = $firebase(ref);
var syncObject = sync.$asArray();
$scope.members = syncObject;
If I understand your problem correctly, you need to wait until the syncObject has loaded so...
//Controller
var members = syncObject.$loaded().then(function() {
members.$bindTo($scope, "members");
}