AngularJS-从属性内的作用域获取打印值? [英] AngularJS - Get printed value from scope inside an attribute?

查看:87
本文介绍了AngularJS-从属性内的作用域获取打印值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我目前正在从事AngularJS项目,但我陷入了这一特定要求.

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

我们有一个包含所有数据的服务,我们称其为"DataFactoryService" .然后,我有一个名为"DataFactoryController" 的控制器,它正在制造魔术,然后将其绘制在视图中.

We have a service that has all the data, let's call it "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>

因此,它看起来像一个相当不错的应用程序.现在,我们有一个要求将多个数据传递到一个元素中.好的,我认为可以使用"ng-repeat",但不可以,我们需要在元素属性中添加它.

So, it looks like a pretty decent app. Now, we have a requirement that pass multiple data into one element. Okay, I thought an "ng-repeat" would do, but no, we need to have it inside an element attribute.

方案是:

  • 在其中一个页面上,我们有多个包含多个数据的列表.
  • 每个数据都有一个唯一的代码或ID,当我们执行或单击按钮时应传递这些代码或ID.
  • 在某些情况下,我们正在传递多个数据.

类似的事情(如果我们在一个或多个列表中有3个项目,那么我们将传递列表中的3个项目代码):

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>

在上面的示例中,"code1,code2,code3"来自列表数据.我尝试了几种方法,例如"ng-repeat","angular.each",数组,"ng-model",但没有成功.

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.

从我的所有尝试中,我知道"ng-model" 是解决我的问题的最可能方法,但我不知道从哪里开始.但是下面的代码无法正常工作,您能告诉我一下方法吗? :)

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, can you show me the way please? :)

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

  1. 数据来自服务,然后在控制器中被调用,并在HTML页面上绘制.

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

  • 列表中的数据将在初始化时加载,并希望将数据标签与列表数据一起初始化.

  • 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.

    唯一代码是 $ 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',
             ...
          },
       ],
       ....  
    }
    ]
    

  • 可以帮我吗?非常感谢!

    Can you help me out, please? BIG THANKS in advanced!

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

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

    推荐答案

    此特定问题的解决方案可能是编写2个函数,这些函数将循环返回与列表有关的baseId和代码.

    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.

    我建议像下面这样

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

    这篇关于AngularJS-从属性内的作用域获取打印值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆