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"，array，"ng-model"，但我没有成功。

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

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

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

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

列表

2. 上的数据在初始化时加载，并希望将数据标记与列表数据一起初始化。

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

我该怎么做？

普伦克 -> http://plnkr.co/edit/Hb6bNi7hHbcFa9RtoaMU?p=preview

Answer 1

这个特定问题的解决方案可能是编写 2 个函数，这些函数将返回与循环列表相关的 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[http://plnkr.co/edit/mTzAIiMmiVzQfSkHGgoU?p=preview]1

我在这里做了什么：

1. 我假设列表中一定有一些唯一的id(我在列表中添加了Id(。
2. 在单击(ng-单击(提交按钮时传递该 ID。
3. 您的控制器中已经有列表并获得了单击的 Id，因此您可以轻松地从列表中获取该 Id 的所有数据。

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

Answer 3

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

$scope.getFactoryData = function(list) {
var listData = list.contents;
listData = listData.map(function(i,j) {
return i.code;
});
return listData.join(';');
}