AngularJS - Get printed value from scope inside an attribute?

Question

I'm currently working on an AngularJS project and I got stuck in this specific requirement.

We have a service that has all the data, DataFactoryService. Then, I have a controller called DataFactoryController that is making the magic and then plot it in the view.

<div ng-repeat = "list in collection">
{{list.name}}
...
</div>

Now, we have a requirement that pass multiple data into one element. I thought an "ng-repeat" would do, but we need to have it inside an element attribute.

The scenarios are:

• At one of the pages, we have multiple lists with multiple data.
• Each data has a unique code or ID that should be passed when we do an execution or button click.
• There are instances that we're passing multiple data.

Something like this (if we have 3 items in a list or lists, so we're passing the 3 item codes of the list):

<a href = "#" class = "btn btn-primary" data-factory = "code1;code2;code3;">
    Submit
</a>
<a href = "#" class = "btn btn-default" data-factory = "code1;code2;code3;">
    Cancel
</a>

In the example above, code1,code2,code3 came from the list data. I tried several approach like "ng-repeat", "angular.each", array, "ng-model" but I got no success.

From all I've tried, I knew that "ng-model" is the most possible way to resolve my problem but I didn't know where to start. the code below didn't work though.

    <span ng-model = "dataFactorySet.code">{{list.code}}</span>
    {{dataFactorySet.code}}

1. The data is coming from the service, then being called in the controller, and being plot on the HTML page.

    // Controller
    $scope.list = dataFactoryService.getAllServices();
   

2. The data on the list are being loaded upon initialization and hoping to have the data tags initialized as well together with the list data.

3. The unique code(s) is/are part of the $scope.list.

    // Sample JSON structure
    [
    { // list level
       name: 'My Docs',
       debug: false,
       contents: [ // list contents level
          {
             code: 'AHDV3128',
             text: 'Directory of documents',
             ...
          },
          {
             code: 'AHDV3155',
             text: 'Directory of pictures',
             ...
          },
       ],
       ....  
    },
    { // list level
       name: 'My Features',
       debug: false,
       contents: [ // list contents level
          {
             code: 'AHGE5161',
             text: 'Directory of documents',
             ...
          },
          {
             code: 'AHGE1727',
             text: 'Directory of pictures',
             ...
          },
       ],
       ....  
    }
    ]
   

How can I do this?

PLUNKER -> http://plnkr.co/edit/Hb6bNi7hHbcFa9RtoaMU?p=preview

Answer 1

The solution for this particular problem could be writing 2 functions which will return the baseId and code with respect to the list in loop.

I would suggest to do it like below

<a href = "#" data-factory = "{{getDataFactory(list)}}" data-base = "{{getDataBase(list)}}">Submit</a>
<a href = "#" data-factory = "{{getDataFactory(list)}}" data-base = "{{getDataBase(list)}}">Cancel</a>

//inside your controller write the methods -

    $scope.getDataFactory = function(list){
      var factory = list.map( (a) =>  a.code );
      factory  = factory.join(";");
      return factory;
    }

    $scope.getDataBase= function(list){
      var base= list.map( (a) =>  a.baseId);
      base= base.join(";");
      return base;
    }

Let me know if you see any issue in doing this. This will definitely solve your problem.