Question

我正面临一些关于角度或离子（或其他东西，我不太确定）的奇怪问题。

这是问题所在。我有2个下拉列表，我想在其中一个或两个更改值时执行一些代码。所以我在每个下拉菜单上都进行了更改。但是当触发该函数时，我无法从函数中读取下拉值。该值始终保持初始状态。但是当我只在角度（没有离子）运行相同的代码时，那就行得很好。有趣的是，在我看来，我看到变量已经改变了它的值，但在功能上我看不到这种变化。请赐教......

这是一个例子：

Ionic + Angular示例不起作用：

这是HTML：

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>I will lost my mine soon</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>

  <body>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

    <script id="templates/home.html" type="text/ng-template">
      <ion-view view-title="Home">
        <ion-content class="padding">
          <p>First dropdown value: {{first}}</p>
          <p>Second dropdown value: {{second}}</p>
          <select ng-model="first" ng-options="item for item in items" ng-change="onFirstChange()"></select>

                    <select ng-model="second" ng-options="item for item in items" ng-change="onSecondChange()"></select>
        </ion-content>
      </ion-view>
    </script>

  </body>
</html>

这是JS：

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'templates/home.html',
      controller: 'HomeTabCtrl'
    });
   $urlRouterProvider.otherwise('/home');
})

.controller('HomeTabCtrl', ['$scope', function(scope) {
  // Set some items
  scope.items = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];

  // Define preselected value for first and second select dropdow
  scope.first = 'First';
  scope.second = 'Second';

  // When first dropdown change value read variables
  scope.onFirstChange = function() {
    console.log('Selected first value', scope.first);
    console.log('Selected second value', scope.second);
  };

  // When second dropdown change value read variables
  scope.onSecondChange = function() {
    console.log('Selected second value', scope.second);
    console.log('Selected first value', scope.first);
  };
}]);

以下是正在运行的示例： http://codepen.io/anon/pen/JYeemO?editors=101

这是没有离子效果的例子：

HTML：

<div ng-app="TestModule">
<div ng-controller="Test">
  <p>First dropdown value: {{first}}</p>
  <p>Second dropdown value: {{second}}</p>
  <select ng-model="first" ng-options="item for item in items" ng-change="onFirstChange()"></select>

  <select ng-model="second" ng-options="item for item in items" ng-change="onSecondChange()"></select>
</div>
</div>

JS：

angular.module('TestModule', [])
.controller('Test', ['$scope', function(scope) {

  scope.items = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];

  scope.first = 'First';
  scope.second = 'Second';

  scope.onFirstChange = function() {
    console.log('Selected first value', scope.first);
    console.log('Selected second value', scope.second);
  };

  scope.onSecondChange = function() {
    console.log('Selected second value', scope.second);
    console.log('Selected first value', scope.first);
  };
}]);

运行示例： http://codepen.io/anon/pen/jbQeQQ?editors=101

Answer 1

我认为这是常见的问题：如果你有childScope嵌套于parentScope - 你无法在childScope中修改scope.value（如果scope.value在parentScope中被引入），你可以修改scope.value.x，scope.value.y。（如果你修改scope.value - 在子和父范围内的值会有所不同）

所以只需添加scope.X.first, scope.X.second而不是scope.first, scope.second，它就可以了： http://codepen.io/anon/pen/QjJzmp?editors=101

当下拉列表更改值

1 个答案: