Question

我正在创建一个网络应用，其中我有两个下拉列表，我想在下拉列表中更改下拉列表2的数据1更改

<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>

这是我的下拉列表，如果我选择一个特定的州，应根据我的州填充城市

但它无法正常工作，甚至在控制台中也没有显示任何数据，

然后我尝试了点击

<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，任何想法？

Answer 1

我认为你在所有选项中都有相同的价值

value="state"

尝试

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

示例：

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

Answer 2

在select tag中使用ng-option代替option。请参阅下面的示例。

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

Answer 3

现在试试这个，我为你准备了演示。

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>

Answer 4

我建议使用不同的json数组，如下所示。唯一的区别是state是一个状态对象的数组而不是一个state to cities键，值对。选择状态时，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"]
        }]
    }
});

<强> HTML

<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-change not working angularjs

4 个答案: