Question

我将数字绑定到下拉列表。

页面加载时，默认选择的数字为3.应为1.

另外，当我选择其他选项，如2＆amp;下拉列表中的1，没有选中。它仍然是3.为什么会发生这种情况。

问题： 问题在于ng-class。如果我删除Next的ng-class表达式，它可以正常工作。但我想要Next＆amp;当用户选择最后一页时，Last被禁用。

我猜，$scope.LastPageNumber已在promise中分配，因此该值不会停留。这就是bug的原因。不是吗。但接下来如何解决这个问题。

HTML：

<ul class="pagination custom-pagination">
    <li ng-class="{disabled: SelectedPage<=1}"><a href="#">First</a></li>
    <li ng-class="{disabled: SelectedPage<=1}"><a href="#">Prev</a></li>        
    <li>
        <select ng-model="SelectedPage" ng-options="Number for Number in PageNumbers">                
        </select>
    </li>             
    <li ng-class="{disabled: SelectedPage=LastPageNumber}"><a href="#">Next</a></li>
    <li><a href="#">Last</a></li>
</ul>

JS：

$scope.SelectedPage;
$scope.LastPageNumber;
$scope.PageNumbers = [];
$scope.UserReport = [];

GetReport();
console.log($scope.SelectedPage); //print undefined
console.log($scope.LastPageNumber); //print undefined
function GetReport() {
        var promise = Factory.GetReport();
        promise.then(function (success) {
            if (success.data != null && success.data != '') {
                $scope.UserReport = JSON.parse(success.data);
                BindPageNumbers(9);                    
            }
            else {
                $scope.UserResponsesReport = [];
            }
        },
        function (error) {
            console.log(error);
        });
    }

function BindPageNumbers(totalRows) {
    $scope.LastPageNumber = Math.ceil((totalRows / 3));
    for (var i = 1; i <= $scope.LastPageNumber ; i++) {
        $scope.PageNumbers.push(i);
    }
    $scope.SelectedPage = $scope.PageNumbers[0]; //set default page number as 1 
    console.log($scope.PageNumbers[0]); //prints 1       
}

Answer 1

你可以这样做：

    var app = angular.module('App',[]);

app.controller("ctrl",function($scope){

    $scope.SelectedPage;
    $scope.LastPageNumber;
    $scope.PageNumbers = [];

    BindPageNumbers(9);

    function BindPageNumbers(totalRows) {
        $scope.LastPageNumber = Math.ceil((totalRows / 3));
        for (var i = 1; i <= $scope.LastPageNumber ; i++) {
            $scope.PageNumbers.push(i);
        }
       $scope.SelectedPage = $scope.PageNumbers[0]; //set default page number as 1        
    }

});

在HTML中：

<body ng-app="App" ng-controller="ctrl">
<select ng-model="SelectedPage" ng-options="number for number in PageNumbers"></select>

以下是plunker

Answer 2

您应该使用ng-options指令：

HTML：

<div ng-app="app">
    <div ng-controller="mainController">
        <select ng-model="SelectedPage" ng-options="PageNumber for PageNumber in PageNumbers">
        </select>
        {{SelectedPage}}
    </div>
</div>

JS：

angular.module('app', [])
.controller('mainController', function($scope) {
    $scope.PageNumbers = [1, 2, 3];
    $scope.SelectedPage = $scope.PageNumbers[0];
});

在这里工作小提琴：http://jsfiddle.net/ben1729/daL8r5b9/1/

Answer 3

<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selected" ng-options="number for number in PageNumbers">
<option>{{number}}</option>            
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

$scope.PageNumbers = [1,2,3];
$scope.selected=$scope.PageNumbers[0];
});
</script>
</body>

未选择下拉选项 - angularjs

3 个答案: