我的自定义网格由angularJs ng-repeat生成无效

时间:2017-04-08 10:28:10

标签: angularjs asp.net-web-api asp.net-mvc-5

我从Web API获得响应,数据来自Customer,这是一个JSON集合。但ng-repeat不起作用。无法查看网格中的数据。我正在保存来自客户集合中的Web API的数据,这是一个JSON集合

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<script src="Scripts/angular.js"></script>
<script src="Scripts/Customer.js"></script>
<body>
    <script type="text/javascript">
        function BindingCode($scope,AnyObject,$http)
        {
            $scope.Customer = AnyObject;
            $scope.Customers = [];//JSON data


            $scope.$watch(Customer.CustomerAmount, function () {
                if($scope.Customer.CustomerAmount<1)
                {
                    $scope.Customer.CustomerAmountColor = "white";
                }
                else if($scope.Customer.CustomerAmount>0 && $scope.Customer.CustomerAmount<=100)
                {
                    $scope.Customer.CustomerAmountColor = "yellow";
                }
                else
                {
                    $scope.Customer.CustomerAmountColor = "red";
                }
            });
            $scope.Submit = function () {
                if($scope.Customer.CustomerName.length==0)
                {
                    alert("Not a proper data");
                }
                else
                {
                    debugger;
                    //$http.post("http://localhost:64351/api/Customer", $scope.Customer).success(function (data) {
                    //    //$scope.Customer = data;
                    //    $scope.Customers = data;
                    //    $scope.Customer = {};
                    //});


                    $http({ method: 'POST', url: 'http://localhost:64351/api/Customer', data: $scope.Customer }).
                    then(function successCallback(response) {
                        $scope.Customers = response;
                        $scope.Customer = {};
                    },
                    function errorCallback(response)
                    {
                        //called when error happens
                    });

                }
            }
        }
        var myApp = angular.module("myApp", []);
        myApp.controller('CustomerController', BindingCode);
        myApp.service('AnyObject', Customer);
    </script>

    <div ng-app="myApp">
        <div ng-controller="CustomerController">
            Sales Date Time {{::Customer.SalesDateTime}}<br/><br/>
            Customer Code <input ng-model="Customer.CustomerCode" id="txt1" type="text" /><br/><br/>
            Customer Name <input ng-model="Customer.CustomerName" id="txt2" type="text" /><br /><br />
            Customer Amount <input ng-model="Customer.CustomerAmount" style="background:{{Customer.CustomerAmountColor}}" id="txt3" type="text" /><br /><br />
            <input ng-click="Submit()" id="Submit1" type="submit" value="Submit" /><br/><br/>

            {{::Customer.SalesDateTime}}<br/>
            {{Customer.CustomerCode}}<br/>
            {{Customer.CustomerName}}<br/>
            {{Customer.CustomerAmount}}<br/>
            <table>
                <tr>
                    <td>Customer Code</td>
                    <td>Customer Name</td>
                    <td>Customer Amount</td>
                    <td>Sales DateTime</td>
                </tr>

                <tr ng-repeat="cust in Customers">//here its not working
                    <td>{{cust.CustomerCode}}</td>
                    <td>{{cust.CustomerName}}</td>
                    <td>{{cust.CustomerAmount}}</td>
                    <td>{{cust.SalesdateTime}}</td>
                </tr>
            </table>

        </div>
    </div>

</body>
</html>

0 个答案:

没有答案