ng-change not working angularjs



我正在创建一个web应用程序,其中我有两个下拉列表,我想在下拉列表1更改下拉列表2的数据

<tr>
    <td>
        state
    </td>
    <td>
        <select ng-change="gcity()" ng-init="state = 'state'" ng-model="state">
            <option ng-repeat="o in statefunc" value="state">{{o.state}}</option>
        </select>
    </td>
</tr>
<tr>
    <td>
        City
    </td>
    <td>
        <select ng-init="city = 'select'" ng-model="city">
            <option ng-repeat="o in city" value="city">{{o.city}}</option>
        </select>
    </td>
</tr>

这是我的下拉菜单如果我选择了一个特定的州那么这个城市应该按照我的州来填充

但是它不工作,甚至在控制台也没有显示任何数据,

然后我试了ng-click

<tr>
    <td>
        state
    </td>
    <td>
        <select ng-click="gcity()" ng-init="state='state'" ng-model="state">
            <option ng-repeat="o in statefunc" value="state">{{o.state}}</option>
        </select>
    </td>
</tr>
<tr>
    <td>
        City
    </td>
    <td>
        <select ng-init="city='select'" ng-model="city">
            <option ng-repeat="o in city" value="city">{{o.city}}</option>
        </select>
    </td>
</tr>

ng-click工作得很好,但我想使用ng-change,这是不工作,任何想法?

我想你在所有选项中都有相同的值

value="state"

<option ng-repeat="o in statefunc" value="{{o.state}}">{{o.state}}</option>

的例子:

http://plnkr.co/edit/aVp4d1JcYWUCdvLYiNb3?p =预览

我建议使用不同的json数组如下。唯一的区别是state是一个状态对象数组,而不是一个状态到城市的键值对。当一个州被选中时,ng-model是带有名称和城市的状态对象。您只能提交州名而不能提交城市列表,这可以在提交期间完成。在这里,两个选择都使用数组选项来进行ngOptions的选择。

JS

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
    $scope.data = {
        "states": [{
            "name": "Maharashtra",
            "cities": ["Pune", "Mumbai", "Nagpur"]
        }, {
            "name": "Gujarat",
            "cities": ["Surat", "Ahmedabad", "Baroda"]
        }, {
            "name": "Rajasthan",
            "cities": ["Jaipur", "Ajmer", "Jodhpur"]
        }]
    }
});

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
    <table>
        <tr>
            <td>
                state
            </td>
            <td>
                <select ng-model="state" ng-options="state.name for state in data.states">
          <option value=''>Select</option>
          </select>
            </td>
        </tr>
        <tr>
            <td>
                City
            </td>
            <td>
                <select ng-disabled="!state" ng-model="city" ng-options="city for city in state.cities">
            <option value=''>Select</option>
        </select>
            </td>
        </tr>
    </table>
</body>
</html>

Plunkr: http://plnkr.co/edit/mtMdbUveeJKMRqmpvHyI?p=preview

在选择标签中使用ng-option代替option。请看下面的例子:

<select ng-init="state='state'" ng-options='o.state for o in statefunc' 
ng-change="gcity()" ng-model="state">
</select>

现在试试这个,我已经为你准备了演示。

function CountryController($scope) {
  $scope.countries = {
    'india': {
      'india city 1': [],
      'india city 2': [],
      'india city 3': [],
      'india city 4': [],
    },
    'Us': {
      'Us city 1': [],
      'Us city 2': [],
      'Us city 3': [],
      'Us city 4': []
    },
    'Australia': {
      'Australia city 1': [],
      'Australia city 2': [],
      'Australia city 3': [],
      'Australia city 4': []
    }
  };
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="" class="container">
  <div ng-controller="CountryController">
    <div class="form-group">
      <label class="control-label" for="Country">Estado:</label>
      <select class="form-control input-lg" id="country" ng-model="states" ng-options="country for (country, states) in countries">
        <option value=''>Select</option>
      </select>
    </div>
    <br>
    <div class="form-group">
      <label class="control-label" for="States">Municípios:</label>
      <select class="form-control input-lg" id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states">
        <option value=''>Select</option>
      </select>
    </div>
  </div>
</div>

最新更新