Question

我是编码的新手，我开始使用角度js ....

我有一个像下面的json

$scope.data={
    "items":
        {
            "yamaha":
                {
                   "title":"R15",
                   "description":"sports mode",
                   "speed":"180kmph"
                },
            "Tvs":
                {
                   "title":"apache",
                   "description":"sports mode",
                   "speed":"150kmph"
                }
        }
};

现在我的要求是在html中一个接一个地显示每个值.....

注意正如我所说的我是新手，我用谷歌搜索了这个并发现了一些像ng-repeat这样的信息，但我不明白如何在实现时使用它。

感谢您的回复

Answer 1

ng-repeat将迭代给定数组中的数据....这里我使用key，vakue概念来打印对象键和值

<!DOCTYPE html>

<meta charset="utf-8">
<head>
<title>Temperature</title>


<script src="https://d3js.org/d3.v3.js"></script>
<script src="jquery-3.1.1.js"></script>
</head>

<body style="background-color:white;color:#34495e">
<style>

svg {
  font: 15px sans-serif;
  fill:#0e1cf3;
}
 
.line {
  fill: none;
  stroke: #23115a;
  stroke-width: 1.5px;
}
 
.axis path,
.axis line {
  fill: none;
  stroke: #94e3f7;
  shape-rendering: crispEdges;
}
</style>
<script>
var margin = {top: 20, right: 20, bottom: 200, left: 50},
    width = 1280 - margin.left - margin.right,
    height = 720 - margin.top - margin.bottom;


var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 var k = [];
// var m = [];

function fetchdata(){


 $.ajax({
  url: 'data.php',
  type: 'post',
  success: function(data){
    d3.json("data.php", function(error, data) {  
   data.forEach(function(d) {
    
        d.event = d.event;
        d.sensor1 = +d.sensor1; 
        k.push(d.event)
        
        

    });
      

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width])
    .domain(k);
     


var y = d3.scale.linear()
    .range([height, null])
    .domain([0, d3.max(data, function(d) { return d.sensor1; })])
     

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .innerTickSize(-height)
    .outerTickSize(0)
    .tickPadding(5);



var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .innerTickSize(-width)
    .outerTickSize(0)
    .tickPadding(5);


svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.70em")
            .attr("dy", ".70em")
            .attr("transform", function(d) {
                return "rotate(-65)" 
                });

 svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)

 var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.event); })
    .y(function(d) { return y(d.sensor1); })

    

 svg.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line)
   


            });
d3.selectAll("path").remove();
d3.selectAll("line").remove();
d3.selectAll("g .x.axis").remove();
d3.selectAll("g .y.axis").remove();
k.shift()



 



  },
  complete:function(data){
   setTimeout(fetchdata,700);


  }  
 });
}

$(document).ready(function(){

setTimeout(fetchdata,700);

});
</script>
</body>
</html>

json使用ng-repat打印所需的数据

1 个答案: