I use nested ng-repeat to loop in all objects values.
<tr class="" ng-repeat="(position, values) in chartResult.realData track by $index">
<td>
<div ng-click="select(position)" ng-class="{selected: position===selectedItem}">
<a href ng-click="select(position)">
<span>{{position}}</span>
</a>
</div>
</td>
<td ng-repeat="val in values">
{{val}}
</td>
</tr>
Why nested loop doesn't work?
Updated
app.controller('Ctrl',['$log', '$rootScope', '$scope', '$http', '$timeout',
function ($log, $rootScope, $scope, $http, $timeout) {
$http({
//request
}).then(
function successCallback(response) {
//after parse response realData view something like this
var res = {realData:
name1:[1,2,4,0,1,23],
name2:[4,6,3,7,2,3],
...
}
$scope.chartResult = res;
}
}]);
After add track by $index to nested loop it work as well.
If you pasted it correctly realData is not an array.
But please show us what is in the realData.
Related
I'm trying to update a $scope variable onClick that populates a table from a local JSON file. So far my code is
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
$scope.update = function () {
// Load JSON data to $scope
$http({
method: 'get',
url: '/JSON/Info.json'
}).then(function (response) {
console.log(response, 'res');
$scope.friendz = response.data[1];
},function (error){
console.log(error, 'can not get data.');
});
}
});
<div ng-controller="myCtrl" class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<button class="dropdown-item" ng-click="update()">Action</button>
</div>
<div ng-controller="myCtrl">
<table border="1">
<tr>
<th>Name</th>
<th>Fax</th>
<th>Phone</th>
<th>Address</th>
<th>Attention</th>
<th>Submission</th>
</tr>
<tr>
<td ng-bind="friendz.Payee.Name"></td>
<td ng-bind="friendz.Payee.Fax"></td>
<td ng-bind="friendz.Payee.Phone"></td>
<td ng-bind="friendz.Payee.Address"></td>
<td ng-bind="friendz.Payee.Attention"></td>
<td ng-bind="friendz.Payee.SubmissionDate"></td>
</tr>
</table>
</div>
When I click my update button in the dropdown menu, I see the response is logged in the console, but the table fails to update onClick. Is there a function that I need to call to update the page in an asynchronous fashion when I click my button? When I use the http get function outside of my scope.update function, it works fine on page load.
You're creating two separate instances of your controller, since you have ng-controller="myCtrl" twice in the template.
So he controller handling the click is not the same one that holds the data displayed by the table. And their scope are not the same either: each controller instance has its own scope.
I'm trying to show the data from my database using ng-repeat. However when I try to retrieve the equipment data under system. It shows it as a json format. How do i retrieve the other nodes under equipments? Need help.
My Angular
/*global angular*/
var app = angular.module('input', ['ngRoute', 'firebase']);
app.config(['$routeProvider', function ($routeProvider) {
'use strict';
$routeProvider.when('/input', {
templateUrl: 'input/input.html',
controller: 'inputCtrl'
});
}]);
app.controller('inputCtrl', ['$scope', '$firebaseObject', '$firebaseArray', function ($scope, $firebaseObject, $firebaseArray) {
'use strict';
$scope.message;
$scope.writeUserData = function (equipment, system) {
firebase.database().ref('data/' + $scope.system + '/equipments').child(equipment).set({
equipment: equipment
});
$scope.message = "Added"
};
var ref = firebase.database().ref();
var data = ref.child("data");
var list = $firebaseArray(data);
list.$loaded().then(function(data) {
$scope.data = data;
console.log($scope.data);
}).catch(function(error) {
$scope.error = error;
});
}]);
My Html
<tr data-ng-repeat="data in data">
<td class="select" align="center">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>{{data.$id}}</span>
<ul class="dropdown">
<li>{{data.equipments}}</li>
</ul>
</div>
</td>
</tr>
have your tryed to change
data in data
to some thing like
d in data
also to iterate equipments you will need one more ng-repeat
<li ng-repeat= "equipment in d.equipments">{{data.equipments}}</li>
havent tested the code!
Alright I found a solution to my problem.
<tr data-ng-repeat="d in data">
<td class="select" align="center">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>{{d.$id}}</span>
<ul class="dropdown">
<li data-ng-repeat="equipment in d.equipments"><a>{{equipment.equipment}}</a></li>
</ul>
</div>
</td>
</tr>
I have data to search through. I am writing a directory app in AngularJS that takes JSON data from one of our servers; an employee list. I need to be able to do a live search on that data, but nothing I have tried seems to work. Specifically, the view does not update.
Code: app.js
var app = angular.module('directory', ['ngRoute']);
app.service('DirectoryService', ['$http', function($http){
var baseURL = "http://xxx.xxx.xxx.xxx/accounts/people/json";
return{
getEmployees: function() {
return $http.get(baseURL).then(function(response){
return response.data;
});
}
}
}]);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/employees', {
templateUrl: '_common/partials/list.html'
})
.otherwise({
redirectTo: '/employees'
});
}]);
app.controller('DirectoryController', ['$scope', 'DirectoryService',
function($scope, DirectoryService){
$scope.searchName = '';
DirectoryService.getEmployees().then(function(data){
$scope.employeeList = data;
console.log(data);
});
}]);
Code: list.html
<div id="searchSection">
<input id="searchValue" type="text" placeholder="Search by Name" ng-
model="searchName" />
</div>
<div id="listView">
<ul>
<li ng-repeat='employee in employeeList | filter: {name:searchName}'>
<p>{{employee.name}}</p>
</li>
</ul>
</div>
When I've added filters I simple add an input with ng-model:
<input class="form-control" ng-model="searchFilter" placeholder="Filter..." />
Then in my ng-repeat:
<tbody ng-repeat="user in usc.users | filter:searchFilter">
<tr>
{{user.name}}
</tr>
</tbody>
That should filter through all the names.
Better to use a factory for your service, have the service hold the data for you, and reference it in your controller. Something along these lines should work:
app.factory('DirectoryService', ['$http', function($http) {
var service = {};
service.data = {
baseURL:"http://xxx.xxx.xxx.xxx/accounts/people/json",
employeeList:[],
searchName:""
}
service.getEmployees = function() {
$http.get(service.data.baseURL).success(function(response) {
service.data.employeeList = response;
})
}
return service;
}])
Then your controller function can reference the service's data, which will dynamically update:
app.controller('DirectoryController', ['$scope', "DirectoryService", function($scope, DirectoryService) {
$scope.ds = DirectoryService.data;
DirectoryService.getEmployees();
}])
So your relevant HTML function should look like this:
<input id="searchValue" type="text" placeholder="Search by Name" ng-model="ds.searchName" />
<li ng-repeat="employee in ds.employeeList | filter:{name:ds.searchName}">
<p>{{employee.name}}</p>
</li>
So while I was trying your problem on fiddle I came across a problem and that is ng-model="searchName" is not binding to the model value.
And the reason was there was a space between
ng-[space]model. //also ng-model should be in red in your code above but it is in red and black..:P
So it might be possible that this could be the issue with this.
One more this do not use any other parameter with filter like you did here
use this simple form.
<li ng-repeat="employee in ds.employeeList | filter : searchName">
Here is my fiddle with the working solution Fiddle Solution
<div ng-app="directory" id="searchSection" ng-controller="DirectoryController">
<input id="searchValue" type="text" ng-model="searchName" />
<div id="listView">
<ul>
{{searchName}}
<li ng-repeat="employee in employeeList | filter: searchName">
<p>{{employee.name}}</p>
</li>
</ul>
</div>
</div>
js:
var app = angular.module('directory', []);
app.controller('DirectoryController', ['$scope',
function($scope){
$scope.searchName = 'Fi';
$scope.employeeList = [{name : "First Employee", salary : 100}, {name : "Second Employee", salary : 200}];
}]);
You can not because the mechanism json is limited to the domain you belong. To do this you must use the jsonp
Hello I am trying to get a url from my api using the ngResource and I have a service that returns the resource. However when I call it inside my controller is gives me an error of Cannot read property 'query' of undefined.
Why is this happening?
This is my service :
(function() {
var app = angular.module('test');
app.service('ContactResource', ['$resource', function($resource) {
return $resource('/contacts/:firstname', {firstname: '#firstname'},
{
'update': {method: 'PUT'}
}
);
}]);
}());
This is my controller
(function() {
var app = angular.module('test');
app.controller('contactsCtrl', ['ContactResource', function($scope, Contacts, ContactResource) {
$scope.contacts = ContactResource.query();
}]);
}());
And this is my HTML
<table class="table table-bordered">
<thead>
<th>Firstname <input type="search" class="pull-right"></th>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>
<a ng-href="/{{ contact.firstname }}">{{ contact.firstname }}</a>
</td>
</tr>
</tbody>
</table>
Here is your problem:
['ContactResource', function($scope, Contacts, ContactResource)
You need to also inject $scope and Contacts into the array, like this:
['$scope', 'Contacts', 'ContactResource', function($scope, Contacts, ContactResource)
Or Angular will think that 'ContactResource' is the same as $scope.
I make a custom directive with isolated scope and is get data also in that directive but now my filter and orderby not working here is my directive:
<div my-data remoteurl='url' filter='test'>
</div>
Controller:
(function() {
'use strict';
var myApp = angular.module('myApp', [])
.controller('myAppCtrl', ['$scope', '$http', function($scope, $http) {
$scope.url = 'https://www.reddit.com/r/worldnews/new.json';
$scope.filter= 'test';
$scope.orderBy= 'sortExpression';
}])
.directive('myData', ['$http', function($http) {
return {
restrict: 'A',
scope: {
remoteurl: '=',
filter: '=',
orderBy: '='
// orderBy:'sortExpression':'order' ;
},
templateUrl: 'DataTable.html',
link: function(scope, element, attr) {
$http.get(scope.remoteurl)
.success(function(response) {
scope.names = response.data.children;
});
}
};
}]);
})();
DataTable.html
<ul>
<li >
<table width="80%" id="dataTable" align="center" name="table1">
<tr>
<td><strong>Title</strong></td>
<td><strong>Link</strong></td>
<td><strong>Score</strong></td>
</tr>
<tr ng-repeat="x in names |filter:test|orderBy:sortExpression:order ">
<td id="title"><a ng-href="{{ x.data.url}}">{{x.data.title}}</a></td>
<td ><a ng-href="{{ x.data.url}}">Link</a></td>
<td>{{x.data.score}}</td>
</tr>
</table>
</li>
i am passing all parameters but only url is working filter and orderby is not working can anyone correct me?
It has nothing to do with the isolated scope. In general you are passing the variables in a correct way - from the controller into the directive via the =-notation.
You forgot to pass the orderBy to the directive, as well as understanding how filters and orderBy generally work. Please take a look into the documentation for filter and orderBy and look at the examples as well.
Corrected directive code, now with the controller's orderBy scope variable passed into the directive.
<div my-data remoteurl='url' filter='test' order-by="orderBy">
</div>
As I have already commented, your table rows code should look like this:
<tr ng-repeat="x in names | filter:filter | orderBy:orderBy">
In the controller I have set up the following filter and orderBy strings.
$scope.filter= 'obama';
$scope.orderBy= '-data.score'; //the "-" stands for reverse ordering
When you define a filter like this filter:test the filter is based on a scope variable called test, e.g. $scope.test. In your scope, the filter is inside the scope variable $scope.filter, so correct call of your filter is filter:filter.
I have set up a working plnkr here: http://plnkr.co/edit/FGZVaPrvbUcdvNRnKMk4?p=preview