Angularjs accessing controller value with string

Question

i'm trying to create a table directive for my app, i would like to make it really flexible so, i can use it everywhere. The thing is that i don't know how to access the data from the string i'm trying to pass, maybe it's not the best way... any suggestions? Here is the code of both, html and directive:

'use strict';

angular.module("private.directives")

    .directive('tableDirective', [
                                           function(){

        return {

            restrict : 'E',
            templateUrl: 'resources/js/private/views/utils/table/table.html',
            scope : {
                selected: '=',
                page : '=',
                header : '=',
                properties : '='
            },
            controller : ['$scope', function ($scope) {

            }],
            controllerAs : 'cntrl',
            bindToController: true
        }
}]);

The table html:

<div class="pt-1">      
            <table class="table table-hover">
              <thead>
                <tr ng-repeat="header in headers">
                  <th translate>{{header | uppercase}}</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="data in cntrl.page.data" ng-class-odd="'striped'">
                  <td>{{data.[cntrl.properties[$index]] | uppercase}}</td>
                </tr>
              </tbody>
            </table>

            <!-- TODO -->
            <div class="row" ng-show="cntrl.page.totalResults > 0">
                <div class="col-xs-12">
                    <nav class="float-xs-right" aria-label="Page navigation">
                      <ul class="pagination">
                        <li class="page-item">
                          <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only" translate>paginacion.previous</span>
                          </a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                          <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only" translate>paginacion.next</span>
                          </a>
                        </li>
                      </ul>
                    </nav>
                </div>
            </div>
        </div>

And the HTML where is called:

   <table-directive 
        page="cntrl.ingredients" 
        headers="['#', 'table.name', 'tabla.brand']"
        properties="['ingredientId','description','brandDescription']">
    </table-directive>

The data in the "cntrl.ingredients" is an object with the followings:

{
   data : [],
   currentPage : null,
   pageSize : null,
   totalResults : null,
   sortDirection : null,
   orderBy : null
}

Where the "data" array will have diferent objects depending the table i'm using. I know the error is in the table html when i iterate over the cntrl.page.data, i don't know how to get the value i want to be show... "data.[cntrl.properties[$index]]" does not seem to be working.

Thanks in advance!!

Hyu Kim · Accepted Answer · 2018-02-12 19:30:18Z

2

your idea is valid, if you posted exactly the way you have coded, then it's just because there are some typos and minor mistakes.

directive:

you are expecting header and when calling directive, you have used headers
generally, if directive is the end consumer of data, then don't do = two-way binding but use < notion. this way your original data will not be modified. I am saying it because you have nothing in the directive's controller

table.html

repeat on header in cntrl.headers instead of header in headers. your headers info is bound to cntrl not directly to the scope.
I believe what you want is repeat on th not tr

for page data do:

 <tr ng-repeat="data in cntrl.page.data">
   <td ng-repeat="(key, value) in data" ng-class-odd="'striped'">{{value | uppercase}}</td>
 </tr>

cheers!

——- EDIT ——-

My bad. For page data, you were passing properties to ensure the order, right? td ng-repeat should be on properties and call data[property]

--- EDIT2 ---

it should look like

<tr ng-repeat="data in cntrl.page.data">
  <td ng-repeat="property in cntrl.properties">
    {{ data[property] }}
  </td>
</tr>

edited Feb 12, 2018 at 19:30

answered Feb 9, 2018 at 0:37

Hyu Kim

2062 silver badges11 bronze badges

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

3 Comments

txomin Over a year ago

imagine i have the following data array: [{'ingredientId' : 1, 'date' :'04/10/91', 'description' : 'ingredient1','brandDescription' : 'brand1'}, {'ingredientId' :2,'description' : 'ingredient2','brandDescription' : 'brand2'}]. The thing is i´m not sure how to link what i have to print with the properties i'm reciving, i thought it was "data.[cntrl.properties[$index]]" but is not working for me, i'm getting an Angular error

Hyu Kim Over a year ago

I have added the ng-repeat part. but what kinda error do you see? when I tested your code with the mentioned fixes, it did work

txomin Over a year ago

you were right, the problem was the dot in {{data.[cntrl.properties[$index]] instead of {{data[cntrl.properties[$index]]

Collectives™ on Stack Overflow

Angularjs accessing controller value with string

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related