javascript - AngularJS - watch 无法处理变量

Question

这段代码不起作用，我不知道为什么。

HTML

<select id="provincia" class="form-control" ng-model="ciudades" ng-options="provincia for (provincia, ciudades) in provincias">
 <option ng-model="valor_ciudad" value=''>Elegir</option>
</select>

JS

    $scope.$watch('ciudades', function(newval, oldval){
        debugger;
        if (newval){
            $scope.prov = newval;
        }
    });

我想做什么？我正在尝试获取用户选择的值，因为变量 ciudades 有一个值数组。

$scope.provincias = {Florida:['Miami', 'Orlando']}

如果用户选择佛罗里达，则 $scope.ciudades 将为 ['Miami', 'Orlando']。我需要知道的是用户是否选择佛罗里达或其他城市。 (.watch 不起作用，甚至没有在调试器上停止)

我说清楚了吗？

Answer 1

您可以使用“Florida”键作为键和值，并直接使用选择的 ng-model 设置为 prov，然后监听 prov 更改并设置ciudades 基于所选键:

var app = angular.module('app', []);
app.controller('AppCtrl', function($scope, $compile, $timeout) { 
  $scope.provincias = {
    Florida: ['Miami', 'Orlando']
   };
  $scope.$watch('prov', function(newval, oldval){
    $scope.ciudades = $scope.provincias[newval];
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="AppCtrl">
  <select ng-model="prov" ng-options="key as key for (key, value) in provincias">
    <option ng-model="valor_ciudad" value=''>Elegir</option>
  </select>
  <br>
  $scope.prov: {{prov}}<br>
  $scope.ciudades: {{ciudades}}<br>
</div>