如何使用Angularjs动态创建div并将对象分配给数据集答案

【问题标题】：How to create div and assign object to dataset dynamically using Angularjs如何使用Angularjs动态创建div并将对象分配给数据集
【发布时间】：2015-12-26 22:20:50
【问题描述】：

我有下面的 div（类名“sp”），我想根据数据集对象中的 sk 动态创建它。

div 代码

<div style="" class="swindow">
     <div class="sp" style="">
        <div class="svis" style="">
             <div style="height:95%;width:95%;margin-top:0px;margin-left:5px;">
                <chart dsn="dyndata" editable="false" labelled="true"></chart>
             </div>                
        </div>
        <div class="sdata" style="">
            <div class="stext" style="">Average:78% </div>
        </div> 
</div>

在搜索类似示例时，我在 Angular js 中遇到了 ng-repeat，我认为它可能适合这种目标。但是我对 Angular js 很陌生，不知道如何动态地将数据分配给我的 dyndata 变量并为每个给定的 id 创建新的 div (class=sp)。

这里是查找对象

[
{"id":20,"st":[{"label":"Audi","value":10},{"label":"BMW","value":70}]},
{"id":26,"st":[{"label":"Benz","value":40},{"label":"BMW","value":20}]},
{"id":12,"st":[{"label":"AUDI","value":60},{"label":"Tesla","value":70}]},
{"id":57,"st":[{"label":"MZ","value":30},{"label":"Honda","value":40}]}
]

当我将 id 作为一组输入时 [12,26,57] - 应该为每个 id 创建三个 div（每个用于 #sp）。在那些中，每个 div 都应该从上面的 javascript 对象中分配有相应的 'st' 的 dyndata。

我可以在每次需要时使用 .append 函数在容器 (#swindow) 中创建 div。但我不确定如何将 sk 作为输入分配给每个创建的 div 的 dyndata 数据集。

您能否分享一下如何使用 Angular js 实现这一点？

这是我使用的 Angular js 代码 -

<script>
    var app = angular.module('ExampleApp', ['ui.plot']);
    app.controller('PlotCtrl', function ($scope) {
        $scope.dyndata={};
});
</script>

【问题讨论】：

标签： angularjs

【解决方案1】：

我不确定您要做什么，但我认为它应该看起来像这样。 Here 是 plnkr..

控制器：

app.controller('PlotCtrl', function($scope) {
 $scope.items = [
  {"id":20,"st":[{"label":"Audi","value":10},{"label":"BMW","value":70}]},
  {"id":26,"st":[{"label":"Benz","value":40},{"label":"BMW","value":20}]},
  {"id":12,"st":[{"label":"AUDI","value":60},{"label":"Tesla","value":70}]},
  {"id":57,"st":[{"label":"MZ","value":30},{"label":"Honda","value":40}]}
 ]


});

HTML：

<body ng-controller="PlotCtrl">
 <div style="" class="swindow">
   <div class="sp" style="" ng-repeat="item in items">
      <div class="svis" style="">
        <strong>{{item.id}}:</strong>
        <div>-{{item.st[0].label}}</div>
        <div>-{{item.st[1].label}}</div>
           <div style="height:95%;width:95%;margin-top:0px;margin-left:5px;">
              <chart dsn="dyndata" editable="false" labelled="true"></chart>
           </div>                
      </div>
      <div class="sdata" style="">
          <div class="stext" style="">Average:78% </div>
          <br>
      </div> 
    </div>  
 </div>  
</body>

【讨论】：