angularjs 根据下拉选择,如何以Angular js显示表格中的当前范围值

olqngx59  于 2022-10-31  发布在  Angular
关注(0)|答案(1)|浏览(162)

要求:当我进入默认数据加载页面时,(默认数据在scope中可用),但当我选择特定的教学大纲时,我需要仅显示选定的教学大纲数据,因此我清除了scope.quizdata并将过滤后的数据分配给scope.quizdata。现在,scope值符合要求,但未反映在显示中(显示默认数据,但我需要过滤后的数据)

$scope.filterSyllabus = function () {
            var data = $scope.quizdata

            $scope.quizdata = [];

            var getsyllabuslistarray = [];
            if (data.length > 0) {
                 getsyllabuslistarray = data.filter((item) => {
                    if ($scope.assessment.sellectedSyllabusName.length > 0) {
                        if (item.syllabus_id == $scope.assessment.sellectedSyllabusName[0].id) {
                            return item;
                        }
                    }else{
                       return $scope.originalQuizData;
                    }
                });

                $scope.quizdata = getsyllabuslistarray             
            }
        }

<div class="box box-solid " ng-class="flashback" ng-if="quizdata">
    <div class="box-body">
        <flash-message duration="5000" show-close="true" on-dismiss="myCallback(flash);">
        </flash-message>
        <loading></loading>
        <!-- Color Picker -->
        <div ng-class="quizlistmobile">
            <table class="table table-bordered bordered table-striped table-condensed datatable" ng-if="quizdata" datatable="ng" ui-jq="dataTable" ui-options="dataTableOpt">
                <p>{{quizdata}}</p>
                <thead>
                    <tr>
                        <th>S.No.</th>
                        <th>syllabus</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-if="n.id!=1" ng-repeat="n in quizdata">
                        <td class="rowquiz">{{$index+1}}</td>
                        <td class="rowquiz">{{ n.syllabus_id }}</td>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- /.form group -->
        </div>
        <!-- /.box-body -->
    </div>
</div>
ws51t4hk

ws51t4hk1#

重新指派系结变数可能会中断系结,导致系结数据停止更新。使用您要重设的数组时,请先清空,然后推入新值。这会保留对象指涉,因此也会保留监看范围成员。

$scope.filterSyllabus = function () {
    const filterId = $scope.assessment?.selectedSyllabusName[0]?.id;
    if (filterId && data.length > 0) {
        const filteredData = $scope.quizdata.filter((item) => {
            if (item.syllabus_id == filterId) {
                return item;
            }
        });
        $scope.quizdata.length = 0;
        $scope.quizdata.push(...filteredData);        
    }
}

我做了一些假设和修正:

  1. sellectedSyllabusNameselectedSyllabusName的排印错误
  2. filterId应为非零的正整数
    1.不应筛选无效的filterId

相关问题