Параметр выпадающего не выбран - angularjs

0

Я привязываю номера к выпадающему списку.

При загрузке страницы выбранный номер по умолчанию - 3. Он должен быть равен 1.

Кроме того, когда я выбираю другие варианты, такие как 2 и 1 в раскрывающемся списке, их не выбрано. Это просто остается 3. Почему это происходит.

Проблема. Проблема связана с ng-классом. Если я удалю выражение ng-класса для Next, он отлично работает. Но я хочу, чтобы Next & Last был отключен, когда пользователь выбирает последнюю страницу.

Я предполагаю, что $scope.LastPageNumber назначается в promise и, следовательно, значение не остается. Это причина ошибки. Это не так. Но тогда как это исправить.

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       
}
Теги:

3 ответа

2

Вы можете сделать это следующим образом:

    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>

Вот плункер

1

Вы должны использовать директиву 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/

  • 0
    Я использовал ng-options. Выбор по умолчанию все еще 3. Что может быть с этим
  • 0
    BindPageNumbers вызывается в promise . Может ли это быть причиной. Обновил мой вопрос. Пожалуйста, посмотрите
0
<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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню