在Angular视图中下拉值

Dropdown holding of value in Angular view

本文关键字:Angular 视图      更新时间:2023-09-26

我有一个独特的情况。我有一个名为caseStatus的下拉菜单(请参阅下面的代码),它实际上是在ng-repeat期间写入的,但它与包含Case status列表的模型绑定在一起。显然,在渲染页面后,页面上有多个这样的下拉列表。所有这些都很好。问题是法官可以改变案件的状态。我正在工作的一个功能,将处理,我相信它会工作。我的问题是如何做以下两件事(我怀疑这两件事可能都可以用一种方法解决):

  1. 确保每个下拉菜单在页面刷新或返回时保持其最后值

  2. 确保它加载到ng-repeat期间最后的位置。ng-repeat正在使用的模型中有一个字段具有Case Status的值。

下面是代码。这里有一个注释,说明哪个下拉菜单有问题:

<div ng-controller="CaseListCtrl">
    <div class="row" ng-show="$parent.loggedin">
        <div class="col-sm-12 calselectrow">
            <div class="inner-addon left-addon">
                <span class="glyphicon glyphicon-calendar calicon"></span>
                <input type="text" id="calpick" ng-model="date" jdatepicker />
                <i class="glyphicon glyphicon-calendar calclick"></i>
                <a href="#" class="btn btn-primary flat-edge">>></a>
                <span class="bluedept">Department:</span>
                <select class="selectpicker deptpicker" id="deptSelect" selectpicker data-ng-model="department" ng-change="getCalendar();">
                    <option ng-repeat="department in departments">{{department.CourtRoom}}</option>
                </select>
            </div>
        </div>
    </div>
    <div class="row" ng-show="$parent.loggedin">
        <div>
            <div class="col-sm-8 col-sm-offset-2 caselist" ng-model="cases" ng-repeat-start="case in cases |  orderBy: ['sequence', 'AmPm', 'Sched_Time', 'Case_Number']">
                <div class="sequence">
                    <input type=text class="seq-box" size="1" value="{{case.sequence}}" />
                    <!-- Add hidden field to hold the CalendarID value for updating the sequence later-->
                    <input type="hidden" name="CalendarID_{{case.Case_Number}}" value="{{case.CalendarID}}" />
                </div>
                <div class="casetitle">
                    <span class="caselink">{{case.Case_Number}}</span>
                    <a href="calendar" data-toggle="tooltip" data-placement="top" title="Calendar" class="btn btn-xs btn-danger calicon-view" tooltip>
                        <span class="glyphicon glyphicon-calendar"></span>
                    </a>
                    <a href="documents/{{case.Case_Number}}" data-toggle="tooltip" data-placement="top" title="Documents" class="btn btn-xs btn-danger calicon-view" tooltip>
                        <span class="glyphicon glyphicon-file"></span>
                    </a>
                    <a href="parties/{{case.Case_Number}}" data-toggle="tooltip" data-placement="top" title="Parties" class="btn btn-xs btn-danger calicon-view" tooltip>
                        <span class="glyphicon glyphicon-user"></span>
                    </a>
                    <select class="form-control" id="caseStatus" name="caseStatus" ng-model="caseStatus.statusID" ng-change="setStatus();" ng-options="castStatus.statusName for caseStatus in castStatus track by caseStatus.statusName" required></select><!-- This is the dropdown in question-->
                        {{case.Case_Title}}
</div>
            </div>
            <div class="col-sm-8 col-sm-offset-2 caselist-bottom">
                <div class="col-sm-9 col-sm-offset-1">
                    <div class="hearing-time">{{case.Sched_Time}}&nbsp;{{case.AmPm}}</div>
                    <div class="hearing-title">{{case.Event}}</div>
                </div>
            </div>
            <div ng-repeat-end></div>
        </div>
    </div>
</div>

我如何做到这一点?

您正在开发SPA(单页应用程序)吗?"页面被刷新或返回到"是什么意思?如果重新加载整个页面,则无法检索最后的值,因为控制器将重新初始化。你必须将值保存在某个地方,例如数据库或cookie,并从注入到控制器的服务中检索它们…