范围变量不用ng-change更新 – angularjs
发布时间:2020-12-17 07:09:06 所属栏目:安全 来源:网络整理
导读:虽然看起来像一个简单的问题但很难解决. 有一个分页组件,有一个按钮下拉菜单.用户可以通过单击按钮或在下拉列表中选择该页码来转到页面. 问题是,当我在下拉列表中选择一个值时,没有任何反应.因为范围变量与前一个变量没有变化. ASPX: div data-ng-app="app"
虽然看起来像一个简单的问题但很难解决.
有一个分页组件,有一个按钮&下拉菜单.用户可以通过单击按钮或在下拉列表中选择该页码来转到页面. 问题是,当我在下拉列表中选择一个值时,没有任何反应.因为范围变量与前一个变量没有变化. 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作用域之外更新. 尝试以这种方式在控制器中定义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); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |