Question

我有一个下拉框，我选择了几个城市中的一个并使用ng-model绑定它。在搜索功能内的AngularJS控制器中，我将该变量与一个数字进行比较 - 如果该特定数字匹配则执行服务器调用。

这是有效的，但是如果我选择一个不同的城市并再次按下搜索按钮，它将在新的手风琴选项卡中填充新数据，就像它应该的那样，但上次搜索的其他数据仍将是那里。

如何刷新此选项，以便在不进行整页重新加载的情况下只为每次搜索填充一个折叠式选项卡？

这是我的AngularJS控制器：

var CapitalRequestMultiMillInquiryController = function($scope, $sce, $rootScope, $modal, $window, CapitalRequestService, PlantService) {


    $rootScope.title = 'Capital Request Multi Mill Inquiry';
    $scope.allMills = [];
    $scope.mill = '';
    $scope.jobNumber = '';
    $scope.description = '';
    $scope.amount = '';
    $scope.amountOperator = '';
    $scope.openOnly = '';
    $scope.projectManager = '';

    //$scope.allUsers = [];

    //UsersService.getUsersWithId().then(function(objectTypes) {
    //    $scope.allUsers = objectTypes
    //});

    //CapitalRequestService.searchMulti("http://tomcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.selectedMill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
    //    $scope.tomahawk = results;
    //    for (var i = 0; i < $scope.tomahawk.length; i++)
    //        $scope.tomahawk[i] = $sce.trustAsHTML($scope.tomahawk[i]);
    //});


    //PlantService.getPlantId().then(function (mills) {
    //    $scope.allMills = mills
    //});

    $scope.search = function(mill) {
        //for each mill
        if ($scope.mill == "620") {
            CapitalRequestService.searchMulti("http://coucmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function(results) {
                $scope.counce = results;
                $scope.counce.forEach(function(item) {
                    // item.projectManager = $sce.trustAsHtml(item.projectManager);
                    item.jobNumber = $sce.trustAsHtml(item.jobNumber);
                    item.description = $sce.trustAsHtml(item.description);
                    item.amount = $sce.trustAsHtml(item.amount);
                });
            });
        } else if ($scope.mill == "622") {
            CapitalRequestService.searchMulti("http://filcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function(results) {
                $scope.filer = results;
                $scope.filer.forEach(function(item) {
                    //   item.projectManager = $sce.trustAsHtml(item.projectManager);
                    item.jobNumber = $sce.trustAsHtml(item.jobNumber);
                    item.description = $sce.trustAsHtml(item.description);
                    item.amount = $sce.trustAsHtml(item.amount);
                });
            });
        } else if ($scope.mill == "608") {
            CapitalRequestService.searchMulti("http://tomcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function(results) {
                $scope.tomahawk = results;
                $scope.tomahawk.forEach(function(item) {
                    //  item.projectManager = $sce.trustAsHtml(item.projectManager);
                    item.jobNumber = $sce.trustAsHtml(item.jobNumber);
                    item.description = $sce.trustAsHtml(item.description);
                    item.amount = $sce.trustAsHtml(item.amount);
                });
            });
        } else if ($scope.mill == "610") {
            CapitalRequestService.searchMulti("http://tridentval.pca.com/api/Inquiry/Inquiry/CapitalRequestMultiMillInquiry/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function(results) {
                $scope.valdosta = results;
            });
        } else if ($scope.mill == "650") {
            CapitalRequestService.searchMulti("http://tridentder.pca.com/api/Inquiry/Inquiry/CapitalRequestMultiMillInquiry/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function(results) {
                $scope.deridder = results;
            });
        } else if ($scope.mill == "651") {
            CapitalRequestService.searchMulti("http://valcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function(results) {
                $scope.whiteMills = results;
                $scope.whiteMills.forEach(function(item) {
                    item.jobNumber = $sce.trustAsHtml(item.jobNumber);
                    item.description = $sce.trustAsHtml(item.description);
                    item.amount = $sce.trustAsHtml(item.amount);
                });
            });
        } else if ($scope.mill == "652") {
            CapitalRequestService.searchMulti("http://valcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function(results) {
                $scope.whiteMills = results;
                $scope.whiteMills.forEach(function(item) {
                    item.jobNumber = $sce.trustAsHtml(item.jobNumber);
                    item.description = $sce.trustAsHtml(item.description);
                    item.amount = $sce.trustAsHtml(item.amount);
                });
            });
        } else if ($scope.mill == "653") {
            CapitalRequestService.searchMulti("http://valcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function(results) {
                $scope.whiteMills = results;
                $scope.whiteMills.forEach(function(item) {
                    item.jobNumber = $sce.trustAsHtml(item.jobNumber);
                    item.description = $sce.trustAsHtml(item.description);
                    item.amount = $sce.trustAsHtml(item.amount);
                });
            });
        } else if ($scope.mill == "") {
            CapitalRequestService.searchMulti("http://coucmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function(results) {
                $scope.counce = results;
                $scope.counce.forEach(function(item) {
                    // item.projectManager = $sce.trustAsHtml(item.projectManager);
                    item.jobNumber = $sce.trustAsHtml(item.jobNumber);
                    item.description = $sce.trustAsHtml(item.description);
                    item.amount = $sce.trustAsHtml(item.amount);
                });
            });

            CapitalRequestService.searchMulti("http://filcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function(results) {
                $scope.filer = results;
                $scope.filer.forEach(function(item) {
                    //   item.projectManager = $sce.trustAsHtml(item.projectManager);
                    item.jobNumber = $sce.trustAsHtml(item.jobNumber);
                    item.description = $sce.trustAsHtml(item.description);
                    item.amount = $sce.trustAsHtml(item.amount);
                });
            });

            CapitalRequestService.searchMulti("http://tomcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function(results) {
                $scope.tomahawk = results;
                $scope.tomahawk.forEach(function(item) {
                    //  item.projectManager = $sce.trustAsHtml(item.projectManager);
                    item.jobNumber = $sce.trustAsHtml(item.jobNumber);
                    item.description = $sce.trustAsHtml(item.description);
                    item.amount = $sce.trustAsHtml(item.amount);
                });
            });

            CapitalRequestService.searchMulti("http://tridentval.pca.com/api/Inquiry/Inquiry/CapitalRequestMultiMillInquiry/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function(results) {
                $scope.valdosta = results;
            });

            CapitalRequestService.searchMulti("http://tridentder.pca.com/api/Inquiry/Inquiry/CapitalRequestMultiMillInquiry/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function(results) {
                $scope.deridder = results;
            });

            CapitalRequestService.searchMulti("http://valcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function(results) {
                $scope.whiteMills = results;
                $scope.whiteMills.forEach(function(item) {
                    item.jobNumber = $sce.trustAsHtml(item.jobNumber);
                    item.description = $sce.trustAsHtml(item.description);
                    item.amount = $sce.trustAsHtml(item.amount);
                });
            });

        }

    }
};

这是我对下拉列表，搜索按钮和ONE手风琴标签的看法。它有五个相同的部分，我不会占用空间。

        <div class="form-group">
            <select class="btn btn-info dropdown-toggle" style="width: 92%" ng-model="mill">
                <option value="">Select a Mill </option>
                <option value="608">Tomahawk Mill</option>
                <option value="610">Valdosta Mill</option>
                <option value="620">Counce Mill</option>
                <option value="622">Filer Mill</option>
                <option value="650">DeRidder Mill</option>
                <option value="651">Wallula Mill</option>
                <option value="652">Jackson Mill</option>
                <option value="653">International Falls Mill</option>
                <!-- <option ng-repeat="mills in allMills" value="{{mills.plantNumber}}">{{mills.plantName}}</option>-->
            </select>&nbsp;
        </div>

搜索按钮

    <!-- Search Button -->
<div class="form-group">
    <br/>
    <button ng-click="search(mill)" type="button" class="btn btn-med btn-danger">
        Search
    </button>
</div>
<!-- -->

手风琴标签

 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
    <accordion close-others="oneAtATime">

        <accordion-group is-open="status.isFirstOpen">
            <accordion-heading>
                Capital Request - Counce Mill <span class="badge pull-right">{{counce.length}}</span>
            </accordion-heading>

            <table class="table table-striped table table-hover">
                <thead>
                <tr>
                    <th>Job Number</th>
                    <th>Description</th>
                    <th>Amount</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="item in counce">
                    <td ng-bind-html="item.jobNumber | addTargetBlank"></td>
                    <td ng-bind-html="item.description | addTargetBlank"></td>
                    <td ng-bind-html="item.amount | addTargetBlank"></td>
                </tr>

                </tbody>
            </table>
        </accordion-group>

Answer 1

在将新结果绑定到您的范围之前，您似乎需要使用重置方法来清除以前的数据。

$scope.reset = function() {

    // remove all existing values
    $scope.counce = null;
    $scope.filer = null;
    $scope.tomahawk = null;
    $scope.valdosta = null;
    $scope.deridder = null;
    $scope.whiteMills = null;
};

$scope.search = function(mill) {

    // reset before assigning new $scope values
    $scope.reset();

    /* ... */
};

Answer 2

您必须告诉angular（使用scope.$apply），只要您按照自己的方式异步更改范围，就会更改范围。见http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

CapitalRequestService.searchMulti("http://coucmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.mill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
           $scope.$apply(function () {
               $scope.counce = results;
               $scope.counce.forEach(function (item) {
                   // item.projectManager = $sce.trustAsHtml(item.projectManager);
                   item.jobNumber = $sce.trustAsHtml(item.jobNumber);
                   item.description = $sce.trustAsHtml(item.description);
                   item.amount = $sce.trustAsHtml(item.amount);
               });
           });
       });

使用AngularJS如何在没有页面重新加载的情况下以手风琴显示新数据

2 个答案: