AngularJS

Question

我目前正在做一个 AngularJS 项目，但我遇到了这个特定要求。

我们有一个包含所有数据的服务，DataFactoryService。然后，我有一个名为 DataFactoryController 的控制器，它正在创造奇迹，然后将其绘制在视图中。

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

现在，我们需要将多个数据传递到一个元素中。我认为“ng-repeat”可以，但我们需要将它放在元素属性中。

场景是：

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

类似这样的事情（如果我们在一个或多个列表中有 3 个项目，那么我们将传递列表的 3 个项目代码）：

<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”，但没有成功。

根据我的所有尝试，我知道“ng-model”是解决我的问题的最可能方法，但我不知道从哪里开始。但是下面的代码不起作用。

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

数据来自服务，然后在控制器中调用，并绘制在 HTML 页面上。
```
 // Controller
 $scope.list = dataFactoryService.getAllServices();
```
列表中的数据正在初始化时加载，希望将数据标签与列表数据一起初始化。

$scope.list.

的唯一代码 is/are 部分

 // 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',
          ...
       },
    ],
    ....  
 }
 ]

我该怎么做？

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

Answer 1

这个特定问题的解决方案可能是编写 2 个函数，这些函数将 return baseId 和关于循环列表的代码。

我建议像下面那样做

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

//在你的控制器里面写方法 -

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

如果您在执行此操作时发现任何问题，请告诉我。这绝对能解决你的问题。

Answer 2

如果您使用 Angular，您实际上不必从 UI 传递多个数据。双向数据绑定就像Angular.

提供的祝福

检查更新后的 plunker here [http://plnkr.co/edit/mTzAIiMmiVzQfSkHGgoU?p=preview]1

我在这里做了什么：

我假设列表中一定有一些唯一的id（我在列表中添加了Id）
在单击提交按钮时传递该 ID。
您的控制器中已经有了 list 并获得了被点击的项目的 Id，因此您可以轻松地从列表中获取该 Id 的所有数据。

希望这对您有所帮助...干杯。

Answer 3

所以基于 Ashvin777 的 post。我在控制器中想出了这个解决方案。

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

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

   return listData.join(';');
}

AngularJS - 从属性内的范围获取打印值？

AngularJS - Get printed value from scope inside an attribute?

javascript

angularjs-ng-repeat