单击一个按钮，应该以angularjs并排显示div

单击一个按钮，我试图并排显示div。在div中有标题、值和图形部分

我有json格式的这些值。我无法将脚本中的数据绑定到html页面。有人能帮我解决这个问题吗

---

对于不同的div，此数据是不同的。当我单击按钮时，如何更改div中的数据。

您在

ng repeat

中有

按钮。首先，它们的where
Zero
项。将
按钮
置于其外部，并按预期工作

将对象放入
数组中
，然后检查项目是否出现

$scope.count=0;

  $scope.items = [];
  var json = [
  {
"title" : " claim Queries1",
"prevyear" : "2014",
"currentyear" : "2015",
"prevtrend": "300",
"currenttrend" : "500",
"graph" : "graph1"
  },
 {
"title" : " claim Queries2",
"prevyear" : "2014",
"currentyear" : "2015",
"prevtrend" : "300",
"currenttrend" : "500",
"graph" : "graph2"
  },
  {
"title" : " claim Queries3",
"prevyear" : "2014",
"currentyear" : "2015",
"prevtrend" : "300",
"currenttrend" : "500",
"graph" : "graph3"
  }];

  $scope.addItem = function() {
    if($scope.count!=json.length)
    $scope.items.push(json[$scope.count]);  
    $scope.count++;
  };

});

在代码段下方运行


var-app=angular.module（'app'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.count=0；
$scope.items=[]；
var json=[
{
“标题”：“索赔查询1”，
“上一年度”：“2014年”，
“本年度”：“2015年”，
“prevtrend”：“300”，
“当前趋势”：“500”，
“图形”：“图形1”
},
{
“标题”：“索赔查询2”，
“上一年度”：“2014年”，
“本年度”：“2015年”，
“prevtrend”：“300”，
“当前趋势”：“500”，
“图形”：“图形2”
},
{
“标题”：“索赔查询3”，
“上一年度”：“2014年”，
“本年度”：“2015年”，
“prevtrend”：“300”，
“当前趋势”：“500”，
“图形”：“图形3”
}];
$scope.addItem=函数（）{
if（$scope.count！=json.length）
$scope.items.push（json[$scope.count]）；
$scope.count++；
};
});
#headerDiv，
#第二章，
#第三章，
#头颅第四节{
背景色：#0095ce；
高度：50px；
文本对齐：居中；
}
#价值IV，
#价值DIv2，
#价值IV 3，
#值DIV4{
背景色：#00acec；
高度：105px；
文本对齐：居中；
}
#图四，
#图4-2，
#图4-3，
#图四{
背景色：#30c1fc；
高度：105px；
文本对齐：居中；
}
#contentDiv，
#第二组，
#第三,，
#第四师{
高度：260px；
宽度：260px；
职位：相对
}
#标题IV{
宽度：116px；
顶部：26px；
保证金：0；
位置：相对位置；
左：50%；
保证金权利：-50%；
转换：翻译（-50%，-50%）；
字号：16pt；
}
#前一年{
宽度：116px；
左：65px；
顶部：31px；
保证金：0；
位置：相对位置；
保证金权利：-50%；
转换：翻译（-50%，-50%）；
字号：14pt；
}
#当前年份司{
宽度：116px；
左：207px；
顶部：10px；
保证金：0；
位置：相对位置；
保证金权利：-50%；
转换：翻译（-50%，-50%）；
字号：14pt；
}
#prevtrendsDiv{
宽度：116px；
顶部：37像素；
左：65px；
保证金：0；
位置：相对位置；
保证金权利：-50%；
转换：翻译（-50%，-50%）；
字号：24pt；
}
#当前趋势IV{
宽度：116px；
顶部：3px；
左：205px；
保证金：0；
位置：相对位置；
保证金权利：-50%；
转换：翻译（-50%，-50%）；
字号：24pt；
}
#沙特迪夫{
宽度：116px；
顶部：49px；
保证金：0；
位置：相对位置；
左：50%；
保证金权利：-50%；
转换：翻译（-50%，-50%）；
字号：14pt；
}

{{item.name}
{{item.value}}
{{item.value}}
{{item.desceiption}
{{item.description}
{{item.graph}
如果对象中填充了所需的数据，只需将它们添加到数组中即可显示。为此，您需要跟踪要添加的对象。因此，您可以保留一个计数器，在每次添加项目时递增，然后可以使用此计数器选择要添加的对象

一个简单的方法是将所有项目（不仅仅是要显示的项目）存储在一个单独的数组中。然后，您可以通过将addItem（）函数更改为以下内容来添加要显示的项目：

var counter = 0;

 $scope.addItem = function() {
    $scope.items.push($scope.allItems[counter]);
    counter++;
 };

我无法在html中看到您的
附加项。你面临什么问题？您当前的代码应该可以工作。我已经编辑了我的代码。请参考此url。这里的描述对于所有div都是相同的。但是对于不同的div，我有不同的数据。如果我没有错的话，在plnkr中，事情按照您的期望工作得很好。如果不是的话，你能澄清一下问题吗？是你丢失的数据吗？您需要将数据从dom传递到newItem。例如，在您的输入上使用ng model指令：因此，每当单击按钮时，您所拥有的将添加一个新的div，但数据在addItem（）函数中是硬编码的，因此需要对其进行修改，以使用您所需的数据填充js对象。您的div数据存储在哪里？@dev777检查我的回答实际上我有上面提到的不同div的不同数据。我想在不同的div上显示不同的数据onclick@dev777是否将数据从数据来源推送到
addItem
？API或从
表单
？我尝试推送代码，但最后一个数据被覆盖，并且该数据显示在所有分区中。您可以编辑此处的代码吗？您有静态数据吗？您可以参考此url:并请帮助我吗