Question

范围变量SelectedPage未更新。分页ul li有一个下拉列表＆amp;然后是下一个按钮。用户可以通过单击按钮或在选择中选择一个选项来转到页面。当我点击下一步或在下拉列表中选择2时，我希望$scope.SelectedPage的值更改为2.但它始终保持为1.

HTML：

<ul>     
 <li>
   <select ng-model="SelectedPage" ng-change="ShowPageResult()">
     <option value="1">1</option>
     <option value="2">2</option>
   </select>
 </li>
 <li ng-click="SelectedPage = SelectedPage + 1;ShowPageResult();"><a href=" #">Next</a></li> 
</ul>

Ctrl.js

$scope.ShowPageResult = function () {
       console.log($scope.SelectedPage); //always prints 1        
    }

修改 http://jsfiddle.net/g8pLhf79/ 页面加载后，点击＆＃39; Next＆＃39;，no。增量。现在在下拉列表中选择一个值，然后单击下一步。它现在附加＆＃34; 1＆＃34;而不是递增。我希望这有助于理解这个问题。

Answer 1

以下是您可以参考plunker的工作示例。

http://plnkr.co/edit/wOXWXvPZw9AYrqyy486h?p=preview

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.arr = ["0","1"];
  $scope.ShowPageResult = function () {
       alert($scope.SelectedPage); //always prints 1        
    } 
});

请根据您的要求访问这个。 http://plnkr.co/edit/wOXWXvPZw9AYrqyy486h?p=preview

Answer 2

我们去（第二次尝试）： http://jsfiddle.net/g8pLhf79/11/

我进行了微小的更改，让代码按照您的方式工作，一般来说，Angular是将View与模型/控制器分开，因此鼓励您将逻辑与视图分开。但无论如何，这就是你想要它的方式：

<div ng-app="app" ng-controller="ctrl">
<ul>
    <li>
        <select ng-model="SelectedPage" ng-change="ShowPageResult();">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </li>
    <li ng-click="SelectedPage = (SelectedPage * 1+1);ShowPageResult();"><a href=" #">Next</a>

    </li>
    <li>Selected Page : {{SelectedPage}}</li>
</ul>
</div>

控制器：

var app = angular.module("app", []);
app.controller("ctrl", function ($scope) {
    $scope.SelectedPage = 1;
    $scope.ShowPageResult = function () {
        console.log($scope.SelectedPage);
    } 
});

范围变量不变 - angularjs

2 个答案: