Javascript 如何使用Angular js将json中的数据绑定到li_Javascript_Json_Angularjs_Webmethod

Javascript 如何使用Angular js将json中的数据绑定到li

javascript json angularjs

Javascript 如何使用Angular js将json中的数据绑定到li,javascript,json,angularjs,webmethod,Javascript,Json,Angularjs,Webmethod,我尝试使用AngularJS开发一个应用程序，其中我从数据库中获取数据，并使用该数据填充li 为此，我写了一个WebMethod作为fallow [WebMethod] public static string getname() { SqlHelper sql = new SqlHelper(); DataTable dt = sql.ExecuteSelectCommand("select cust_F_name,Cust_L_Name fr

我尝试使用AngularJS开发一个应用程序，其中我从数据库中获取数据，并使用该数据填充li

为此，我写了一个WebMethod作为fallow

[WebMethod]
    public static string getname()
    {
        SqlHelper sql = new SqlHelper();

        DataTable dt = sql.ExecuteSelectCommand("select cust_F_name,Cust_L_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);


    }

我的观点是休耕

<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="customer in Customer | filter:Name">{{ customer.cust_F_name }} -
                {{ customer.cust_L_name }}</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>


名称{{Name}

{{{customer.cust_F_Name}-
{{customer.cust_L_name}

但是它不工作，如果我在工厂里硬编码数据，它会工作得很好，但是当我使用ajax调用带来数据时，它不会工作，我无法理解为什么会这样。

AngularJS中的工厂是单例的。因此，在将工厂注入控制器时，您编写代码的方式将执行ajax调用。您看不到客户数据，因为将json数据分配给scope变量后，服务器响应将被处理

一个可能有效的快速（肮脏）修复方法是包装customer对象：

DemoApp.factory('SimpleFactory', function ($rootScope) {
  // ...
  var customer = {};
  // ...

  $.ajax({ 
    // ...
    success: function(data) {
      $rootScope.$apply(function() {
        customer.data = data;
      });
    }
    // ...
  });
});

// In view

<li data-ng-repeat="customer in Customer.data"> <!-- ... --> </li>

DemoApp.factory（'SimpleFactory'，函数（$rootScope）{
// ...
var customer={}；
// ...
$.ajax（{
// ...
成功：功能（数据）{
$rootScope.$apply（函数（）{
customer.data=数据；
});
}
// ...
});
});
//鉴于

更好的方法是使用内置服务或角度服务。最后一项要求您使用服务（推荐）。如果出于任何原因，您仍然希望使用jQuery ajax调用，那么您需要某种形式的告诉Angular ajax调用已经完成：看看promise服务。

一个可能有效的快速（肮脏）修复方法是包装customer对象：

DemoApp.factory('SimpleFactory', function ($rootScope) {
  // ...
  var customer = {};
  // ...

  $.ajax({ 
    // ...
    success: function(data) {
      $rootScope.$apply(function() {
        customer.data = data;
      });
    }
    // ...
  });
});

// In view

<li data-ng-repeat="customer in Customer.data"> <!-- ... --> </li>

DemoApp.factory（'SimpleFactory'，函数（$rootScope）{
// ...
var customer={}；
// ...
$.ajax（{
// ...
成功：功能（数据）{
$rootScope.$apply（函数（）{
customer.data=数据；
});
}
// ...
});
});
//鉴于

一个可能有效的快速（肮脏）修复方法是包装customer对象：

DemoApp.factory('SimpleFactory', function ($rootScope) {
  // ...
  var customer = {};
  // ...

  $.ajax({ 
    // ...
    success: function(data) {
      $rootScope.$apply(function() {
        customer.data = data;
      });
    }
    // ...
  });
});

// In view

<li data-ng-repeat="customer in Customer.data"> <!-- ... --> </li>

DemoApp.factory（'SimpleFactory'，函数（$rootScope）{
// ...
var customer={}；
// ...
$.ajax（{
// ...
成功：功能（数据）{
$rootScope.$apply（函数（）{
customer.data=数据；
});
}
// ...
});
});
//鉴于

一个可能有效的快速（肮脏）修复方法是包装customer对象：

DemoApp.factory('SimpleFactory', function ($rootScope) {
  // ...
  var customer = {};
  // ...

  $.ajax({ 
    // ...
    success: function(data) {
      $rootScope.$apply(function() {
        customer.data = data;
      });
    }
    // ...
  });
});

// In view

<li data-ng-repeat="customer in Customer.data"> <!-- ... --> </li>

DemoApp.factory（'SimpleFactory'，函数（$rootScope）{
// ...
var customer={}；
// ...
$.ajax（{
// ...
成功：功能（数据）{
$rootScope.$apply（函数（）{
customer.data=数据；
});
}
// ...
});
});
//鉴于

您的问题是js（函数“SimpleFactory.getCustomer（）”）在ajax调用返回之前返回

此外，您应该在Angular中使用$http，而不是jquery的ajax，因为：

$http返回与angular中的其他区域类似的“承诺”，这意味着.success、.done与angular一致
$http在POST请求时为您将内容类型设置为“application/json”
$http success和error回调将在angular上下文中执行，因此您无需手动触发摘要循环-如果使用jQuery，则可能需要调用$apply

像这样：

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

DemoApp.factory('SimpleFactory', ['$http', function ($http) {
    var factory = {};

    factory.getCustomer = function () {
        var promise = $http.post('Home.aspx/getname', {name: ''});
        promise.catch(function(error) {
            alert(error);
        });            

        return promise;
    };

    return factory;
}]);

DemoApp.controller('SimpleController', ['$scope', 'SimpleFactory', function ($scope, SimpleFactory) {
    SimpleFactory.getCustomer().then(function(customer) {
        $scope.Customer = customer;
    });    
}]);

您的问题是js（函数“SimpleFactory.getCustomer（）”）在AJAX调用返回之前返回

此外，您应该在Angular中使用$http，而不是jquery的ajax，因为：

$http返回与angular中的其他区域类似的“承诺”，这意味着.success、.done与angular一致
$http在POST请求时为您将内容类型设置为“application/json”
$http su