当DDL选择更改时,ng-repeat不会更新数据

时间:2017-03-27 15:52:13

标签: angularjs asp.net-mvc repeat

我有一个ng-repeat,它在页面加载时加载数据。我还在_layout页面上有一个下拉列表,它会加载组名称。我想要完成的是,当我更改选择时,ng-repeat拉取按组名称过滤的数据。但是,当我尝试它时,它能够获取数据,但无法更新表。该表仍显示第一次加载时加载的第一个数据。

以下是我的代码:

的index.html

 <div ng-controller="GetCashDataController" ng-model="CashData">
    <h5>Tablular Data</h5>
    <table class="table table-striped table-bordered table-condensed">
        <thead class="tableHeader">
            <tr>
                <td>REQ. ID</td>
                    <td>CALL TYPE</td>
                    <td>PAYMENT DUE DATE</td>
                    <td>EXPECTED OPENNING BALANCE</td>
                    <td>AMOUNT</td>
                    <td>EXPECTED CLOSING BALANCE</td>                
            </tr>
        </thead>
        <tbody data-ng-repeat="c in CashData" class="tableData">
            <tr>
                <td>{{ c.Cash_id }}</td>                    
                <td>{{c.Calltype}}</td>
                <td>{{c.Payment_due_date.slice(6,-2) | date: 'MM-dd-yyyy'}}</td>
                <td>{{c.BALANCE}}</td>
                <td>{{c.amount}}</td>
                <td>{{c.Expected}}</td>
            </tr>
        </tbody>

    </table>

Controller.js

"use strict";

myAppModule.controller("GetCashDataController", function ($scope, GetCashDataService, SharedService) {
    $scope.CashData = null;
    $scope.CashDataTIC = null;
    $scope.chngdVal = 6;

    $scope.$watch(function () {
        return SharedService.getChangedVal();
    }, function (newValue) {
        $scope.chngdVal = newValue;
        console.log('chngdVal inside GetCashDataController watch ' + $scope.chngdVal);
    });

    GetCashDataService.GetCashData($scope.chngdVal).then(function (d) {
        $scope.CashData = d.data;
        console.log(d.data);        
    }, function () {
        alert('Failed');
    });
    GetCashDataService.GetCashDataTIC($scope.chngdVal).then(function (dTIC) {
        $scope.CashDataTIC = dTIC.data;
        console.log($scope.CashDataTIC);
    }, function () {
        alert('Failed');
    });

});



//User Controller


myAppModule.controller('GetUserGroupsController', function ($scope, GetUserGroupsService, SharedService, GetCashDataService) {
    $scope.Message = "Helllo";
    $scope.UserGroups = [];

    $scope.CashData = [];
    $scope.CashDataTIC = [];

    $scope.changedGrp = '';

    $scope.appModule = 'Cash';
    $scope.userId = 'anjhb287a';

    //$scope.selectedGroup = $scope.UserGroups[0];

    GetUserGroupsService.GetUserGroups($scope.appModule, $scope.userId) //$scope.paramList
        .then(
        function (d) {
            console.log(d);
            $scope.UserGroups = d.data;
        },
        function (e) {
            console.log(e); //Failed
        });

    $scope.changedValue = function (item) {
        console.log('Item ' + item);

        $scope.$watch('chngdVal', function () {
            SharedService.setchangedVal(item);
            GetCashDataService.GetCashData(item).then(function (d1) {
                $scope.CashData = d1.data;                
                console.log($scope.CashData);
            }, function () {
                alert('Failed');
            });

            GetCashDataService.GetCashDataTIC(item).then(function (dTIC1) {
                $scope.CashDataTIC = dTIC1.data;                
                console.log($scope.CashDataTIC);
            }, function () {
                alert('Failed');
            });

        });

    };
});

Services.js

"use strict";

myAppModule.factory('GetCashDataService', function ($http) {
    var fac = {};

    fac.GetCashData = function (pm) {
        console.log('Inside GetCashData with pm = ' + pm);
        //return $http.get('/Data/GetCashDataDB');
        return $http({
            method: 'GET',
            url: '/Data/GetCashDataDB',
            params: {selectedGrp: pm}
        });
    }
    fac.GetCashDataTIC = function (pm1) {
        console.log('Inside GetCashDataTIC with pm = ' + pm1);
        //return $http.get('/Data/GetCashDataTIC');
        return $http({
            method: 'GET',
            url: '/Data/GetCashDataTIC',
            params: { selectedGrp: pm1 }
        });

    }

    console.log('FAC ' + fac);
    return fac;
});


myAppModule.factory('GetUserGroupsService', function ($http) {
    var fac = {};    
    fac.GetUserGroups = function (p1, p2) {
        //return $http.get('/Data/GetUserGroup');
        return $http({
            method: 'GET',
            url: '/Data/GetUserGroup/',
            params: { appModule: p1, userId: p2 }
        });
    }
    return fac;
});


myAppModule.factory('SharedService', function () {
    var data = {
        changedVal: ''
    };
    console.log('Inside Shared Service ' + data.changedVal);
    return {
        getChangedVal: function () {
            console.log('Get changedVal ' + data.changedVal);
            return data.changedVal;
        },
        setchangedVal: function (chngdVal) {
            console.log('Set changedVal ' + data.changedVal);
            data.changedVal = chngdVal;
        }
    };
});

DataController.cs

//Get: User Groups
        public JsonResult GetUserGroup(string userId, string appModule) //
        {
            List<GET_USERGROUP_Result> userGrps = null;

            using (MyDB dc = new MyDB())
            {
                userGrps = dc.GET_USERGROUP(appModule, userId).ToList();
            }

            return new JsonResult { Data = userGrps, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }

        public JsonResult GetCashDataDB(string selectedGrp)
        {
            List<GET_CASH_TRANSACTIONS_Result> c = null;

            using (MyDB dc = new MyDB())
            {
                c = dc.GET_CASH_TRANSACTIONS(Convert.ToInt32(selectedGrp)).ToList();                
            }

            return new JsonResult { Data = c, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }

我对此很新,任何帮助都非常感谢。 - 提前致谢。

0 个答案:

没有答案