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.

Answer 2

You don't really have to pass multiple data from UI if you are using Angular. Two-way data binding is like blessing which is provided by Angular.

check your updated plunker here [http://plnkr.co/edit/mTzAIiMmiVzQfSkHGgoU?p=preview]1

What I have done here :

1. I assumed that there must be some unique id (I added Id in the list) in the list.
2. Pass that Id on click (ng-click) of Submit button.
3. You already have list in your controller and got the Id which item has been clicked, so you can easily fetch all the data of that Id from the list.

Hope this will help you... cheers.

Answer 3

So basing from Ashvin777's post. I came up with this solution in the Controller.

$scope.getFactoryData = function(list) {
   var listData = list.contents;

   listData = listData.map(function(i,j) {
      return i.code;
   });

   return listData.join(';');
}