How do I pass data through an ES6 "class" function in angular

Question

I'm trying to create a controller in angular as an ES6 class. This works as expected ( able to print the string returned through the message function). See below.

<div ng-controller="ProfilingCtrl as profileData">
    {{profileData.message()}}
</div>

But what I want to do now i to be able to use a function class in ng-repeat, like below.

<div ng-controller="ProfilingCtrl as profileData">
    <div ng-reapeat="x in profileData.getData()">
        {{x[0]}}
    </div>
</div>

getData() is a function returning an array of strings. Is this even possible? If not, how would one go about doing such an operation?

Your controller is the class ? If so please put the return array from the getData() into a scope array such as $scope.data = [] and then on the view do ng-reapeat="x in data" — Beslinda N.
– Beslinda N., Commented Oct 25, 2016 at 12:50
Normally, x would hold one entry of the array returned by profileData.getData(). As such, I'm not sure why you are trying to show {{x[0]}}. Try just {{x}}. — FDavidov
– FDavidov, Commented Oct 25, 2016 at 13:29

Danie A · Accepted Answer · 2016-10-26 13:48:01Z

Big chance your issue is coming from ng-reapeat -> typo should be ng-repeat. Still helping you with your code:

It would be useful if you shared your controller code. But I'll make something up.

First, unless you are trying to display the first character of each string in your data array, remove the [0], as x represents the element resulting from iteration.

<div ng-controller="ProfilingCtrl as profileData">
    <div ng-repeat="x in profileData.getData()">
        {{x}}
    </div>
</div>

Further recommendation: bind your data to a variable, instead of a function. ES6 style (though I would still stick with functions for controllers)

class MyController {

  constructor(myDataService) {
    this.myDataService = myDataService;

    this.myData = []; // This is where the data will be
  }

  handleError(error) {
    // do something error
  }

  getData() {
    this.myDataService.getData() // this is some method that returns a promise
      .then(response => this.myData = response) // response from http in a promise
      .catch(error => this.handleError(error));
  }

  $onInit() {  // angular will take care of starting this off
    this.getData();
  }

}

Note the $onInit is called by Angular when the component is ready. Read about lifecycle hooks: https://toddmotto.com/angular-1-5-lifecycle-hooks

The lifecycle hook is outside of scope of your question, but still nice to get into.

Note that the comment made earlier about "bind it to $scope" is not recommended. ControllerAs as you are doing is better, could later be put elsewhere though.

Thanks a bunch. I know that ES6 is new-isch-ly, so most of the information I found related to the previous way. This gave a lot more directives on the new approach. Thanks alot. PS: Not the only issue, but the typo was part of the problem. Thanks.

Collectives™ on Stack Overflow

How do I pass data through an ES6 "class" function in angular

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related