Question

虽然看起来像一个简单的问题，但发现很难解决。有一个分页组件，有一个按钮＆amp;下拉菜单。用户可以通过单击按钮或在下拉列表中选择该页码来转到页面。

问题是，当我在下拉列表中选择一个值时，没有任何反应。因为范围变量与前一个变量没有变化。

ASPX：

<div data-ng-app="app" data-ng-controller="ReportsCtrl">
<div id="paging-top">                
 <div>
   <ul>         
     <li>
       <select data-ng-model="SelectedPage" data-ng-change="ShowSelectedPage();" 
        data-ng-options="num for num in PageNumbers track by num">
       </select>
     </li>
     <li data-ng-click="ShowNextPage();"><a href="#">Next</a></li>         
   </ul>
  </div>
</div>

的 app.js

var app = angular.module("app", ["ngRoute"]);

ReportsCtrl.js

app.controller("ReportsCtrl", ["$scope","ReportsFactory",function ($scope,ReportsFactory) {

init();
var init = function () { 
  $scope.ShowReport(1);
}

$scope.ShowReport = function (pageNumber) {
  GetUserResponsesReport(pageNumber);
} 

function GetUserResponsesReport(pageNumber) {

    $scope.UserResponsesReport = [];        
    var promise = ReportsFactory.GetReport();
    promise.then(function (success) {
        if (success.data != null && success.data != '') {                
            $scope.UserResponsesReport = success.data;                
            BindPageNumbers(50, pageNumber);
        }            
    });        
}

function BindPageNumbers(totalRows, selectedPage) {        
    $scope.PageNumbers = [];
    for (var i = 1; i <= 5 ; i++) {
        $scope.PageNumbers.push(i);
    }
    $scope.SelectedPage = selectedPage;        
}

$scope.ShowSelectedPage = function () {
    alert($scope.SelectedPage);
    $scope.ShowReport($scope.SelectedPage);
}

 $scope.ShowNextPage = function () {        
    $scope.SelectedPage = $scope.SelectedPage + 1;
    $scope.ShowReport($scope.SelectedPage);        
}   
}]);

假设，下拉列表中的选定值为1.当我在下拉列表中选择2时，警报显示1。单击Next后，下拉选项会按预期更改为2。现在，当我在下拉列表中选择1时，警报显示2。

试图做一个小提琴，但不知道怎么处理promise - http://jsfiddle.net/bpq5wxex/2/

Answer 1

OP SelectedPage 只是原始变量。

每个角度指令都会创建新范围。

因此，更改下拉列表后，选定页面不会在 ng-repeat 范围之外更新，即在作为控制器的父作用域中。为此，请使用对象变量而不是原始数据类型，因为它通过具有相同内存位置的引用更新值。

尝试以这种方式在控制器中定义 SelectedPage 对象。

$scope.objSelectedPage = {SelectedPage:''};

HTML中的

<select data-ng-model="objSelectedPage.SelectedPage" data-ng-change="ShowSelectedPage();"

在 ShowSelectedPage

中

 $scope.ShowSelectedPage = function () {

    console.log($scope.objSelectedPage.SelectedPage);
    $scope.ShowReport($scope.objSelectedPage.SelectedPage);

}

范围变量不用ng-change更新 - angularjs

1 个答案: