Question

我有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的jquery。但我不确定如何为每个创建的div分配sk作为dyndata数据集的输入。

请问你能分享一下如何使用Angular js实现这一目标吗？

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

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

Answer 1

我不确定你要做什么，但我认为它看起来应该是这样的。 Here是一个pnkr ..

控制器：

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>

如何使用Angularjs

1 个答案: