Question

我是AngularJS的新手，我创建了一个表来显示来自两个不同JSON的信息。要做到这一点，我＆＃34;混合＆＃34;他们得到一个。我的代码：

的test.html

    <!doctype html>
<html ng-app="App">
  <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-controller="myCtrl" ng-init="init()">

<table border=1>
  <thead>
    <tr>
      <th>Position</th>
      <th>Ticket</th>
      <th>Customer</th>
    </tr>
  </thead>
  <tbody ng:repeat="element in array">
    <tr><td align=center>{{$index}}</td>
        <td align=center>
          {{element.ticket.code}}<br>
          <strong>{{element.ticket.city}}</strong><br>
          <em>{{element.ticket.value | currency}}</em>
        </td>
        <td  align=center>
          {{element.customer.name}}<br>
          {{element.customer.age}}
        </td>
    </tr>
  </tbody>
</table>

</body>
</html>

的script.js

var app = angular.module('App', []);

app.controller("myCtrl", function($scope){ 
  $scope.tickets = [ {code:'1', city:'Istanbul', value:10.0},
                     {code:'2', city:'London', value:50.0},
                     {code:'3', city:'Paris', value:30.0}
                    ]; 
  $scope.customers = [ {name:'Customer1', age:36},
                       {name:'Customer2', age:42},
                       {name:'Customer3', age:28}
                     ];

  $scope.array = [];

  $scope.init = function(){
    var k = 0;
    for(; k < $scope.tickets.length && k < $scope.customers.length; k++)
      $scope.array.push({ticket:$scope.tickets[k], customer:$scope.customers[k]});

    for(; k < $scope.tickets.length; k++)
      $scope.array.push({ticket:$scope.tickets[k], customer:{name:'',age:''}});
    for(; k < $scope.customers.length; k++)
      $scope.array.push({ticket:{code:'',city:'',name:''}, customer:$scope.customers[k]});
  };

});

有没有更好的方法使用来自不同JSON的信息显示表格？任何可能做同样的事情而不需要只获得一个JSON？

Answer 1

您可以使用一个customers[$index]并使用angular.module('App', []) .controller("myCtrl", function($scope){ $scope.tickets = [ {code:'1', city:'Istanbul', value:10.0}, {code:'2', city:'London', value:50.0}, {code:'3', city:'Paris', value:30.0} ]; $scope.customers = [ {name:'Customer1', age:36}, {name:'Customer2', age:42}, {name:'Customer3', age:28} ]; $scope.array = []; $scope.init = function(){ var k = 0; for(; k < $scope.tickets.length && k < $scope.customers.length; k++) $scope.array.push({ticket:$scope.tickets[k], customer:$scope.customers[k]}); for(; k < $scope.tickets.length; k++) $scope.array.push({ticket:$scope.tickets[k], customer:{name:'',age:''}}); for(; k < $scope.customers.length; k++) $scope.array.push({ticket:{code:'',city:'',name:''}, customer:$scope.customers[k]}); }; });访问您的客户对象数组。

请查看下面的演示或此jsfiddle。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="myCtrl" ng-init="init()">
    <h2>table with js mapping</h2>
<table border=1>
  <thead>
    <tr>
      <th>Position</th>
      <th>Ticket</th>
      <th>Customer</th>
    </tr>
  </thead>
  <tbody ng:repeat="element in array">
    <tr><td align=center>{{$index}}</td>
        <td align=center>
            {{element.ticket.code}}<br/>
            <strong>{{element.ticket.city}}</strong><br/>
          <em>{{element.ticket.value | currency}}</em>
        </td>
        <td  align=center>
            {{element.customer.name}}<br/>
          {{element.customer.age}}
        </td>
    </tr>
  </tbody>
</table>
       
    <h2>table with ng-repeat</h2>
    <table border=1>
  <thead>
    <tr>
      <th>Position</th>
      <th>Ticket</th>
      <th>Customer</th>
    </tr>
  </thead>
  <tbody ng:repeat="ticket in tickets">
    <tr><td align=center>{{$index}}</td>
        <td align=center>
            {{ticket.code}}<br/>
            <strong>{{ticket.city}}</strong><br/>
          <em>{{ticket.value | currency}}</em>
        </td>
        <td  align=center>
            {{customers[$index].name}}<br/>
          {{customers[$index].age}}
        </td>
    </tr>
  </tbody>
</table>
      </div>

＆＃13;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;

public partial class Default2 : System.Web.UI.Page
{
    static string startdate;
    DataTable dt;
    static string enddate;
    static string EstDate;
    string str = @"Data Source=ALLAH_IS_GREAT\sqlexpress; Initial Catalog = Task_Manager; Integrated Security = true";

    protected void Page_Load(object sender, EventArgs e)
    {//Page dosn't go back//
        HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        Response.Cache.SetExpires(DateTime.UtcNow.AddMinutes(-1));
        Response.Cache.SetNoStore();





        if (IsPostBack)
        {
            if (Session["auth"] != "ok" )
            {
                Response.Redirect("~/Login.aspx");


            }
            else if (Session["desg"] != "Scrum Master")
            {
                //Response.Redirect("~/errorpage.aspx");
                addtaskbtnPannel.Visible = false;
            }


        }
        else
        {
            GridView1.DataSource = dt;
            GridView1.DataBind();
            if (Session["auth"] != "ok")
            {

                Response.Redirect("~/Login.aspx");

            }
            else if (Session["desg"] != "Scrum Master")
            {
               // Response.Redirect("~/errorpage.aspx");
                addtaskbtnPannel.Visible = false;
            }

        }

         //decode url data in query string
        labelID.Text = HttpUtility.UrlDecode(Request.QueryString["Id"]);
        labelDur.Text = HttpUtility.UrlDecode(Request.QueryString["Duration"]);
        labelStatus.Text = HttpUtility.UrlDecode(Request.QueryString["Status"]);
        String pId = HttpUtility.UrlDecode(Request.QueryString["pID"]);
        string query = "Select * from Tasks where S_ID=" + labelID.Text;
        SqlConnection con = new SqlConnection(str);
        SqlCommand com = new SqlCommand(query, con);
        con.Open();
        SqlDataReader sdr = null;
        sdr = com.ExecuteReader();
        dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[5] { new DataColumn("Id"), new DataColumn("Description"), new DataColumn("Status"), new DataColumn("Sprint_ID"), new DataColumn("pID") });
        while (sdr.Read())
        {
            dt.Rows.Add(sdr["T_ID"].ToString(), sdr["T_Description"].ToString(), sdr["T_Status"].ToString(), labelID.Text,pId);
        }

        GridView1.DataSource = dt;
        GridView1.DataBind();
        con.Close();
        if (!IsPostBack)
        {
            PanelTaskForm.Visible = false;
            Panel1.Visible = false;
        }
        else if(IsPostBack){
            PanelTaskForm.Visible = true;
            Panel1.Visible = true;
        }
    }
    protected void saveTask_Click(object sender, EventArgs e)
    {
          string str = @"Data Source=ALLAH_IS_GREAT\sqlexpress; Initial Catalog = Task_Manager; Integrated Security = true";
        try
        {

            String query = "insert into Tasks (T_Description, T_Status,S_ID,StartDate,EstEndDate) values('" + TaskDesBox.Text + "', 'incomplete','" + labelID.Text + "' ,'" + startdate + "','" + EstDate + "');";
            SqlConnection con = new SqlConnection(str);
            SqlCommand com = new SqlCommand(query, con);
            con.Open();

            if (com.ExecuteNonQuery() == 1)
            {
                TaskStatus.Text = "Task Successfully Saved ";
                GridView1.DataBind();

            }
            else
            {

                TaskStatus.Text = "Task not Saved";
            }

        }
        catch (Exception ex)
        {
            Response.Write("reeor" + ex);
        }
    }
    protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
    {

    }
    protected void TaskDesBox_TextChanged(object sender, EventArgs e)
    {


    }

    protected void LinkButton1_Click(object sender, EventArgs e)
    {
        Calendar1.Visible = true;
    }

    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        startdate = Calendar1.SelectedDate.ToString("yyyy-MM-dd hh:mm:ss");
        SDate.Text = startdate;
        Calendar1.Visible = false;
    }

    protected void LinkButton2_Click(object sender, EventArgs e)
    {
        Calendar2.Visible = true;
    }

    protected void Calendar2_SelectionChanged(object sender, EventArgs e)
    {
        EstDate = Calendar2.SelectedDate.ToString("yyyy-MM-dd hh:mm:ss");
        EstDateBox.Text = EstDate;
        Calendar2.Visible = false;



    }

}

＆＃13;

表格与AngularJS使用不同的jsons

1 个答案: