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}}

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();
```
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.

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

May be if you can write a jsfiddle for this problem then I can look into the exact issue. The question is not clear. — Ashvin777
– Ashvin777, Commented Aug 7, 2017 at 14:31
@Ashvin777 added the plunker url above: plnkr.co/edit/Hb6bNi7hHbcFa9RtoaMU — alleycat
– alleycat, Commented Aug 8, 2017 at 3:29
@georgeawg I actually thought of that, but the list contains arrays that needs to be accessed specifically. And there are multiple lists that has the data. — alleycat
– alleycat, Commented Aug 8, 2017 at 3:30
What it consuming the data-factory and data-base attributes? Are they AngularJS directives? Or attributes of an AngularJS directive? — georgeawg
– georgeawg, Commented Aug 8, 2017 at 4:22

Ashvin777 · Accepted Answer · 2017-08-08 07:50:22Z

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.

answered Aug 8, 2017 at 7:50

Ashvin777

1,48213 silver badges19 bronze badges

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

2 Comments

alleycat Over a year ago

Thank you for your help! When you mentioned jquery Map, I found the solution myself by following your code! Cheers!

Ashvin777 Over a year ago

Great !! Thumbsup

UniCoder · Accepted Answer · 2017-08-08 08:10:51Z

0

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 :

I assumed that there must be some unique id (I added Id in the list) in the list.
Pass that Id on click (ng-click) of Submit button.
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.

answered Aug 8, 2017 at 8:10

UniCoder

3,2531 gold badge33 silver badges29 bronze badges

1 Comment

alleycat Over a year ago

This could be a good implementation but I need to pass what's inside the contents and not the id. Also, the requirement stated that the data tags should be there before any events or clicks.

alleycat · Accepted Answer · 2017-08-08 12:10:47Z

0

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(';');
}

answered Aug 8, 2017 at 12:10

alleycat

418 bronze badges

Collectives™ on Stack Overflow

AngularJS - Get printed value from scope inside an attribute?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related