0

I have a dropdown box where I select 1 of several cities and bind it using ng-model. In the AngularJS controller inside a search function I compare that variable to a number - if that particular number matches then the server call is executed.

This works, however if I select a different city and press the search button again it will populate the new data in the new accordion tab like it's supposed to but the the other data from the last search will still be there.

How do I refresh this so only one accordion tab fills for each search without doing a full page reload?

This is my AngularJS controller:

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);
                });
            });

        }

    }
};

This is my view of the dropdown, the search button, and ONE accordion tab. There are five identical parts to it which I wont take up space putting those there.

        <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

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

accordion tab

 <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>

2 Answers 2

1

It looks like you are in need of a reset method to clear previous data prior to binding new results to your scope.

$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();

    /* ... */
};
0
0

You have to tell angular (using scope.$apply) that you are changing the scope whenever you change it asynchronously as you have. See 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);
               });
           });
       });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.