Question

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

我以json的形式拥有这些值。我无法将脚本中的数据绑定到html页面。任何人都可以帮我解决这个问题......

这个数据对于不同的div是不同的。当我点击按钮时如何更改div中的数据。

Answer 1

您可以使用所需的数据填充对象，只需将它们添加到数组中即可显示。为此，您需要跟踪要添加的对象。因此，您可以保留每次添加项目时递增的计数器，然后您可以使用此计数器选择要添加的对象。

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

var counter = 0;

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

Answer 2

button内有ng-repeat。首先是他们的Zero项目。将button置于其外部并按预期工作。

将您的对象放在Array中，然后检查项目是否发生。

$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++;
  };

});

在Snippet下面运行

＆＃13;

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
 
  $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++;
  };

});

＆＃13;

#headerDiv,
#headerDiv2,
#headerDiv3,
#headerDiv4 {
  background-color: #0095ce;
  height: 50px;
  text-align: center;
}
#valuesDiv,
#valuesDiv2,
#valuesDiv3,
#valuesDiv4 {
  background-color: #00acec;
  height: 105px;
  text-align: center;
}
#graphDiv,
#graphDiv2,
#graphDiv3,
#graphDiv4 {
  background-color: #30c1fc;
  height: 105px;
  text-align: center;
}
#contentDiv,
#secondDiv,
#thirdDiv,
#fourthDiv {
  height: 260px;
  width: 260px;
  position: relative
}
#titleDiv {
  width: 116px;
  top: 26px;
  margin: 0;
  position: relative;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 16pt;
}
#prevyearDiv {
  width: 116px;
  left: 65px;
  top: 31px;
  margin: 0;
  position: relative;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 14pt;
}
#currentyearDiv {
  width: 116px;
  left: 207px;
  top: 10px;
  margin: 0;
  position: relative;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 14pt;
}
#prevtrendsDiv {
  width: 116px;
  top: 37px;
  left: 65px;
  margin: 0;
  position: relative;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 24pt;
}
#currenttrendsDiv {
  width: 116px;
  top: 3px;
  left: 205px;
  margin: 0;
  position: relative;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 24pt;
}
#chartDiv {
  width: 116px;
  top: 49px;
  margin: 0;
  position: relative;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 14pt;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl" style="height:100%;width:100%">

  <div id="contentDiv" ng-repeat="item in items" style="display: inline-block">
    <div id="headerDiv">
      <div id="titleDiv">{{item.name}}</div>
    </div>
    <div id="valuesDiv">
      <div id="prevyearDiv">{{item.value}}</div>
      <div id="currentyearDiv">{{item.value}}</div>
      <div id="prevtrendsDiv">{{item.desceiption}}</div>

      <div id="currenttrendsDiv">{{item.description}}</div>
    </div>
    <div id="graphDiv">
      <div id="chartDiv">{{item.graph}}</div>
    </div>
  </div>      
  <input type="button" ng-click="addItem()" value="add" style="display: block">
</div>

＆＃13;

单击按钮应在angularjs中并排显示div

2 个答案: