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

Question

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

问题是，当我在下拉列表中选择一个值时，什么也没有发生。因为作用域变量与前一个没有变化。

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。

尝试制作 fiddle ，但不知道如何处理 promise - http://jsfiddle.net/bpq5wxex/2/

Answer 1

对于您的 OP，SelectedPage 只是 原始变量。

每个 Angular 指令都会创建新的范围。

所以，SelectedPage 在下拉列表更改后不会在 ng-repeat 范围之外更新，即在您的 Controller 的父范围内。为此，请使用 对象变量 而不是原始数据类型，因为它通过具有相同内存位置的引用来更新值。

尝试以这种方式在 Controller 中定义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);

}