0

Ok, seems that I was having too many issues with the way in which my Angular site is setup, so I put it in a plunker as then anyone can see it.

Original question: Angular retrieve specific data into $scope variable is not working

Plunker http://plnkr.co/edit/NsE29zjraQp9UeklJBiI?p=preview

My issues are 1. i'm not understanding how to use app.filter 2. Issue with app name 3. forEach with push inside $http.get throws error not defined

The plunker Index.html has the template code loop , app.module.js is root and the device.controller.js is where I'm using controller with $http.get call using json file to fake it.

I was attempting to use the other persons answer so this code 

$scope.devices = result.data.Devices;   // gives all data ...

Filter I was wondering if this with work

<div ng-repeat="device in devices">
    {{ device.DeviceStatus }} 
</div>

Then this code I'm not sure it in the correct "place"

seems like i'm not understanding "app" 

app.filter('deviceStatus', function () {
    return function (status_id) {
       var statuses = ['Old Device', 'New Device', 'Activated', 'Unactivated'];
       return statuses[status_id];
   };
});

Example filter:

<td>{{device.DeviceId | deviceStatus}}</td>
Improve this question
2
  • I am not able to understand what you are trying to achieve. Plz provide some explanation. Commented Aug 31, 2016 at 7:09
  • 2 links provided original question in which i am told to try app.filter so in plunker u see that i chain that in top of controller js file , and i'm trying to get foreach loop with push to work and that throws an error. Commented Aug 31, 2016 at 7:25

1 Answer 1

Reset to default
0

Let me try to understand your issue.

As per your question, it seems that you have problems understanding what app is and how to use filter.

This is the working version of your plunkr. Check this url

  1. app in your project is the ng-app directive. The ng-app directive tells AngularJS that the element is the "owner" of an AngularJS application.
  2. For understanding filter functionality. check the below example.
  3. You were trying to push into $scope.statuses which is not defined yet. So first define $scope.statuses to be an empty array i.e `$scope.statuses = [];

Hope this works for you!`

// To declare a filter we pass in two parameters to app.filter

// The first parameter is the name of the filter 
// second is a function that will return another function that does the actual work of the filter

//here app is the module name of your project

app.filter('myFilter', function() {

  // In the return function, we must pass in a single parameter which will be the data we will work on.
  // We have the ability to support multiple other parameters that can be passed into the filter optionally
  return function(input, optional1, optional2) {

    var output;

    // Do filter work here

    return output;

  }

});

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Awesome! quick question - why do some people do this var app = angular.module('demoApp',['ngRoute', 'ngAnimate']); as opposed to how i'm doing this angular.module('app', ['angularUtils.directives.dirPagination']); ?
When you define a module in your project, the best practice is to put it inside a global variable or any such, so that you can directly assign the module to any component next time. For e.g: angular.module('app', [dependencies]) looks good if your application is too small. But when you go for large and scalable applications it is preferred to have a usage like var app = angular.module('app', []); so that we can start writing the other part of code like app.filter('filtername', function(){}).controller('controllerName', function(){}) etc.,

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.