无法绑定数据从数据库中获取的视图中使用angularJS [英] Unable to bind data get from database in view using angularJS

查看：135 发布时间：2016/4/10 22:46:50 javascript json angularjs

本文介绍了无法绑定数据从数据库中获取的视图中使用angularJS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图从数据库中提取数据，并使用AngularJS绑定在一个视图。对于我写了一个WEM方法如下：

  [的WebMethod]
公共静态字符串的getName（）{
  提供SQLHelper SQL =新提供SQLHelper（）;
  DataTable的DT = sql.ExecuteSelectCommand（选择客户cust_F_name）;
  字典＆LT;字符串对象＆gt;字典=新词典＆LT;字符串对象＆gt;（）;
  [对象] ARR =新对象[dt.Rows.Count]
  的for（int i = 0; I＆LT; = dt.Rows.Count  -  1;我++）{
    改编[I] = dt.Rows [I] .ItemArray;
  }
  dict.Add（dt.TableName，ARR）;
  JSON的JavaScriptSerializer =新的JavaScriptSerializer（）;
  返回json.Serialize（字典）;
}

和我叫它使用AngularJS：

  VAR DemoApp = angular.module（'DemoApp'，[]）;
DemoApp.factory（'SimpleFactory'，函数（$ HTTP）{
  返回{
    getCustomer：功能（）{
      返回$ http.post（'Home.aspx /的getName'，{名字：}）;
    }
  };
}）;DemoApp.controller（'SimpleController'，函数（$范围，SimpleFactory）{
  SimpleFactory.getCustomer（）。然后（函数（客户）{
    $ scope.Customer = $ parseJSON（customer.d）。
  }，功能（错误）{
    //错误处理
  }）;
}）;

我绑定鉴于这样的：

 ＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml数据-NG-应用=DemoApp＆GT;
  ＆LT;头=服务器＆GT;
    ＆LT;标题＆GT;＆LT; /标题＆GT;
  ＆LT; /头＆GT;
  ＆LT;车身数据-NG-控制器=SimpleController＆GT;
    ＆LT;表ID =form1的=服务器＆GT;
      ＆LT; DIV＆GT;
        名称＆LT;输入类型=文本数据-NG-模式=名/＆GT; {{名}}
        ＆LT; UL＆GT;
          ＆LT;李数据-NG-重复=客户名称在客户|过滤器：名称＆GT; {{客户名称}}＆LT; /李＆GT;
        ＆LT; / UL＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; /表及GT;
    ＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js＆GT;＆下; /脚本＆GT;
    ＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-1.10.1.min.js＆GT;＆下; /脚本＆GT;
    ＆LT;脚本SRC =脚本/ Home.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
  ＆LT; /身体GT;
＆LT; / HTML＆GT;

但它给了我这样的：

请告诉我如何从一个JSON对象得到的唯一名字。

解决方案

$ HTTP方法返回一个承诺。

在设计上，承诺调用回调仅一个参数

所以在使用时，。然后（功能（客户）{，客户将实际引用一个承诺对象，而不是响应主体允诺对象有这些属性：

数据 - {字符串|对象} - 与变换函数变换的响应体。

状态 - {数} - HTTP响应状态code。

标题 - {功能（[headerName]）} - 头getter函数

配置 - {}对象 - 这是用来生成请求的配置对象

解决方案：

 DemoApp.controller（'SimpleController'，函数（$范围，SimpleFactory）{
  SimpleFactory.getCustomer（）。然后（函数（对象）{
    $ scope.Customer = object.data.d;
  }，功能（错误）{
    //错误处理
  }）;
}）;

此外，您还可以使用成功和错误，传递给这些函数的参数被解构再$ P $响应对象psentation传入则方法。

了解更多： $ HTTP文档

I am trying to take data from a database and bind it in a view using AngularJS. For that I wrote a WEM method as follows:

[WebMethod]
public static string getname() {
  SqlHelper sql = new SqlHelper();
  DataTable dt = sql.ExecuteSelectCommand("select cust_F_name from customer");
  Dictionary<string, object> dict = new Dictionary<string, object>();
  object[] arr = new object[dt.Rows.Count];
  for (int i = 0; i <= dt.Rows.Count - 1; i++) {
    arr[i] = dt.Rows[i].ItemArray;
  }
  dict.Add(dt.TableName, arr);
  JavaScriptSerializer json = new JavaScriptSerializer();
  return json.Serialize(dict);
}

And I call it using AngularJS:

var DemoApp = angular.module('DemoApp', []);
DemoApp.factory('SimpleFactory', function ($http) {
  return {
    getCustomer: function () {
      return $http.post('Home.aspx/getname', { name: "" });
    }
  };
});

DemoApp.controller('SimpleController', function ($scope, SimpleFactory) {
  SimpleFactory.getCustomer().then(function(customer){
    $scope.Customer =$.parseJSON( customer.d);
  }, function(error){
    // error handling
  });
});

I bind it in view like this:

<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="DemoApp">
  <head runat="server">
    <title></title>
  </head>
  <body data-ng-controller="SimpleController">
    <form id="form1" runat="server">
      <div>
        Name<input type="text" data-ng-model="Name" />{{ Name }}
        <ul>
          <li data-ng-repeat="customerName in Customer | filter:Name">{{ customerName }}</li>
        </ul>
      </div>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="Script/Home.js" type="text/javascript"></script>
  </body>
</html>

But it gives me this:

Please tell me how to get the only the name from a JSON object.

解决方案

$http methods return a promise.

By design, promises invoke callbacks with only one argument.

so when using .then(function(customer) { , 'customer' will actually reference a promise object rather than the response body. A promise object has these properties:

data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.

Solution:

DemoApp.controller('SimpleController', function ($scope, SimpleFactory) {
  SimpleFactory.getCustomer().then(function(object){
    $scope.Customer = object.data.d;
  }, function(error){
    // error handling
  });
});

Also, You can use success and error, The arguments passed into these functions are destructured representation of the response object passed into the then method.

无法绑定数据从数据库中获取的视图中使用angularJS [英] Unable to bind data get from database in view using angularJS

问题描述

$ HTTP方法返回一个承诺。

解决方案：

$http methods return a promise.

Solution:

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

无法绑定数据从数据库中获取的视图中使用angularJS [英] Unable to bind data get from database in view using angularJS

问题描述

$ HTTP方法返回一个承诺。

解决方案：

$http methods return a promise.

Solution:

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭