虽然看起来像一个简单的问题但很难解决.
有一个分页组件,有一个按钮&下拉菜单.用户可以通过单击按钮或在下拉列表中选择该页码来转到页面.
有一个分页组件,有一个按钮&下拉菜单.用户可以通过单击按钮或在下拉列表中选择该页码来转到页面.
问题是,当我在下拉列表中选择一个值时,没有任何反应.因为范围变量与前一个变量没有变化.
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.单击“下一步”时,下拉选项将按预期更改为2.现在,当我在下拉列表中选择1时,警报显示2.
试图做一个小提琴,但不知道如何做一个承诺 – http://jsfiddle.net/bpq5wxex/2/
解决方法
使用OP SelectedPage只是原始变量.
每个角度指令都会创建新范围.
因此,在下拉列表更改后,即在作为控制器的父作用域中,SelectedPage不会在ng-repeat作用域之外更新.
为此,请使用Object变量而不是原始数据类型,因为它通过具有相同内存位置的引用更新值.
尝试以这种方式在控制器中定义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);
}
