javascript - 使用 AngularJS 如何在 Accordion 中显示新数据而不重新加载页面

标签 javascript html angularjs twitter-bootstrap

我有一个下拉框，我可以在其中选择几个城市之一并使用 ng-model 绑定(bind)它。在搜索函数内的 AngularJS Controller 中，我将该变量与一个数字进行比较 - 如果该特定数字匹配，则执行服务器调用。

这是可行的，但是如果我选择一个不同的城市并再次按下搜索按钮，它将像预期的那样在新的 Accordion 选项卡中填充新数据，但上次搜索的其他数据仍然会在那里。

如何刷新此内容，以便每次搜索只填充一个折叠式选项卡，而无需重新加载整页？

这是我的 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);
                });
            });

        }

    }
};

这是我对下拉菜单、搜索按钮和一个 Accordion 选项卡的 View 。它有五个相同的部分，我不会占用空间将它们放在那里。

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

Accordion 选项卡

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

最佳答案

看来您需要一种重置方法来清除以前的数据，然后再将新结果绑定(bind)到您的范围。

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

    /* ... */
};

关于javascript - 使用 AngularJS 如何在 Accordion 中显示新数据而不重新加载页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35369313/

上一篇：javascript - 如何仅在第一次时按标题重新加载页面

下一篇：javascript - 403-禁止 PHP 中的文件处理某些请求

相关文章：

javascript - 使用堆栈跟踪记录 “Warning” 而不是 “Error”

javascript - 如何避免在 map 迭代 block 中创建多个新函数

javascript - 使用 success() 和 error () 测试 Controller

javascript - 我应该将动态生成的 jQuery Mobile 页面放在哪里

angularjs - 如何创建一个 npm 脚本来运行多个命令来运行一些测试？

javascript - 根据 Javascript，DIV 的宽度不是什么，为什么？

java - JSoup 从 html 文件中按顺序解析文本和链接

javascript - 动态 id 分配给可折叠 div

javascript - AngularJS Controller 不能在嵌套 Controller 中工作

css - ionic - 在 iOS 10 的输入字段中复制/粘贴不起作用

©2024 IT工具网  联系我们