Question

我正在尝试从AnguarJs进行webAPI调用。我完全接收成功响应“数据”对象。当它传递到“ng-repeat”下的HTML页面时，它不显示任何记录。

以下是无效的

        <tr ng-repeat = "cust in Customers">
            <td>{{ cust.CustomerName }} </td>
            <td>{{ cust.CustomerCode }}</td>
            <td>{{ cust.CustomerAmount }}</td>
            <td>{{ cust.ProcessDate }}</td>
        </tr>

但是，如果我这样做，它将显示第0个索引记录

<tr ng-repeat = "cust in Customers">
    <td>{{cust[0].CustomerName }} </td>
    <td>{{cust[0].CustomerCode }}</td>
    <td>{{cust[0].CustomerAmount}}</td>
    <td>{{cust[0].ProcessDate }}</td>
 </tr>

注意：在下面的代码中，我将文件拆分为不同的javascript文件，并在主html页面中引用。仅供参考。

我的小提琴链接：JsFiddle

请帮我解决。

function Utility(){
    this.ApplicationVersion = "0.0.1";
    this.ApplicationName = "AngularJs First Project";
    this.getDate = function () {
        var dt = new Date();
        return dt.toDateString();
    }
    this.IsEmpty = function (value) {
        if (value.length == 0) {
            return false;
        }
        else {
            return true;
        }
    }
}

function Customer(utility) {
    this.CustomerCode = "1001";
    this.CustomerName = "Ragu";
    this.CustomerAmount = 100;
    this.CalculateDiscount = function()
    {
        return 10;
    }
    this.ProcessDate = utility.getDate();

}

function Factory()
{
    return {
        CreateCustomer: function (utility) {
            return new Customer(utility);

        }
    }
 }
 
 /// <reference path="Utility.js" />
/// <reference path="Customer.js" />
var myApp = angular.module("myApp", []);

myApp.controller("BindingCode",BindingCode);
myApp.factory("Factory", Factory);
myApp.service("UtilityObj", Utility);
function BindingCode($scope, UtilityObj, Factory,$http)
{
    $scope.Customer = Factory.CreateCustomer(UtilityObj);
    $scope.Customers = [];
    $scope.Utility = UtilityObj;
    $scope.Customer.CustomerCode = "1002";
    $scope.Customer.CustomerName = "Raman";
    $scope.Customer.ProcessDate = UtilityObj.getDate();
    $scope.Color = "blue";
    $scope.$watch("Customer.CustomerAmount", function () {
        if ($scope.Customer.CustomerAmount < 1000) {
            $scope.Color = "Red";
        }
        else {
            $scope.Color = "Green";
        }
    });
    $scope.Submit = function()
    {
        debugger
        if ($scope.Utility.IsEmpty($scope.Customer.CustomerAmount)) {
            debugger
            
            $http.post("http://localhost:61860/api/Customer", $scope.Customer).then(function(data){
                $scope.Customers = data;
                debugger
                    $scope.Customer = {}; // clearing the record
            },
            function(data)
            {
                debugger
                alert("inside error http call" + data);
            }
            );
            
            //$http.post("http://localhost:61860/api/Customer", $scope.Customer).
            //    success(function (data) {
            //    debugger
            //    $scope.Customers = data;
            //    $scope.Customer = {};
            //});
        }
        else {
            alert("No Proper Date");
        }
    }
}

<script src="Scripts/angular.js"></script>
<script src="Customer.js"></script>
<script src="Utility.js"></script>
<script src="app.js"></script>
<body ng-app="myApp">
    <div id="CustScreen" ng-controller="BindingCode">
        CustomerCode : <input type="text" ng-model="Customer.CustomerCode" id="txtCustomercode" /> <br />
        CustomerName : <input type="text" ng-model="Customer.CustomerName" id="txtCustomerName" /> <br />
        CustomerDate : <input type="text" ng-model="Customer.ProcessDate" id="txtCustomerDate" /> <br />
        CustomerAmount : <input type="text" style="background-color:{{ Color }}" ng-model="Customer.CustomerAmount" id="txtCustomerAmount" /><br />
        <br />
        {{ Customer.CustomerCode }} <br />
        {{ Customer.CustomerName }} <br />
        {{ Customer.ProcessDate }}<br />
        {{ Customer.CustomerAmount}} <br />
        <input type="submit" ng-click="Submit()" id="Submit" />
        <table>
            <tr>
                <td>Name</td>
                <td>Code</td>
                <td>Amount</td>
                <td>ProcessDate</td>
            </tr>
            <tr ng-repeat = "cust in Customers">
                <td>{{cust.CustomerName }} </td>
                <td>{{cust.CustomerCode }}</td>
                <td>{{cust.CustomerAmount}}</td>
                <td>{{cust.ProcessDate }}</td>
            </tr>
            </table>
</div>      
</body>

Answer 1

试试这个 $ scope.Customers =数据[0];

无法使用angularjs ng-repeat重复收集值

1 个答案: