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

我有下面的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都应该为dyndata分配来自上面javascript对象的相应"st"。

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

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

这是我使用的角度js代码-

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

我不太确定你想做什么，但我认为应该是这样的。这是一个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>

相关内容

最新更新

热门标签：