javascript - 如何在使用 Angularjs 刷新网页后保持下拉列表选择

Question

我正在使用 AngularJs、HTML 和 PHP 编写和应用程序。 In the application I have a dropdown list, which when an option is selected a table is populated with related data drawn from a database.我可以在表中添加或删除信息。这非常有效。但是，我面临的挑战是每次编辑表格时，网页刷新/路由都会重新加载，并且下拉列表会返回到其默认值。这样做的结果是用户必须手动重新选择下拉列表值才能对表执行每个操作。如何更改代码以保留/保留最后选择的选项值，并在网页/路由重新加载时选择所述下拉列表选项？

我看到很多关于为下拉列表设置初始默认值的帮助回复。然而，这不是我想要实现的目标。我正在尝试设置重新加载后的值或网页重新加载后的值。

下面是我试过的一部分。我正竭尽全力想弄清楚。感谢您的帮助。

编辑

问题已解决
更改前的 HTML

<select id="b_year" ng-options="b.year for b in budgets track by b.year" ng-model="b.selectedBudget" ng-change="getBudgetItems(b.selectedBudget.year)" required><option value="">-- Choose budget year --</option></select>

带有解决方案更改的 HTML

<select id="b_year" ng-options="b.year for b in budgets" ng-model="b.selectedBudget" ng-init="b.selectedBudget" ng-selected="getBudgetItems(b.selectedBudget.year)" required><option value="">-- Choose budget year --</option></select>

更改前的 Controller 片段

$scope.reloadRoute();
$scope.items.push({'line_item': li.line_item, 'weight': li.weight, 'allocated': li.allocated});

localStorage['b_year'] = year; //Store the selected year in local storage for later use
budget_size = server.getBudgetSize(); 

for(var i = 0; i < budget_size; i++){
  if($scope.budgets[i].year === localStorage['b_year']){ 
    $scope.b.selectedBudget[i] = localStorage['b_year'];
  }else{
  
  }
}

具有解决方案更改的 Controller

app.controller(.... {
    ....
 (function(){
    $http.get( //Get info on budgets
        "http://localhost/TrGway/getbudgetinfo.php"
    )  
    .success(function(data){
       $scope.budgets = data.budgets;                
        for(var i = 0; i < data.budgets.length; i++){
            if($scope.budgets[i].year === selectedYear){ 

               $scope.b = {};

               $scope.b.selectedBudget = $scope.budgets[i];
            }      
        }                          
      
    })
    .error(function(data){
       $scope.message = "Error!! Getting Budget Info Failed: " + data;
    });
})(); 
    ....
$scope.$watch("b.selectedBudget.year", function(item) {
       localStorage.setItem("selectedYear", item);
});

});

App.controller('budgetCtrl', ['$scope', '$http', '$location', '$window', '$route', 'BudgetService', function($scope, $http, $location, $window, $route, BudgetService){
    
    (function(){ 
        $http.get( //Get info on budgets
            "http://localhost/TrGway/getbudgetinfo.php"
        )  
        .success(function(data){ 
           server.setBudgets(data.budgets);//Set the budget info in the BudgetService for 
										   //later usage anywhere in the program;   	
           $scope.budgets = data.budgets; 
           budget_size = server.getBudgetSize();
            
           server.getBudgetInfo();
        })
        .error(function(data){
            $scope.message = "Error!! Getting Budget Info Failed: " + data;
        });
    })(); 
    
    (function(){ //Get Line Items Info to populate the table
        $http.get(
            "http://localhost/TrGway/lineItemInfo.php"
        )  
        .success(function(data){
           server.setLineItems(data.items);
           $scope.items = data.items;            
           server.getLineItemsInfo();            
        })
        .error(function(data){
            $scope.message = "Error!! Getting Line Items Info Failed: "+data;
        });
    })();
        
    $scope.addBudget = function(budget){        
       if( budget.year < new Date().getFullYear() ){ 
          alert("Budgets cannot be created retroactively.\n\
                 \nPlease enter a budget year greater than "+ new Date().getFullYear() );
          $scope.budget.year = "";
       }else{ 
         server.addBudget(budget); 
         server.getBudgetInfo();
         $scope.budgets = server.getBudgets();
         $scope.budget = {};//Clear the add budget form
      }
    };
    
    $scope.getBudgetItems = function(year){ 
	/*This is where info on the budget for the selected year is retrieved and passed to the table
	  This works great every time*/
       if( year === undefined ){ //If no year is selected do nothing
         $scope.budget_amount = 0; 
         $scope.budget_amount_used = 0;
         $scope.budget_amount_remaining = 0;
       }else{ 
         Budgets = server.getBudgets(); 
         budget_size = server.getBudgetSize(); 
         for(var i = 0; i < budget_size; i++){
             if(Budgets[i].year === year){ 
                $scope.budget_amount = Budgets[i].starting_amount; 
                $scope.budget_amount_used = Budgets[i].amount_used;
                $scope.budget_amount_remaining = Budgets[i].running_balance;
                amount_remaining = Budgets[i].starting_amount - Budgets[i].amount_used;
                percent_used += (Budgets[i].amount_used / Budgets[i].starting_amount * 100);
                server.setSelectedBudget(Budgets[i]);
             }else{
                //$scope.budget_amount = 0; 
             }           
         }
         server.setPercentUsed(percent_used);
         server.setPercentRemaining( 100 - percent_used);
         server.setAmountRemaining(amount_remaining);
       }      
    };
    /*======================= THIS IS WHERE THE CHALLENGE IS ====================*/
    $scope.addLineItem = function(li, b){ 
	/*This is where the List items are added to the table before page reload*/
        if(($scope.budget_amount_used-0 + li.allocated-0) > $scope.budget_amount){
            alert("Budgeted amount exceeded!!!\nPlease consider revising");
            $location.path('editbudget');
            $scope.li.weight = 0;
            $scope.li.allocation = 0;
        }else{          
			server.setSelectedBudgetYear(b.selectedBudget.year); //Save selected year to a variable
			server.addLineItem(li, b); //Add the new Line items row to database

			$scope.reloadRoute();
			$scope.items.push({'line_item': li.line_item, 'weight': li.weight, 'allocated': li.allocated});

			$scope.b = {};
			//$scope.b.selectedBudget = localStorage.getItem("selected");
			$scope.$watch("b.selectedBudget.year", function(item) {
				localStorage.setItem("selected", item);
			});         
        
          //$scope.b.selectedBudget.year = server.getSelectedBudgetYear();   //I tried this also           
        } 
        $scope.li.line_item = "";
        $scope.li.weight = 0;
        $scope.li.allocation = 0; 
        
		$scope.b.selectedBudget = localStorage.getItem("selected");
		
        /* LEAVING THIS SO YOU CAN SEE WHAT ELSE I HAVE TRIED
		  $scope.b = {};
          $scope.b.selectedBudget = localStorage.getItem("selectedBudget");
          $scope.watch("b.selected", function(item) {
             localStorage.setItem("selected", item);
          });
		  $scope.b.selectedBudget = localStorage['b_year'];
        */
        
       /* LEAVING THIS SO YOU CAN SEE WHAT ELSE I HAVE TRIED
		budget_size = server.getBudgetSize(); 
         for(var i = 0; i < budget_size; i++){
			 if($scope.budgets[i].year === server.getSelectedBudgetYear()){ 
				$scope.b.selectedBudget.year = server.getSelectedBudgetYear();
			 }else{
				 
			 }           
        }*/
       
    };
	
	$scope.deleteLineItem = function(row, b){        
        $http({
           method: "post",
           url: "http://localhost/TrGway/deleteLineItem.php",
           crossDomain: true,
           data:{
               'seq': row.seq,
               'year': row.year,
               'allocated':row.allocated,
               'starting_amount': b.selectedBudget.starting_amount,
               'amount_used': b.selectedBudget.amount_used,
               'running_balance': b.selectedBudget.running_balance
           },
           headers: {
               'Content-Type': 'application/x-www-form-urlencoded'
           }
        })  
        .success(function(response){                                
            if(response.toString() === "success"){         				
              var index = -1;		
              var itemsArr = eval( $scope.items );
              for( var i = 0; i < itemsArr.length; i++ ) {
                if( itemsArr[i].seq === row.seq ) {
                  index = i;
                  break;
                }
              }
              if( index === -1 ) {
                alert( "Something has gone wrong!!\nLine item was not deleted.\nPlease try again" );
              } 
                server.reset();
                server.reload();
                $scope.budget_percent_used = server.getPercentUsed()-0;
                $scope.budget_percent_remaining = server.getPercentRemaining()-0;
                $scope.budget_amount_used = server.getAmountUsed()-0; 
                $scope.budget_amount_remaining = server.getAmountRemaining()-0;
               
                server.setTotalWeighting($scope.totalweighting + row.weight)-0;
                server.setPercentUsed(server.getTotalWeighting())-0;
                server.setPercentRemaining(100 - server.getPercentUsed())-0;
                $scope.items.splice( index, 1 ); //Remove the row with matching index/seq value
                $scope.totalweighting = server.getTotalWeighting(); 
                $scope.budget_percent_used = server.getPercentUsed()-0;
                $scope.budget_percent_remaining = server.getPercentRemaining()-0;*/
                $scope.reloadRoute();                 
            }else{ //If deleting the line item failed
                $location.path('editbudget');
                $scope.budgetmessage = "Line Item Update Failed: "+response;
            }
        })
        .error(function(response){ //If there was an error connecting to the server
            $scope.budgetmessage = "Error!! Updating Line Item Failed: "+response;
        });        
       row.isEditing = false;
    };
        
    $scope.updateLineItem = function(row){
        $http({
           method: "post",
           url: "http://localhost/TrGway/updateLineItem.php",
           crossDomain: true,
           data:{
               'seq': row.seq,
               'line_item': row.line_item,
               'weight': row.weight,
               'allocated': row.allocated
           },
           headers: {
               'Content-Type': 'application/x-www-form-urlencoded'
           }
        })  
        .success(function(response){                                          
            if(response.toString() === "success"){ 
                $location.path('editbudget');
            }else{
                $location.path('editbudget');
                $scope.budgetmessage = "Line Item Update Failed: "+response;
            }
        })
        .error(function(response){
            $scope.budgetmessage = "Error!! Updating Line Item Failed: "+response;
        });        
       row.isEditing = false;
    };
            
    $scope.cancelLineItemEditing = function(row){
        row.isEditing = false;
    };
    
    $scope.updateBudget = function(b){
        $http({
           method: "post",
           url: "http://localhost/TrGway/updatebudget.php",
           crossDomain: true,
           data:{
               'year': b.selectedBudget.year,                   
               'starting_amount': b.edit_starting_amount
           },
           headers: {
               'Content-Type': 'application/x-www-form-urlencoded'
           }
        })  
        .success(function(response){                                   
            if(response.toString() === "success"){ 
                server.setStartingAmount(b.edit_starting_amount);
                var line_items = server.getLineItems();
                var start_amount = server.getStartingAmount(); 
                var total_weight = 0;
                var amount_used = 0;
                var amount_remaining = 0;
                var percent_used = 0;
                var percent_remaining = 0;
                for(var i = 0; i < line_items.length; i++){
                    //Update the line items on the page immediately
                    line_items[i].weight = ( line_items[i].allocated / start_amount) * 100;
                    total_weight += line_items[i].weight;
                    amount_used += line_items[i].allocated-0;
                    //Update the line items in the database immediately
                    $scope.updateLineItem(line_items[i]);
                }
                                
                server.load();
                
                percent_used = ( amount_used / start_amount) * 100; 
                amount_remaining = start_amount - amount_used;
                percent_remaining = 100 - percent_used;
                
                server.setLineItems(line_items);                
                server.setTotalWeighting(total_weight);
                server.setAmountUsed(amount_used);
                server.setPercentUsed(percent_used);
                server.setAmountRemaining(amount_remaining);
                server.setPercentRemaining(percent_remaining);
                
                $scope.items = server.getLineItems();
                $scope.total = 0;
                $scope.total = server.getStartingAmount();
                $scope.totalweighting = server.getTotalWeighting()-0; 
                $scope.budget_amount_used = server.getAmountUsed()-0;        
                $scope.budget_percent_used = server.getPercentUsed()-0;
                $scope.budget_percent_remaining = server.getPercentRemaining()-0; 
                $scope.budget_amount_remaining = server.getAmountRemaining()-0;
               
                $location.path('editbudget');
            }else{
                $location.path('editbudget');
                $scope.budgetmessage = "Budget Update Failed: "+response;
            }
        })
        .error(function(response){
            $scope.budgetmessage = "Error!! Updating Budget Failed: "+response;
        });        
       
        $scope.b = {};
    };
        
    $scope.reloadRoute = function(){ 
       $route.reload();
       server.reload();
	   //alert('Loaded!!');
    };
}]);

<div class="breadcrumbs" id="breadcrumbs">
  <ul class="breadcrumb">
    <li>Home</li>
    <li class="active"><a href="">Add/Edit line Items</a></li>        
    <li style="float: right" ng-controller="authCtrl"><a ng-click="logout();">Logout</a></li>
    <li style="float: right"><a href="#/dashboard">Back</a></li>
  </ul>
</div>

<div class="row" ng-cloak="" ng-controller="budgetCtrl">   
    <div class="col-md-5">
      <section>
        <form name="LineItemForm" class="form-horizontal" role="form">
          <fieldset>            
            <table class="table table-striped">
              <thead>
                <tr>
                  <th style="width: 150px" colspan="1">Select Budget Year To Edit Line Items</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td colspan="1">
                    <div class="col-md-7">
                      <!-- THIS IS WHERE THE YEAR IS SELECTED -->
                      <select id="b_year" ng-options="b.year for b in budgets track by b.year" ng-model="b.selectedBudget" ng-change="getBudgetItems(b.selectedBudget.year);" ng-selected="" required>
                        <option value="">-- Choose budget year --</option> 
                      </select>                    
                    </div>
                  </td>                  
                </tr>
                <tr>
                  <th style="width: 150px" colspan="1">{{b.budgetmessage}}</th>
                </tr>
                <tr> 
                    <td>                        
                        <h3>Add Line Item Here</h3>
                        <div class="form-group">
                          <label class="col-md-3 control-label no-padding-right" for="line_item">Line Item</label>
                          <div class="col-md-7">
                             <input type="text" class="form-control" name="line_item" id="line_item" ng-model="li.line_item" ng-disabled="!b.selectedBudget" required/>
                          </div>
                        </div> 
                        <div class="form-group">
                          <label class="col-md-3 control-label no-padding-right" for="weight">weighting %</label>
                          <div class="col-md-7">
                            <input type="number:2" class="form-control" name="weight" id="weight" ng-init="li.weight = 0" ng-model="li.weight" ng-disabled="!b.selectedBudget || !li.line_item || li.line_item.length<5" required/>
                          </div>
                        </div>
                        <div class="form-group">
                          <label class="col-md-3 control-label no-padding-right" for="allocated">Allocated $</label>
                          <div class="col-md-7">
                            <input type="number:2" class="form-control" name="allocated" id="allocated" placeholder="{{li.allocated = (budget_amount * li.weight) / 100 | currency}}" ng-init="li.allocated=0"  ng-model="li.allocated" ng-disabled="!b.selectedBudget || !li.weight" required />
                          </div>
                        </div>
                        <div class="form-group" style="padding-right: 100px;"> 
                          <span class="lbl col-sm-5"> </span>               
                          <div class="col-md-7 message" >
                            <span id="message" class="block input-icon input-icon-right">{{message}}</span>
                          </div>
                        </div>   
                        <div class="form-group">								
                          <div style="padding-right:100px">
                            <button type="submit" class="width-35 pull-right btn btn-sm btn-primary" ng-click="addLineItem(li, b)" data-ng-disabled="LineItemForm.$invalid || li.weight===0 || li.line_item.length < 5">
                                Add Line Item
                            </button>
                          </div>
                        </div>
                    </td>
                </tr>
              </tbody>
            </table>
          </fieldset>
        </form>
      </section>
    </div>
    <div>
      <section>
        <div class="col-lg-14"  style="float: right">
            <form>
                <fieldset>
                  <table class="table table-striped" >
                      <thead>
                        <tr>                   
                           <!--<th>Index</th>-->
                           <th>Line Items</th><th  style="width: 150px">% Weighting</th><th style="width: 150px">Allocation $</th><th style="width: 120px">Tasks</th><!---->
                        </tr>
                      </thead>
                <tbody>
                    <tr data-ng-repeat="row in items" ng-model="items" ng-if="row.year === b.selectedBudget.year"><!--<td>{{$index+1}}</td>-->
                         <td title="'Line Item'" ng-switch="row.isEditing" ng-class="line_item.$dirty ? 'bg-warning' : ''" ng-form="name" demo-tracked-table-cell>
                          <span ng-switch-default class="editable-text">{{row.line_item}}</span>
                          <div class="controls" ng-class="line_item.$invalid && line_item.$dirty ? 'has-error' : ''" ng-switch-when="true">
                            <input type="text" name="line_item" ng-model="row.line_item" class="editable-input form-control input-sm" required />
                          </div>
                         </td>
                         <td>{{ row.weight = row.allocated / budget_amount * 100 | number: 2 }}</td>                        
                         <td title="'Allocation'" ng-switch="row.isEditing" ng-class="allocated.$dirty ? 'bg-warning' : ''" ng-form="allocated" demo-tracked-table-cell>
                          <span ng-switch-default class="editable-text">{{ row.allocated | currency }}</span>
                          <div class="controls" ng-class="allocated.$invalid && allocated.$dirty ? 'has-error' : ''" ng-switch-when="true">
                            <input type="text" name="allocated" ng-model="row.allocated" class="editable-input form-control input-sm" required/>
                          </div>
                         </td>
                         <td>
                           <button class="btn btn-primary btn-sm" ng-click="updateLineItem(row)" ng-if="row.isEditing" ng-disabled="rowForm.$pristine || rowForm.$invalid"><span class="glyphicon glyphicon-ok"></span></button>
                           <button class="btn btn-default btn-sm" ng-click="cancelLineItemEditing(row)" ng-if="row.isEditing"><span class="glyphicon glyphicon-remove"></span></button>
                           <button class="btn btn-default btn-sm" ng-click="row.isEditing = true" ng-if="!row.isEditing"><span class="glyphicon glyphicon-pencil"></span></button>
                           <button class="btn btn-danger btn-sm" ng-click="deleteLineItem(row, b)" ng-if="!row.isEditing"><span class="glyphicon glyphicon-trash"></span></button>
                         </td>
                      </tr>
                      <tr>
                        <td>
                          <h5>
                            <span class="block input-icon input-icon-right">
                               <b>TOTAL (Budget Estimate)</b>     
                            </span> 
                          </h5>
                        </td>
                        <td>
                          <h5>
                            <span class="block input-icon input-icon-right">
                               <b>{{ totalweighting =  budget_amount > 0 ? 100 : 0 | number:2 }}%</b><!---->
                            </span> 
                          </h5>
                        </td>
                        <td>
                          <h5>
                            <span class="block input-icon input-icon-right">
                               <b>{{ budget_amount | currency }}</b> 
                            </span> 
                          </h5>
                        </td><td></td>                
                      </tr>
                      <tr>
                        <td>
                          <h5>
                            <span class="block input-icon input-icon-right">
                               <b>BUDGET AMOUNT USED</b>    
                            </span> 
                          </h5>
                        </td>
                        <td>
                          <h5>
                            <span class="block input-icon input-icon-right">
                               <b>{{ budget_percent_used = budget_amount_used > 0 ? budget_amount_used * 100/budget_amount : 0 | number:2 }}%</b>
                              <!--Adding the -0 forces the compiler to treat the value as a number-->
                            </span> 
                          </h5>
                        </td>
                        <td>
                          <h5>
                            <span class="block input-icon input-icon-right">
                                <!--{{ budget_amount_used + li.allocated | currency }}--> 
                                <b>{{ budget_amount_used | currency }}</b> 
                            </span> 
                          </h5>
                        </td><td></td>                
                      </tr>
                      <tr>
                        <td>
                          <h5>
                            <span class="block input-icon input-icon-right">
                               <b>BUDGETED AMOUNT REMAINING</b>    
                            </span> 
                          </h5>
                        </td>
                        <td>
                          <h5>
                            <span class="block input-icon input-icon-right">
                               <b>{{ budget_percent_remaining = 100 - budget_percent_used | number:2 }}%</b>
                              <!--Adding the -0 forces the compiler to treat the value as a number-->
                            </span> 
                          </h5>
                        </td>
                        <td>
                          <h5>
                            <span class="block input-icon input-icon-right">
                                <!--{{ budget_amount_remaining - li.allocated | currency }}-->
                                <b>{{ budget_amount_remaining | currency }}</b>
                            </span> 
                          </h5>
                        </td><td></td>                
                      </tr>
                </tbody>
                  </table>
                </fieldset>
              </form>
          </div>
      </section>      
    </div>    
</div>

Answer 1

我会做这样的事情:

app.controller(.... {
    ....
    $scope.b = {};
    $scope.b.selected = localStorage.getItem("selected");
    $scope.watch("b.selected", function(item) {
        localStorage.setItem("selected", item);
    });
    ....
});

编辑

所以我们怀疑初始值在某处被覆盖了。以下是如何调试它的一些帮助:您可以在 $scope.b 上定义一个属性 setter ，它可以警告或中断调试器。使用这样的东西:

$scope.b = {
    set selectedBudget(v) {
        debugger;
        // or alert(1);
    }
};